<template>
  <el-row class="el-row-container" v-loading="loading">
    <el-col
      :span="4"
      style="height:100%;padding-bottom:32px;"
    >
    <el-card style="margin:16px;height: 100%; overflow-y: auto">
      <data-report-left
        @setCurrentData="setCurrentData"
        :treeData="treeData"
      ></data-report-left>
    </el-card>
    </el-col>
    <el-col
      :span="20"
    >
    <el-card style="overflow-y: hidden;min-height:180px;margin-bottom:16px;">
      <div style="margin-bottom: 16px; display:flex;justify-content:space-between">
        <div>
          <span style="font-weight:bold">机井情况</span>(总数: {{ resData.tmnCount }} 口)
        </div>
        <div>
          <el-date-picker
            v-model="dateValue"
            type="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 300px; margin:0 16px"
          >
          </el-date-picker>
          <el-button
            type="primary"
            size="small"
            @click="getTopListHandler"
            >查询</el-button
          >
        </div>
      </div>
      <div style="height:100px;width:auto;overflow:hidden">
        <el-row>
          <el-col :span="14">
            <el-row :gutter="8">
              <el-col 
                :span="4" 
                class="right_width" 
                v-for="item in dataList" 
                :key="item.title"
              >
                <div class="left">
                  <span>
                    <div :class="item.styleClass"></div>
                      {{ item.title }}
                    </span>
                  <div>
                    {{ item.number }}
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="10">
            <div style="display:flex;justify-content: space-around">
              <echarts-pie style="width:30%;margin-left:5%" :proportion="proportion"/>
              <div style="width:65%">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="radius_container">
                    <span class="radius"></span>
                    <span class="label">计划用水量： </span> {{ resData.waterrightAmount }} 吨
                  </div>
                  <div class="radius_container">
                    <span class="radius"></span>
                    <span class="label">累计用水量： </span>  {{ resData.waterNumTotal }} 吨
                  </div>
                  <div class="radius_container">
                    <span class="radius"></span>
                    <span class="label">累计用电量： </span>  {{ resData.elecNumTotal }} 吨
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="radius_container">
                    <span class="label">累计费用： </span>  {{ resData.useMoneyTotal }} 元
                  </div>
                  <div class="radius_container">
                    <span class="label">累计用水费用： </span>  {{ resData.usewatermoneyTotal }} 元
                  </div>
                  <div class="radius_container">
                    <span class="label">累计用电费用： </span>  {{ resData.useelecmoneyTotal }} 元
                  </div>
                </el-col>
              </el-row>
            </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card style="height: calc(100% - 180px); overflow-y: auto;">
      <el-col :span="24" class="elrow-main__col-top">
        <div>
          <el-input
            v-model="waterKeyword"
            style="width: 250px;margin-right:20px;"
            placeholder="请输入机井编号/机井名称"
            clearable
          />
          <el-select
            v-model="tmnstatusRunstatus"
            style="width: 200px;margin-right:16px"
            placeholder="设备状态"
            clearable
          >
          <el-option
            v-for="item in options"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
          <el-button
            type="primary"
            size="small"
            @click="handleSearch"
            >查询</el-button
          >
        </div>
      </el-col>
      <el-col :span="24" class="elrow-main__col-bottom">
        <b-table
          ref="tableRef"
          :args="{ 'highlight-current-row': true }"
          :data="loadData"
          :columns="columns"
          isShowIndex
        >
          <template #status="scope">
            <span style="display:flex;align-items:center;justify-content:center">
              <span class="status nowork" v-if="scope.row.tmnstatusRunstatusContent == '空闲中'"></span>
              <span class="status work" v-if="scope.row.tmnstatusRunstatusContent == '工作中'"></span>
              <span class="status error" v-if="scope.row.tmnstatusRunstatusContent == '故障'"></span>
              <span class="status nolive" v-if="scope.row.tmnstatusRunstatusContent == '离线'"></span>
              {{ scope.row.tmnstatusRunstatusContent }}
            </span>
          </template>

          <template #operate="scope">
            <el-link
              size="small"
              :underline="false"
              type="primary"
              style="margin-right: 10px"
              @click="realTime(scope.row)"
              >实时监测</el-link
            >
            <el-link
              size="small"
              :underline="false"
              type="primary"
              style="margin-right: 10px"
              @click="irrigationShowHistory(scope.row)"
              >灌溉记录</el-link
            >
          </template>
        </b-table>
      </el-col>
    </el-card>
    </el-col>
    <real-time-monitor :visible.sync="realTimeShow"/>
    <irrigation-record :visible.sync="irrigationShow" />
  </el-row>
</template>

<script>
import { getBaseList, getTopList } from '@/api/tmn/index.js'
import EchartsPie from './components/echartsPie.vue'
import BTable from '@/components/Table/index.vue';
import DataReportLeft from '@/components/DataReportLeft/index.vue'
import realTimeMonitor from './components/realTimeMonitor.vue';
import IrrigationRecord from './components/IrrigationRecord.vue';
import { getTree } from '@/api/tree.js'
import { assign, omit } from 'lodash-es';

