<template>
  <el-drawer
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleClose"
    width="500px"
  >
  <div>
    <div class="container_left">
      <h3>设备信息</h3>
      <el-row>
        <el-col :span="11">
          <img :src="equipment"/>
        </el-col>
        <el-col :span="13">
          <div class="equipment_right" v-for="(item,index) in list" :key="index">
            <el-row>
              <el-col :span="8">
                <label>{{item.label}}</label>
              </el-col>
              <el-col :span="16">
                <span class="content">{{item.text}}</span>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <h3>当前使用记录</h3>
      <el-row>
        <el-col :span="12" v-for="(item,index) in current_history" :key="index">
          <el-row>
            <el-col :span="8">
              <label>{{item.label}}</label>
            </el-col>
            <el-col :span="16">
              <span class="content">{{item.text}}</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <div class="year_history">
        <h3>年度使用记录</h3>
        <el-select
          placeholder="年份"
          style="width: 150px;"
          v-model="currentDate"
          @change="selectYearHandler"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :value="item.value"
            :label="item.value"
          ></el-option>
        </el-select>
      </div>
      <el-row>
        <el-col :span="12" v-for="item in year_history" :key="item.label">
          <el-row>
            <el-col :span="10">
              <label>{{item.label}}</label>
            </el-col>
            <el-col :span="14">
              <span class="content">{{item.text}}</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div style="margin-right:20px;">
      <echarts-gradient style="margin-top:20px"
        :byMonthList="byMonthList"
      />
    </div>
  </div>
  </el-drawer>
</template>

<script>
import { getBaseInfo, getBaseStatInfo } from '@/api/tmn/index.js'
import equipment from './assets/equipment.svg'
import echartsGradient from '../../home/components/echartsGradient.vue';
export default {
  name: 'rightEquipment',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    rowData: {
      type: Object,
      default: () => { }
    }
  },
  components: {
    echartsGradient
  },
  data() {
    return {
      tmnName: '',
      tmnBizcode: '',
      waterName: '',
      cusareaName: '',
      waterAddress: '',
      tmnstatusRunstatusContent: '',
      tmnstatusRunstatus: '',
      year_history: [{
        label: '使用次数：',
        text: '50次'
      }, {
        label: '使用人数：',
        text: '20人'
      }, {
        label: '累计用水量：',
        text: '10000  m³ /s'
      }, {
        label: '累计用电量：',
        text: '42,125°'
      }],
      current_history: [],
      list:[],
      equipment,
      dialogVisible: false,
      currentDate: new Date().getFullYear(),
      options: [],
      byMonthList: [],
      tmnId: ''
    };
  },
  mounted() { 
    this.setYearList()
  },
  watch: {
    visible(val) {
      if (val !== this.dialogVisible) {
        this.dialogVisible = val;
      }
    },
    rowData: {
      deep: true,
      handler(value) {
        const { tmnId } = value
        this.tmnId = tmnId
        this.getBaseInfo()
        this.getBaseStatInfoHandler()
      }
    }
  },
  methods: {
    selectYearHandler(value) { 
      this.currentDate = value
      this.getBaseStatInfoHandler()
    },
    async getBaseStatInfoHandler() { 
      const respones = await getBaseStatInfo({
        tmnId:this.tmnId,
        year: this.currentDate
      })
      const value = respones?.data
      this.byMonthList = value?.byMonthList
      this.year_history =  [{
        label: '使用次数：',
        text: value?.count || 0
      }, {
        label: '使用人数：',
        text: `${value?.farmerCount || 0} 人`
      }, {
        label: '累计用水量：',
        text: `${value?.waterNumTotal || 0}  m³ /s`
      }, {
        label: '累计用电量：',
        text: `${value?.elecNumTotal || 0} °`
      }]
    },
    setYearList() {
      let currentYear = new Date().getFullYear()
      for (let i = 0; i < 5; i++) {
        const currentTime = currentYear--
        this.options.push({
          label: currentTime,
          value: currentTime
        })
      }
    },
    changeStatus(flag) {
      switch (flag) { 
        case 'I':
          return '在线'
        case 'W':
          return '运行'
        case 'E':
          return '故障'
        case 'O':
          return '离线'
      }
     },
    async getBaseInfo() { 
      const response = await getBaseInfo({
        tmnId: this.tmnId
      })
      const value = response?.data
      this.tmnName = value?.tmnName;
      this.tmnBizcode = value?.tmnBizcode;
      this.waterName = value?.waterName;
      this.cusareaName = value?.cusareaName;
      this.waterAddress = value?.waterAddress;
      this.tmnstatusRunstatusContent = value?.tmnstatusRunstatusContent;
      this.tmnstatusRunstatus = this.changeStatus(value?.tmnstatusRunstatus);
      this.list = [{
        label: '设备名称：',
        text: this.tmnName || '-'
      }, {
        label: '设备编号：',
        text: this.tmnBizcode || '-'
      }, {
        label: '水源名称：',
        text: this.waterName || '-'
      }, {
        label: '所属区域：',
        text: this.cusareaName || '-'
      }, {
        label: '所在位置：',
        text: this.waterAddress || '-'
      }, {
        label: '在线状态：',
        text: this.tmnstatusRunstatus || '-'
      }, {
        label: '运行状态：',
        text: this.tmnstatusRunstatusContent || '-'
      }]
      this.current_history = [{
        label: '使用农户：',
        text: value?.farmerName || '-'
      }, {
        label: 'IC卡号：',
        text: value?.cardNo || '-'
      }, {
        label: '当前流速：',
        text: '-'
      }, {
        label: '瞬时流量：',
        text: '-'
      }, {
        label: '已用时长：',
        text: value?.useTime || '-'
      }]
    },
    handleClose() {
      this.$emit('update:visible', false);
    },
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner{
  border: 1px solid #DCDFE6 !important;
}
.container_left{
  width: 90%;
  padding: 0 5%;
  h3{
    color: #333;
    font-family: Source Han Sans CN VF;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
  }
  .equipment_right{
    margin-bottom:5px;
    position: relative;
  }
  
  label{
    color: #999;
    text-overflow: ellipsis;
    font-family: Source Han Sans CN VF;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
  }
  .content{
    color:  #333;
    font-family: Source Han Sans CN VF;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
  }
  .year_history{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>