<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 :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;"><span style="font-weight:bold">机井情况</span>(总数: 256口)</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-evenly">
              <echarts-pie/>
              <div style="position:relative;left:-50px;">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="radius_container">
                    <span class="radius"></span>
                    <span class="label">额定用水量:</span> 6256吨
                  </div>
                  <div class="radius_container">
                    <span class="radius"></span>
                    <span class="label">额定用水量:</span> 6256吨
                  </div>
                  <div class="radius_container">
                    <span class="radius"></span>
                    <span class="label">额定用水量:</span> 6256吨
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="radius_container">
                    <span class="label">额定用水量:</span> 6256吨
                  </div>
                  <div class="radius_container">
                    <span class="label">额定用水量:</span> 6256吨
                  </div>
                  <div class="radius_container">
                    <span class="label">额定用水量:</span> 6256吨
                  </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="form.goodsName"
            style="width: 250px;margin-right:20px;"
            placeholder="请输入机井编号/机井名称"
            @keyup.enter.native="handleSearch"
            clearable
          />
          <el-select
            v-model="form.goodsName"
            style="width: 200px;"
            placeholder="设备状态"
            clearable
          ></el-select>
          <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 20px"
          >
          </el-date-picker>
          <el-button
            type="primary"
            size="small"
            @click="handleSearch"
            >查询</el-button
          >
        </div>
      </el-col>
      <el-col :span="24" class="elrow-main__col-bottom">
        <img v-if="imgUrl" :src="imgUrl" />
        <b-table
          ref="tableRef"
          :args="{ 'highlight-current-row': true }"
          :data="loadData"
          :columns="columns"
          isShowIndex
        >
          <template #styleImg="scope">
            <el-image
              :src="scope.row.imgPreview"
              :preview-src-list="[scope.row.imgPreview]"
              slot="error"
              class="image-slot"
              style="width: 100px; height: 50px"
            >
              <div slot="error" class="image-slot"></div>
            </el-image>
          </template>
          <template #codeNo="scope">           
            <el-link
              type="primary"
              :underline="false"
              @click="goDetail(scope.row)"
              >{{ scope.row.traceCodeApplyConcat }}</el-link
            >
          </template>
          <template #status="scope">
            <span style="display:flex;align-items:center;justify-content:center">
              <span class="status"></span>
              {{ scope.row.name }}
            </span>
          </template>
          <template #useNumber="scope">
            {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
          </template>
          <template #finishGoodName="scope">
            {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
          </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 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'

export default {
  name: 'monitoringMamage',
  components: { BTable,DataReportLeft,EchartsPie,realTimeMonitor,IrrigationRecord },
  data() {
    return {
      imgUrl: '',
      form: {
        productName: ''
      },
      dataList: [{
        title: '在线',
        number: 551,
        styleClass: 'radius'
      },{
        title: '运行',
        number: 551,
        styleClass: 'radius run'
      },{
        title: '故障',
        number: 551,
        styleClass: 'radius error'
      },{
        title: '告警',
        number: 551,
        styleClass: 'radius waring'
      },{
        title: '离线',
        number: 551,
        styleClass: 'radius noliving'
      }],
      treeData: [],
      loading: false,
      associationManageShow: false,
      realTimeShow: false,
      irrigationShow: false,
      columns: [
        {
          label: '水电双计编号',
          prop: 'person',
          customRender: '',
          align: 'center'
        },
        {
          label: '设备名称',
          prop: 'area',
          customRender: '',
          align: 'center'
        },
        {
          label: '水源名称',
          prop: 'name',
          customRender: '',
          align: 'center'
        },
        {
          label: '设备状态',
          prop: 'phone',
          customRender: 'status',
          align: 'center'
        },{
          label: '累计用水量',
          prop: 'phone',
          customRender: '',
          align: 'center'
        },{
          label: '累计用电量',
          prop: 'phone',
          customRender: '',
          align: 'center'
        },{
          label: '更新时间',
          prop: 'phone',
          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
    },
    realTime() {
      this.realTimeShow = true
    },
    loadData() {
      return this.getTableData();
    },
    getTableData() {
      return Promise.resolve({
        data: [{
          person:"王大虎",
          area: '2016-05-02',
          name: '王小虎',
          phone: 1588888888,
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          person:"王大虎",
          area: '2016-05-04',
          name: '王小虎',
          phone: 1588888888,
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          person:"王大虎",
          area: '2016-05-01',
          name: '王小虎',
          phone: 1588888888,
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          person:"王大虎",
          area: '2016-05-03',
          name: '王小虎',
          phone: 1588888888,
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      })
    },
    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>