export default {
  name: 'monitoringMamage',
  components: { BTable,DataReportLeft,EchartsPie,realTimeMonitor,IrrigationRecord },
  data() {
    return {
      dateValue:'',
      form: {
        productName: ''
      },
      dataList: [{
        title: '在线',
        number: 0,
        styleClass: 'radius'
      }, {
        title: '运行',
        number: 0,
        styleClass: 'radius run'
      }, {
        title: '故障',
        number: 0,
        styleClass: 'radius error'
      }, {
        title: '告警',
        number: 0,
        styleClass: 'radius waring'
      }, {
        title: '离线',
        number: 0,
        styleClass: 'radius noliving'
      }],
      options: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '空闲中',
          value: 'I'
        },
        {
          label: '工作中',
          value: 'W'
        },
        {
          label: '故障',
          value: 'E'
        },
        {
          label: '离线',
          value: 'O'
        },
      ],
      treeData: [],
      loading: false,
      realTimeShow: false,
      irrigationShow: false,
      waterKeyword: '',
      tmnstatusRunstatus: '',
      areaId: '',
      startTime: '',
      endTime: '',
      proportion: 0,
      resData: {},
      columns: [
        {
          label: '水电双计编号',
          prop: 'tmnBizcode',
          customRender: '',
          align: 'center'
        },
        {
          label: '设备名称',
          prop: 'tmnName',
          customRender: '',
          align: 'center'
        },
        {
          label: '水源名称',
          prop: 'waterName',
          customRender: '',
          align: 'center'
        },
        {
          label: '设备状态',
          prop: 'tmnstatusRunstatusContent',
          customRender: 'status',
          align: 'center'
        }, {
          label: '累计用水量',
          prop: 'waterNumTotal',
          customRender: '',
          align: 'center'
        }, {
          label: '累计用电量',
          prop: 'elecNumTotal',
          customRender: '',
          align: 'center'
        }, {
          label: '更新时间',
          prop: 'tmnstatusUpdateddate',
          customRender: '',
          align: 'center'
        }, 
        {
          label: '操作',
          customRender: 'operate',
          width: 200,
          align: 'center'
        }
      ]
    };
  },
  methods: {
    // async getTreeList() {
    //   const treeList = this.$store.state.tree.treeList
    //   let res = []
    //   if (treeList.code === '000000') {
    //     res = treeList
    //   } else {
    //     res = await getTree()
    //     this.$store.dispatch('tree/setTree', res)
    //   }
    //   const data = res?.data
    //   this.treeData = data
    // },
    irrigationShowHistory() {
      this.irrigationShow = true
    },
    
    setCurrentData(areaId) {
      this.areaId = areaId
      this.$refs.tableRef.refresh(false);
    },
    realTime() {
      this.realTimeShow = true
    },
    async loadData(parameter) {
      if (!this.areaId) {
        const treeList = this.$store.state.tree.treeList
        let res = []
        if (treeList.code === '000000') {
          res = treeList
        } else {
          res = await getTree()
          this.$store.dispatch('tree/setTree', res)
        }
        this.treeData = res?.data
        this.cusareaName ||= this.treeData[0].cusareaName
        this.areaId = this.treeData[0].cusareaId
      }
      const params = {
        areaId: this.areaId,
        tmnstatusRunstatus: this.tmnstatusRunstatus,
        waterKeyword: this.waterKeyword
      }
      const payload = omit(assign({}, parameter, params), []);
      this.getTopListHandler()
      return this.getTableData(payload)
    },
    getTableData(payload) {
      return getBaseList(payload)
    },
    async getTopListHandler() { 
      let [startTime, endTime] = this.dateValue
      startTime ||= new Date().getFullYear()
      const res = await getTopList({
        areaId: this.areaId,
        startTime,
        endTime
      })
      const resData = res?.data
      this.resData = resData
      this.proportion = this.resData.proportion
      this.dataList = [
        {
          title: '在线',
          number: resData?.tmnCount1,
          styleClass: 'radius'
        }, {
          title: '运行',
          number: resData?.tmnCount2,
          styleClass: 'radius run'
        }, {
          title: '故障',
          number: resData?.tmnCount3,
          styleClass: 'radius error'
        }, {
          title: '告警',
          number: resData?.tmnCount5,
          styleClass: 'radius waring'
        }, {
          title: '离线',
          number: resData?.tmnCount4,
          styleClass: 'radius noliving'
        }
      ]
    },
    handleSearch() {
      this.$refs.tableRef.refresh(true);
    },
    goDetail(row) {
      this.$refs.sourceCodeDetail.open(row.tarcecodeapplyBatchno)
    },
  },
  mounted() {
    // this.getTreeList()
  }
};
</script>

<style lang="scss" scoped>
@import './monitoringMamage.scss'
</style>
