<template>
  <div class="dashboard-editor-container">
    <div v-if="isPercentage" class="percentage" style="width: 210px;height: 90px;background: #fff;position: fixed;bottom: 0;left: 0;z-index: 9999999999999;">
      <h4 style="padding-left: 10px;line-height: 0;">导出进度：</h4>
      <el-progress style="padding-left: 10px;" :text-inside="true" :stroke-width="26" :percentage="percentage" />
    </div>
    <el-row>
      <el-col :gutter="32">
        <el-select v-model="pastureName" placeholder="牧场" style="width: 140px;" class="filter-item" @change="changePastureName">
          <el-option v-for="item in findAllPasture" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-date-picker v-model="yearDate" :clearable="false" :picker-options="pickerOptions" type="year" placeholder="选择年" />
        <el-button class="filter-item" type="success" icon="el-icon-edit" style="float:right;" @click="handleDownload">导出</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :gutter="32">
        <h3>设备指标(万元)</h3>
        <el-table
          :key="equipmentIndex.table.tableKey"
          v-loading="equipmentIndex.table.listLoading"
          element-loading-text="给我一点时间"
          :data="equipmentIndex.table.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="tableCellStyle"
          class="elTable"
          @sort-change="tableSort1"
        >
          <el-table-column label="序号" align="center" type="index" width="50px" />
          <el-table-column label="部门" min-width="70px" align="center">
            <template slot-scope="{row}">
              <a @click="clickEquipmentIndex(row)">{{ row.deptName }}</a>
            </template>
          </el-table-column>
          <el-table-column label="预算" min-width="80px" align="center" sortable prop="monthBudget" />
          <el-table-column label="内控" min-width="80px" align="center" sortable prop="monthLimit" />
          <el-table-column label="迄今内控" min-width="80px" align="center" sortable prop="qmonthBudget" />
          <el-table-column label="迄今实际" min-width="80px" align="center" sortable prop="sumPrice" />
          <el-table-column label="实际节约" min-width="110px" align="center" sortable prop="asave" />
          <el-table-column label="迄今达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'dac')" min-width="90px" align="center" prop="dac" />
          <el-table-column label="年度达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'dacY')" min-width="90px" align="center" prop="dacY" />
        </el-table>
      </el-col>
    </el-row>
    <el-row :gutter="32">
      <!-- 水 -->
      <el-col :xs="12" :sm="12" :lg="12">
        <h3>水费(万元)</h3>
        <el-table
          :key="water.table.tableKey"
          v-loading="water.table.listLoading"
          element-loading-text="给我一点时间"
          :data="water.table.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="tableCellStyle"
          class="elTable"
          @sort-change="tableSort2"
        >
          <el-table-column label="序号" align="center" type="index" width="50px" />
          <el-table-column label="部门" min-width="75px" align="center">
            <template slot-scope="{row}">
              <a @click="clickWaterCost(row)">{{ row.deptName }}</a>
            </template>
          </el-table-column>
          <el-table-column label="预算" min-width="80px" align="center" sortable prop="monthBudget" />
          <el-table-column label="内控" min-width="80px" align="center" sortable prop="monthLimit" />
          <el-table-column label="迄今内控" min-width="80px" align="center" sortable prop="qmonthBudget" />
          <el-table-column label="迄今实际" min-width="80px" align="center" sortable prop="sumPrice" />
          <el-table-column label="实际节约" min-width="110px" align="center" sortable prop="asave" />
          <el-table-column label="迄今达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'dac')" min-width="90px" align="center" prop="dac" />
          <el-table-column label="年度达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'dacY')" min-width="90px" align="center" prop="dacY" />
        </el-table>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12">
        <h3>电费(万元)</h3>
        <el-table
          :key="elec.table.tableKey"
          v-loading="elec.table.listLoading"
          element-loading-text="给我一点时间"
          :data="elec.table.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="tableCellStyle"
          class="elTable"
          @sort-change="tableSort3"
        >
          <el-table-column label="序号" align="center" type="index" width="50px" />
          <el-table-column label="部门" min-width="75px" align="center">
            <template slot-scope="{row}">
              <a @click="clickElecCost(row)">{{ row.deptName }}</a>
            </template>
          </el-table-column>
          <el-table-column label="预算" min-width="80px" align="center" sortable prop="monthBudget" />
          <el-table-column label="内控" min-width="80px" align="center" sortable prop="monthLimit" />
          <el-table-column label="迄今内控" min-width="80px" align="center" sortable prop="qmonthBudget" />
          <el-table-column label="迄今实际" min-width="80px" align="center" sortable prop="sumPrice" />
          <el-table-column label="实际节约" min-width="110px" align="center" sortable prop="asave" />
          <el-table-column label="迄今达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'dac')" min-width="90px" align="center" prop="dac" />
          <el-table-column label="年度达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'dacY')" min-width="90px" align="center" prop="dacY" />
        </el-table>
      </el-col>
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="12" :sm="12" :lg="12">
        <h3>维修费(万元)</h3>
        <el-table
          :key="repair.table.tableKey"
          v-loading="repair.table.listLoading"
          element-loading-text="给我一点时间"
          :data="repair.table.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="tableCellStyle"
          class="elTable"
          @sort-change="tableSort4"
        >
          <el-table-column label="序号" align="center" type="index" width="50px" />
          <el-table-column label="部门" min-width="75px" align="center">
            <template slot-scope="{row}">
              <a @click="clickRepairCost(row)">{{ row.deptName }}</a>
            </template>
          </el-table-column>
          <el-table-column label="预算" min-width="80px" align="center" sortable prop="monthBudget" />
          <el-table-column label="内控" min-width="80px" align="center" sortable prop="monthLimit" />
          <el-table-column label="迄今内控" min-width="80px" align="center" sortable prop="qmonthBudget" />
          <el-table-column label="迄今实际" min-width="80px" align="center" sortable prop="sumPrice" />
          <el-table-column label="实际节约" min-width="110px" align="center" sortable prop="asave" />
          <el-table-column label="迄今达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'dac')" min-width="90px" align="center" prop="dac" />
          <el-table-column label="年度达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'dacY')" min-width="90px" align="center" prop="dacY" />
        </el-table>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12">
        <h3>燃动费(万元)</h3>
        <el-table
          :key="gas.table.tableKey"
          v-loading="gas.table.listLoading"
          element-loading-text="给我一点时间"
          :data="gas.table.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="tableCellStyle"
          class="elTable"
          @sort-change="tableSort5"
        >
          <el-table-column label="序号" align="center" type="index" width="50px" />
          <el-table-column label="部门" min-width="75px" align="center">
            <template slot-scope="{row}">
              <a @click="clickGasCost(row)">{{ row.deptName }}</a>
            </template>
          </el-table-column>
          <el-table-column label="预算" min-width="80px" align="center" sortable prop="monthBudget" />
          <el-table-column label="内控" min-width="80px" align="center" sortable prop="monthLimit" />
          <el-table-column label="迄今内控" min-width="80px" align="center" sortable prop="qmonthBudget" />
          <el-table-column label="迄今实际" min-width="80px" align="center" sortable prop="sumPrice" />
          <el-table-column label="实际节约" min-width="110px" align="center" sortable prop="asave" />
          <el-table-column label="迄今达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'dac')" min-width="90px" align="center" prop="dac" />
          <el-table-column label="年度达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'dacY')" min-width="90px" align="center" prop="dacY" />
        </el-table>
      </el-col>
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="12" :sm="12" :lg="12">
        <h3>水量(吨)</h3>
        <el-table
          :key="waterConsumption.table.tableKey"
          v-loading="waterConsumption.table.listLoading"
          element-loading-text="给我一点时间"
          :data="waterConsumption.table.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="tableCellStyle"
          class="elTable"
          @sort-change="tableSort6"
        >
          <el-table-column label="序号" align="center" type="index" width="50px" />
          <el-table-column label="部门" min-width="75px" align="center">
            <template slot-scope="{row}">
              <a @click="clickWaterConsumption(row)">{{ row.deptName }}</a>
            </template>
          </el-table-column>
          <el-table-column label="预算" min-width="80px" align="center" sortable prop="monthBudget" />
          <el-table-column label="内控" min-width="80px" align="center" sortable prop="monthLimit" />
          <el-table-column label="迄今内控" min-width="80px" align="center" sortable prop="qmonthBudget" />
          <el-table-column label="迄今实际" min-width="80px" align="center" sortable prop="sumPrice" />
          <el-table-column label="实际节约" min-width="110px" align="center" sortable prop="asave" />
          <el-table-column label="迄今达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'dac')" min-width="90px" align="center" prop="dac" />
          <el-table-column label="年度达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'dacY')" min-width="90px" align="center" prop="dacY" />
        </el-table>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12">
        <h3>电量(度)</h3>
        <el-table
          :key="elecConsumption.table.tableKey"
          v-loading="elecConsumption.table.listLoading"
          element-loading-text="给我一点时间"
          :data="elecConsumption.table.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="tableCellStyle"
          class="elTable"
          @sort-change="tableSort7"
        >
          <el-table-column label="序号" align="center" type="index" width="50px" />
          <el-table-column label="部门" min-width="75px" align="center">
            <template slot-scope="{row}">
              <a @click="clickElecConsumption(row)">{{ row.deptName }}</a>
            </template>
          </el-table-column>
          <el-table-column label="预算" min-width="80px" align="center" sortable prop="monthBudget" />
          <el-table-column label="内控" min-width="80px" align="center" sortable prop="monthLimit" />
          <el-table-column label="迄今内控" min-width="80px" align="center" sortable prop="qmonthBudget" />
          <el-table-column label="迄今实际" min-width="80px" align="center" sortable prop="sumPrice" />
          <el-table-column label="实际节约" min-width="110px" align="center" sortable prop="asave" />
          <el-table-column label="迄今达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'dac')" min-width="90px" align="center" prop="dac" />
          <el-table-column label="年度达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'dacY')" min-width="90px" align="center" prop="dacY" />
        </el-table>
      </el-col>
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="12" :sm="12" :lg="12">
        <h3>柴油用量(L)</h3>
        <el-table
          :key="gasConsumption.table.tableKey"
          v-loading="gasConsumption.table.listLoading"
          element-loading-text="给我一点时间"
          :data="gasConsumption.table.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="tableCellStyle"
          class="elTable"
          @sort-change="tableSort8"
        >
          <el-table-column label="序号" align="center" type="index" width="50px" />
          <el-table-column label="部门" min-width="75px" align="center">
            <template slot-scope="{row}">
              <a @click="clickGasConsumption(row)">{{ row.deptName }}</a>
            </template>
          </el-table-column>
          <el-table-column label="预算" min-width="80px" align="center" sortable prop="monthBudget" />
          <el-table-column label="内控" min-width="80px" align="center" sortable prop="monthLimit" />
          <el-table-column label="迄今内控" min-width="80px" align="center" sortable prop="qmonthBudget" />
          <el-table-column label="迄今实际" min-width="80px" align="center" sortable prop="sumPrice" />
          <el-table-column label="实际节约" min-width="110px" align="center" sortable prop="asave" />
          <el-table-column label="迄今达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'dac')" min-width="90px" align="center" prop="dac" />
          <el-table-column label="年度达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'dacY')" min-width="90px" align="center" prop="dacY" />
        </el-table>
      </el-col>
    </el-row>
    <!-- 点击 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialog.dialogFormVisible" :close-on-click-modal="false">
      <div class="pasture">
        <el-table
          :key="dialog.tableKey"
          v-loading="dialog.listLoading"
          element-loading-text="给我一点时间"
          :data="dialog.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="cellStyle"
          class="elTable"
          @sort-change="tableSort9"
        >
          <el-table-column label="序号" align="center" type="index" width="50px">
            <template slot-scope="scope">
              <span>{{ scope.$index + (dialog.pageNum-1) * dialog.pageSize + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="月份" min-width="110px" align="center" sortable prop="wmonth" />
          <el-table-column label="预算" min-width="110px" align="center" sortable prop="monthBudget" />
          <el-table-column label="内控" min-width="110px" align="center" sortable prop="monthLimit" />
          <el-table-column label="迄今内控" min-width="110px" align="center" sortable prop="qmonthBudget" />
          <el-table-column label="迄今实际" min-width="110px" align="center" sortable prop="sumPrice" />
          <el-table-column label="实际节约" min-width="110px" align="center" sortable prop="asave" />
          <el-table-column label="迄今达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'dac')" min-width="90px" align="center" prop="dac" />
          <el-table-column label="月度达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'dacY')" min-width="90px" align="center" prop="dacY" />
        </el-table>
        <pagination v-show="dialog.total>0" :total="dialog.total" :page.sync="dialog.getdataListParm.offset" :limit.sync="dialog.getdataListParm.pagecount" @pagination="getListDialog" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入
require('script-loader!file-saver')
// eslint-disable-next-line no-unused-vars
import { validateEMail } from '@/utils/validate.js'
import { GetDataByName, GetDataByNames } from '@/api/common'
import waves from '@/directive/waves' // waves directive
import Cookies from 'js-cookie'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
// eslint-disable-next-line no-unused-vars
import { parseTime, json2excel, sortChange } from '@/utils/index.js'
import axios from 'axios'
import { getToken } from '@/utils/auth'
export default {
  name: 'FarmEquipment',
  components: { Pagination },
  directives: { waves },
  filters: {
    keepTwoNum(value) {
      value = Number(value)
      return value.toFixed(2)
    }
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7
        }
      },
      findAllPasture: [],
      requestParams: [
        { name: 'findAllPasture', offset: 0, pagecount: 0, returntype: 'Map', parammaps: { 'id': Cookies.get('pastureid') }}
      ],
      yearDate: new Date(),
      month: '',
      pastureName: Cookies.get('pasturename'),
      pastureId: Cookies.get('pastureid'),
      // 设备指标
      equipmentIndex: {
        table: {
          listLoading: true,
          list: [],
          tableKey: 0,
          getdataListParm: {
            name: 'geteqMonthBudgetListSBMC',
            page: 1,
            offset: 1,
            returntype: 'Map',
            parammaps: {
              pastureName: Cookies.get('pasturename'),
              pastureId: Cookies.get('pastureid'),
              month: parseTime(new Date(), '{y}-{m}-{d}')
            }
          }
        }
      },
      // 水费
      water: {
        table: {
          listLoading: true,
          list: null,
          tableKey: 0,
          getdataListParm: {
            name: 'geteqMonthBudgetListWMMC',
            page: 1,
            offset: 1,
            returntype: 'Map',
            parammaps: {
              pastureName: Cookies.get('pasturename'),
              pastureId: Cookies.get('pastureid'),
              month: parseTime(new Date(), '{y}-{m}-{d}')
            }
          }
        }
      },
      // 电费
      elec: {
        table: {
          listLoading: true,
          list: null,
          tableKey: 0,
          getdataListParm: {
            name: 'geteqMonthBudgetListEMMC',
            page: 1,
            offset: 1,
            returntype: 'Map',
            parammaps: {
              pastureName: Cookies.get('pasturename'),
              pastureId: Cookies.get('pastureid'),
              month: parseTime(new Date(), '{y}-{m}-{d}')
            }
          }
        }
      },
      // 维修费
      repair: {
        table: {
          listLoading: true,
          list: null,
          tableKey: 0,
          getdataListParm: {
            name: 'geteqMonthBudgetListXMMC',
            page: 1,
            offset: 1,
            returntype: 'Map',
            parammaps: {
              pastureName: Cookies.get('pasturename'),
              pastureId: Cookies.get('pastureid'),
              month: parseTime(new Date(), '{y}-{m}-{d}')
            }
          }
        }
      },
      // 燃动费
      gas: {
        table: {
          listLoading: true,
          list: null,
          tableKey: 0,
          getdataListParm: {
            name: 'geteqMonthBudgetListRMMC',
            page: 1,
            offset: 1,
            returntype: 'Map',
            parammaps: {
              pastureName: Cookies.get('pasturename'),
              pastureId: Cookies.get('pastureid'),
              month: parseTime(new Date(), '{y}-{m}-{d}')
            }
          }
        }
      },
      // 水量
      waterConsumption: {
        table: {
          listLoading: true,
          list: null,
          tableKey: 0,
          getdataListParm: {
            name: 'geteqMonthBudgetListWSMC',
            page: 1,
            offset: 1,
            returntype: 'Map',
            parammaps: {
              pastureName: Cookies.get('pasturename'),
              pastureId: Cookies.get('pastureid'),
              month: parseTime(new Date(), '{y}-{m}-{d}')
            }
          }
        }
      },
      // 电量
      elecConsumption: {
        table: {
          listLoading: true,
          list: null,
          tableKey: 0,
          getdataListParm: {
            name: 'geteqMonthBudgetListESMC',
            page: 1,
            offset: 1,
            returntype: 'Map',
            parammaps: {
              pastureName: Cookies.get('pasturename'),
              pastureId: Cookies.get('pastureid'),
              month: parseTime(new Date(), '{y}-{m}-{d}')
            }
          }
        }
      },
      // 柴油用量
      gasConsumption: {
        table: {
          listLoading: true,
          list: null,
          tableKey: 0,
          getdataListParm: {
            name: 'geteqMonthBudgetListRSMC',
            page: 1,
            offset: 1,
            returntype: 'Map',
            parammaps: {
              pastureName: Cookies.get('pasturename'),
              pastureId: Cookies.get('pastureid'),
              month: parseTime(new Date(), '{y}-{m}-{d}')
            }
          }
        }
      },
      dialog: {
        dialogFormVisible: false,
        total: 0,
        getdataListParm: {
          name: '',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            month: '',
            pastureName: '',
            pastureId: ''
          }
        },
        tableKey: 0,
        listLoading: true,
        list: null
      },
      dialogStatus: '',
      textMap: {},
      requestParam: {
        name: 'insertAsset',
        offset: 0,
        pagecount: 0,
        parammaps: {}
      },
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' },

      downloadAll: {},
      isPercentage: false,
      percentage: 1
    }
  },
  watch: {
    'yearDate': {
      deep: true,
      handler: function(newVal, oldVal) {
        var time = this.yearDate
        if (new Date().getFullYear() == time.getFullYear()) {
          this.month = parseTime(new Date(), '{y}-{m}-{d}')
        } else {
          this.month = time.getFullYear() + 1 + '-01-01'
        }
        this.equipmentIndex.table.getdataListParm.parammaps.month = this.month
        this.water.table.getdataListParm.parammaps.month = this.month
        this.elec.table.getdataListParm.parammaps.month = this.month
        this.repair.table.getdataListParm.parammaps.month = this.month
        this.gas.table.getdataListParm.parammaps.month = this.month
        this.gasConsumption.table.getdataListParm.parammaps.month = this.month
        this.gasConsumption.table.getdataListParm.parammaps.month = this.month
        this.gasConsumption.table.getdataListParm.parammaps.month = this.month

        this.getlistEquipmentIndex()
      }
    }
  },
  created() {
    this.getlistEquipmentIndex()
    this.get_select_list()
  },

  methods: {
    sortMethod(a, b, c) {
      var str = 0
      var str2 = 0
      str2 = parseFloat(a[c].substring(0, a[c].length - 1))
      str = parseFloat(b[c].substring(0, b[c].length - 1))
      return str2 - str
    },
    tableSort1(column) {
      sortChange(column, this.equipmentIndex.table.list)
    },
    tableSort2(column) {
      sortChange(column, this.water.table.list)
    },
    tableSort3(column) {
      sortChange(column, this.elec.table.list)
    },
    tableSort4(column) {
      sortChange(column, this.repair.table.list)
    },
    tableSort5(column) {
      sortChange(column, this.gas.table.list)
    },
    tableSort6(column) {
      sortChange(column, this.waterConsumption.table.list)
    },
    tableSort7(column) {
      sortChange(column, this.elecConsumption.table.list)
    },
    tableSort8(column) {
      sortChange(column, this.gasConsumption.table.list)
    },
    tableSort9(column) {
      sortChange(column, this.dialog.list)
    },
    get_select_list() {
      GetDataByNames(this.requestParams).then(response => {
        this.findAllPasture = response.data.findAllPasture.list
      })
    },
    changePastureName(item) {
      this.pastureName = this.findAllPasture.find(obj => obj.id == item).name
      this.pastureId = item
      console.log(item, this.pastureName)
      this.equipmentIndex.table.getdataListParm.parammaps.pastureName = this.pastureName
      this.equipmentIndex.table.getdataListParm.parammaps.pastureId = this.pastureId

      this.water.table.getdataListParm.parammaps.pastureName = this.pastureName
      this.water.table.getdataListParm.parammaps.pastureId = this.pastureId

      this.elec.table.getdataListParm.parammaps.pastureName = this.pastureName
      this.elec.table.getdataListParm.parammaps.pastureId = this.pastureId

      this.repair.table.getdataListParm.parammaps.pastureName = this.pastureName
      this.repair.table.getdataListParm.parammaps.pastureId = this.pastureId

      this.gas.table.getdataListParm.parammaps.pastureName = this.pastureName
      this.gas.table.getdataListParm.parammaps.pastureId = this.pastureId

      this.waterConsumption.table.getdataListParm.parammaps.pastureName = this.pastureName
      this.waterConsumption.table.getdataListParm.parammaps.pastureId = this.pastureId

      this.elecConsumption.table.getdataListParm.parammaps.pastureName = this.pastureName
      this.elecConsumption.table.getdataListParm.parammaps.pastureId = this.pastureId

      this.gasConsumption.table.getdataListParm.parammaps.pastureName = this.pastureName
      this.gasConsumption.table.getdataListParm.parammaps.pastureId = this.pastureId

      this.getlistEquipmentIndex()
    },
    // 1-1: 设备指标table
    getlistEquipmentIndex() {
      this.equipmentIndex.table.listLoading = true
      GetDataByName(this.equipmentIndex.table.getdataListParm).then(response => {
        if (response.data.list !== null) {
          this.equipmentIndex.table.list = response.data.list
        } else {
          this.equipmentIndex.table.list = []
        }

        console.log('设备指标table', this.equipmentIndex.table.list)
        setTimeout(() => {
          this.equipmentIndex.table.listLoading = false
          this.getListWater()
        }, 100)
      })
    },
    // 水费 table
    getListWater() {
      this.water.table.listLoading = true
      GetDataByName(this.water.table.getdataListParm).then(response => {
        if (response.data.list !== null) {
          this.water.table.list = response.data.list
        } else {
          this.water.table.list = []
        }
        setTimeout(() => {
          this.water.table.listLoading = false
          this.getListElec()
        }, 100)
      })
    },
    // 电费 table
    getListElec() {
      this.elec.table.listLoading = true
      GetDataByName(this.elec.table.getdataListParm).then(response => {
        if (response.data.list !== null) {
          this.elec.table.list = response.data.list
        } else {
          this.elec.table.list = []
        }
        setTimeout(() => {
          this.getListRepair()
          this.elec.table.listLoading = false
        }, 100)
      })
    },
    // 维修费 table
    getListRepair() {
      this.repair.table.listLoading = true
      GetDataByName(this.repair.table.getdataListParm).then(response => {
        if (response.data.list !== null) {
          this.repair.table.list = response.data.list
        } else {
          this.repair.table.list = []
        }
        setTimeout(() => {
          this.getListGas()
          this.repair.table.listLoading = false
        }, 100)
      })
    },
    // 燃动费 table
    getListGas() {
      this.gas.table.listLoading = true
      GetDataByName(this.gas.table.getdataListParm).then(response => {
        if (response.data.list !== null) {
          this.gas.table.list = response.data.list
        } else {
          this.gas.table.list = []
        }
        setTimeout(() => {
          this.gas.table.listLoading = false
          this.getListWaterConsumption()
        }, 100)
      })
    },
    // 水量 table
    getListWaterConsumption() {
      this.waterConsumption.table.listLoading = true
      GetDataByName(this.waterConsumption.table.getdataListParm).then(response => {
        if (response.data.list !== null) {
          this.waterConsumption.table.list = response.data.list
        } else {
          this.waterConsumption.table.list = []
        }
        setTimeout(() => {
          this.getListElecConsumption()
          this.waterConsumption.table.listLoading = false
        }, 100)
      })
    },
    // 电量 table
    getListElecConsumption() {
      this.elecConsumption.table.listLoading = true
      GetDataByName(this.elecConsumption.table.getdataListParm).then(response => {
        if (response.data.list !== null) {
          this.elecConsumption.table.list = response.data.list
        } else {
          this.elecConsumption.table.list = []
        }
        setTimeout(() => {
          this.getListGasConsumption()
          this.elecConsumption.table.listLoading = false
        }, 100)
      })
    },
    // 柴油用量 table
    getListGasConsumption() {
      this.gasConsumption.table.listLoading = true
      GetDataByName(this.gasConsumption.table.getdataListParm).then(response => {
        if (response.data.list !== null) {
          this.gasConsumption.table.list = response.data.list
        } else {
          this.gasConsumption.table.list = []
        }
        setTimeout(() => {
          this.gasConsumption.table.listLoading = false
        }, 100)
      })
    },
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        return {
          textDecoration: 'underline'
        }
      }
      return {
        textDecoration: 'none'
      }
    },
    getListDialog() {
      this.dialog.listLoading = true
      GetDataByName(this.dialog.getdataListParm).then(response => {
        if (response.data.list == null) {
          this.dialog.list = response.data.list
          this.dialog.pageNum = 0
          this.dialog.pageSize = 0
          this.dialog.total = 0
        } else {
          this.dialog.list = response.data.list
          this.dialog.pageNum = response.data.pageNum
          this.dialog.pageSize = response.data.pageSize
          this.dialog.total = response.data.total
        }
        setTimeout(() => {
          this.dialog.listLoading = false
        }, 100)
      })
    },
    // 设备指标-点击
    clickEquipmentIndex(row) {
      this.textMap.equipmentIndex = row.deptName + this.equipmentIndex.table.getdataListParm.parammaps.month.substring(0, 4) + '年设备指标'
      this.dialogStatus = 'equipmentIndex'
      this.dialog.dialogFormVisible = true

      this.dialog.getdataListParm.name = 'geteqMonthBudgetListSBMCM'
      this.dialog.getdataListParm.parammaps.month = this.equipmentIndex.table.getdataListParm.parammaps.month
      this.dialog.getdataListParm.parammaps.pastureId = this.equipmentIndex.table.getdataListParm.parammaps.pastureId

      this.dialog.getdataListParm.parammaps.departmentId = row.departmentId
      this.getListDialog()
    },
    // 水费-点击
    clickWaterCost(row) {
      this.textMap.water = row.deptName + this.water.table.getdataListParm.parammaps.month.substring(0, 4) + '年水费'
      this.dialogStatus = 'water'
      this.dialog.dialogFormVisible = true

      this.dialog.getdataListParm.name = 'geteqMonthBudgetListWMMCM'
      this.dialog.getdataListParm.parammaps.month = this.water.table.getdataListParm.parammaps.month
      this.dialog.getdataListParm.parammaps.pastureId = this.water.table.getdataListParm.parammaps.pastureId

      this.dialog.getdataListParm.parammaps.departmentId = row.departmentId
      this.getListDialog()
    },
    // 电费-点击
    clickElecCost(row) {
      this.textMap.elec = row.deptName + this.elec.table.getdataListParm.parammaps.month.substring(0, 4) + '年电费'

      this.dialogStatus = 'elec'
      this.dialog.dialogFormVisible = true
      this.dialog.getdataListParm.name = 'geteqMonthBudgetListEMMCM'
      this.dialog.getdataListParm.parammaps.month = this.elec.table.getdataListParm.parammaps.month
      this.dialog.getdataListParm.parammaps.pastureId = this.elec.table.getdataListParm.parammaps.pastureId

      this.dialog.getdataListParm.parammaps.departmentId = row.departmentId
      this.getListDialog()
    },
    // 维修费-点击
    clickRepairCost(row) {
      this.textMap.repair = row.deptName + this.repair.table.getdataListParm.parammaps.month.substring(0, 4) + '年维修费'
      this.dialogStatus = 'repair'
      this.dialog.dialogFormVisible = true
      this.dialog.getdataListParm.name = 'geteqMonthBudgetListXMMCM'
      this.dialog.getdataListParm.parammaps.month = this.elec.table.getdataListParm.parammaps.month
      this.dialog.getdataListParm.parammaps.pastureId = this.elec.table.getdataListParm.parammaps.pastureId

      this.dialog.getdataListParm.parammaps.departmentId = row.departmentId

      this.getListDialog()
    },
    // 燃动费-点击
    clickGasCost(row) {
      this.textMap.gas = row.deptName + this.gas.table.getdataListParm.parammaps.month.substring(0, 4) + '年燃动费'
      this.dialogStatus = 'gas'
      this.dialog.dialogFormVisible = true
      this.dialog.getdataListParm.name = 'geteqMonthBudgetListRMMCM'
      this.dialog.getdataListParm.parammaps.month = this.gas.table.getdataListParm.parammaps.month
      this.dialog.getdataListParm.parammaps.pastureId = this.gas.table.getdataListParm.parammaps.pastureId

      this.dialog.getdataListParm.parammaps.departmentId = row.departmentId

      this.getListDialog()
    },
    // 水量-点击
    clickWaterConsumption(row) {
      this.textMap.waterConsumption = row.deptName + this.waterConsumption.table.getdataListParm.parammaps.month.substring(0, 4) + '年水量'
      this.dialogStatus = 'waterConsumption'
      this.dialog.dialogFormVisible = true
      this.dialog.getdataListParm.name = 'geteqMonthBudgetListWSMCM'
      this.dialog.getdataListParm.parammaps.month = this.waterConsumption.table.getdataListParm.parammaps.month
      this.dialog.getdataListParm.parammaps.pastureId = this.waterConsumption.table.getdataListParm.parammaps.pastureId

      this.dialog.getdataListParm.parammaps.departmentId = row.departmentId
      this.getListDialog()
    },
    // 电量-点击
    clickElecConsumption(row) {
      this.textMap.elecConsumption = row.deptName + this.elecConsumption.table.getdataListParm.parammaps.month.substring(0, 4) + '年电量'
      this.dialogStatus = 'elecConsumption'
      this.dialog.dialogFormVisible = true
      this.dialog.getdataListParm.name = 'geteqMonthBudgetListESMCM'
      this.dialog.getdataListParm.parammaps.month = this.elecConsumption.table.getdataListParm.parammaps.month
      this.dialog.getdataListParm.parammaps.pastureId = this.elecConsumption.table.getdataListParm.parammaps.pastureId

      this.dialog.getdataListParm.parammaps.departmentId = row.departmentId
      this.getListDialog()
    },
    // 柴油用量-点击
    clickGasConsumption(row) {
      this.textMap.gasConsumption = row.deptName + this.gasConsumption.table.getdataListParm.parammaps.month.substring(0, 4) + '年柴油用量'
      this.dialogStatus = 'gasConsumption'
      this.dialog.dialogFormVisible = true
      this.dialog.getdataListParm.name = 'geteqMonthBudgetListRSMCM'
      this.dialog.getdataListParm.parammaps.month = this.gasConsumption.table.getdataListParm.parammaps.month
      this.dialog.getdataListParm.parammaps.pastureId = this.gasConsumption.table.getdataListParm.parammaps.pastureId
      this.dialog.getdataListParm.parammaps.departmentId = row.departmentId
      this.getListDialog()
    },

    handleDownload() {
      this.$alert('正在导出中，请勿刷新或离开本页面，若导出时间过长，建议缩小导出数据范围重新导出', {})
      this.isPercentage = true
      this.percentage = 1
      var timer = setInterval(() => {
        this.percentage += 5
        if (this.percentage > 95) {
          this.percentage = 99
          clearInterval(timer)
        }
        this.percentage = this.percentage
      }, 1000)
      this.requestParam.name = 'DownloadMailReportMC'
      if (new Date().getFullYear() == parseTime(this.yearDate, '{y}')) {
        this.requestParam.date = parseTime(new Date(), '{y}-{m}-{d}')
        this.requestParam.mydate = parseTime(new Date(), '{y}')
      } else {
        this.requestParam.date = parseInt(parseTime(this.yearDate, '{y}')) + 1 + '-01-01'
        this.requestParam.mydate = parseTime(this.yearDate, '{y}')
      }
      this.requestParam.pastureName = this.pastureName
      this.requestParam.pastureId = this.pastureId
      const requestParam = this.requestParam
      const url = process.env.VUE_APP_BASE_API + 'authdata/downloadmailreport'// 请求下载文件的地址
      axios({
        method: 'post',
        url: url,
        data: requestParam,
        headers: { token: getToken(), optname: 'insertcustomdoc' },
        responseType: 'blob'
      }).then(res => {
        if (!res) return
        this.percentage = 99
        setTimeout(() => {
          this.isPercentage = false
        }, 2000)
        const blob = new Blob([res.data], {
          type: 'application/octet-stream;charset=utf-8'
        })
        const url = window.URL.createObjectURL(blob)
        const aLink = document.createElement('a')
        aLink.style.display = 'none'
        aLink.href = url
        const docname = requestParam.pastureName + requestParam.mydate + '.xlsx'
        aLink.setAttribute('download', docname) // 下载的文件
        document.body.appendChild(aLink)
        aLink.click()
        document.body.removeChild(aLink)
        window.URL.revokeObjectURL(url)
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
  }
  h3{
    background:#fff;line-height:50px;margin-bottom: 0;padding-left:10px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
