<template>
  <div class="eartagdetail">
    <el-card class="kuang">
      <div slot="header">
        <el-row :gutter="20">
          <el-col :span="16">
            <span>温度曲线</span>
          </el-col>
          <el-col :span="8">
            <el-date-picker
              @change="onSelect"
              size="mini"
              type="datetimerange"
              v-model="date"
              range-separator="至"
              :clearable="false"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%;">
            </el-date-picker>
          </el-col>
        </el-row>
      </div>
      <div class="kuang-body">
        <template v-if="timeList.length > 0">
          <chart-temp :env-list="envList" :time-list="timeList" :temp-list="tempList" :averange-list="averangeList"></chart-temp>
        </template>
        <template v-else>
          <el-empty style="height: 490px" description="暂无数据"></el-empty>
        </template>
      </div>
    </el-card>
    <br/>
    <el-card class="kuang">
      <div slot="header">
        <el-row :gutter="20">
          <el-col :span="16">
            <span>耳标电量</span>
          </el-col>
          <el-col :span="8">
            <el-date-picker
              @change="onSelect"
              size="mini"
              type="datetimerange"
              v-model="date"
              range-separator="至"
              :clearable="false"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%;">
            </el-date-picker>
          </el-col>
        </el-row>
      </div>
      <div class="kuang-body">
        <template v-if="timeList.length > 0">
          <chart-dls :time-list="timeList" :dl-list="dlList"></chart-dls>
        </template>
        <template v-else>
          <el-empty style="height: 490px" description="暂无数据"></el-empty>
        </template>
      </div>
    </el-card>
    <br/>
    <el-card class="kuang">
      <div slot="header">
        <el-row :gutter="20">
          <el-col :span="16">
            <span>运动量</span>
          </el-col>
          <el-col :span="8">
            <el-date-picker
              @change="onSelect"
              size="mini"
              type="datetimerange"
              v-model="date"
              range-separator="至"
              :clearable="false"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%;">
            </el-date-picker>
          </el-col>
        </el-row>
      </div>
      <div class="kuang-body">
        <template v-if="timeList.length > 0">
          <chart-ydl :time-list="timeList" :ydl-list="ydlList"></chart-ydl>
        </template>
        <template v-else>
          <el-empty style="height: 490px" description="暂无数据"></el-empty>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getEarTagDetail } from "@/utils/apis/eartag-detail/earTagDetail";
import ChartTemp from "./chart/ChartTemp";
import ChartDls from "./chart/ChartDls";
import ChartYdl from "./chart/ChartYdl";
export default {
  name: "EartagDetail",
  components: {
    ChartTemp,
    ChartDls,
    ChartYdl
  },
  data() {
    return {
      date: [],
      tempList: [],
      timeList: [],
      envList: [],
      averangeList: [],
      dlList: [],
      ydlList: [],
      eartagNo: '',
    }
  },
  methods: {
    init() {
      let params = {
        eartagNo: this.eartagNo,
      }
      getEarTagDetail(params).then(res => {
        if(res.code === 0) {
          this.timeList = res.data.timeList;
          this.tempList = res.data.earTempList;
          this.envList = res.data.environmentTempList;
          this.dlList = res.data.electricList;
          this.ydlList = res.data.exerciseList;
        }
      })
    },
    onSelect() {
      let params = {
        eartagNo: this.eartagNo,
        startTime: this.date[0],
        endTime: this.date[1]
      }
      getEarTagDetail(params).then(res => {
        if(res.code === 0) {
          this.timeList = res.data.timeList;
          this.tempList = res.data.earTempList;
          this.envList = res.data.environmentTempList;
          this.dlList = res.data.electricList;
          this.ydlList = res.data.exerciseList;
        }
      })
    }
  },
  mounted() {
    this.eartagNo = this.$route.query.id;
    this.init()
  }
}
</script>

<style scoped>
  .eartagdetail {
    box-sizing: border-box;
    padding: 20px;
  }
  .kuang {
    width: 100%;
    height: 600px;
    background: #fff;
    border-radius: 2px;
  }
  .kuang-body {
    box-sizing: border-box;
    width: 100%;
    height: 490px;
  }
</style>
