<template>
  <!-- 目标展板 -->
  <div class="app-container" style="overflow-y: scroll">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="" prop="reportYear">
        <el-date-picker
          v-model="queryParams.reportYear"
          type="year"
          format="yyyy"
          value-format="yyyy"
          placeholder="选择年"
          :clearable="false"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出模版</el-button
        >
        <el-upload
          class="upload-demo"
          style="display: inline; margin-left: 10px"
          :data="flelist"
          :action="url"
          :headers="headers"
          :on-success="handleImportSuccess"
          :before-upload="handleBeforeUpload"
          :show-file-list="false"
          :auto-upload="true"
        >
          <el-button type="primary" size="mini">导入</el-button>
        </el-upload>
      </el-col>
      <el-radio-group
        style="margin-left: 8px"
        size="mini"
        v-model="hasList"
        @change="getList"
      >
        <el-radio-button label="列表"></el-radio-button>
        <el-radio-button label="图表"></el-radio-button>
      </el-radio-group>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <template v-if="hasList == '列表'">
      <div class="table">
        <el-table ref="renewalTable" v-loading="loading" :data="dataList">
          <el-table-column
            label="单位"
            align="center"
            prop="companyName"
            width="150"
            fixed
          >
          </el-table-column>
          <el-table-column
            label="中压用户平均停电时长目标（小时）"
            align="center"
            prop="stopTimeAvg"
            :show-overflow-tooltip="true"
            width="100"
            fixed
          />
          <el-table-column
            label="等效总用户数"
            align="center"
            prop="userTotal"
            :show-overflow-tooltip="true"
            width="80"
            fixed
          />
          <el-table-column
            label="中压用户停电总时长目标（小时）"
            align="center"
            prop="stopTimeTotal"
            width="100"
            fixed
          />
          <el-table-column
            label="近三年占比"
            align="center"
            prop="threeYearRatio"
            fixed
          />
          <el-table-column
            label="中压用户预安排停电总时长目标（小时）"
            align="center"
            prop="planStopTimeTotal"
            width="100"
            fixed
          />
          <el-table-column
            label="中压用户预安排停电平均时长目标（小时）"
            align="center"
            prop="planStopTimeAvg"
            width="100"
            fixed
          />
          <el-table-column
            label="中压用户故障停电总时长目标（小时）"
            align="center"
            width="100"
            prop="errorStopTimeTotal"
            fixed
          />
          <el-table-column
            label="中压用户故障停电平均时长目标（小时）"
            align="center"
            prop="errorStopTimeAvg"
            width="100"
            fixed
          >
          </el-table-column>
          <el-table-column label="中压用户停电月度总时长目标" align="center">
            <el-table-column
              v-for="(ite, i) in 12"
              :key="i"
              :label="`${ite}月`"
              align="center"
              :prop="`stopTimeMonth${i < 10 ? '0' + (i + 1) : i + 1}`"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="中压用户预安排停电月度总时长目标"
            align="center"
          >
            <el-table-column
              v-for="(ite, i) in 12"
              :key="i"
              :label="`${ite}月`"
              align="center"
              :prop="`planStopTimeMonth${i < 10 ? '0' + (i + 1) : i + 1}`"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="中压用户故障停电月度总时长目标"
            align="center"
          >
            <el-table-column
              v-for="(ite, i) in 12"
              :key="i"
              :label="`${ite}月`"
              align="center"
              :prop="`errorStopTimeMonth${i < 10 ? '0' + (i + 1) : i + 1}`"
            >
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <!-- <el-divider></el-divider>
      <div class="table">
        <el-table ref="renewalTable" v-loading="loading" :data="dataList">
          <el-table-column
            label="月度占比"
            align="center"
            prop="companyName"
            width="150"
            fixed
          >
          </el-table-column>
          <el-table-column
            v-for="(ite, i) in 12"
            :key="i"
            :label="`${ite}月`"
            align="center"
            :prop="`stopTimeMonth${i < 10 ? '0' + (i + 1) : i + 1}`"
          >
          </el-table-column>
        </el-table>
      </div>
      <el-divider></el-divider>
      <div class="table">
        <el-table ref="renewalTable" v-loading="loading" :data="dataList">
          <el-table-column
            label="月度预安排占比"
            align="center"
            prop="companyName"
            width="150"
            fixed
          >
          </el-table-column>
          <el-table-column
            v-for="(ite, i) in 12"
            :key="i"
            :label="`${ite}月`"
            align="center"
            :prop="`planStopTimeMonth${i < 10 ? '0' + (i + 1) : i + 1}`"
          >
          </el-table-column>
        </el-table>
      </div>
      <el-divider></el-divider>
      <div class="table">
        <el-table ref="renewalTable" v-loading="loading" :data="dataList">
          <el-table-column
            label="月度故障占比"
            align="center"
            prop="companyName"
            width="150"
            fixed
          >
          </el-table-column>
          <el-table-column
            v-for="(ite, i) in 12"
            :key="i"
            :label="`${ite}月`"
            align="center"
            :prop="`errorStopTimeMonth${i < 10 ? '0' + (i + 1) : i + 1}`"
          >
          </el-table-column>
        </el-table>
      </div> -->
    </template>
    <el-row :gutter="10" v-show="hasList != '列表'" v-loading="loading">
      <el-col :span="24">
        <el-card header="" class="mb8">
          <TargetBar height="250px" ref="targetBarRef"></TargetBar>
        </el-card>
      </el-col>
      <!-- <el-col :span="6">
        <el-card header="中压用户停电月度总时长目标" class="mb8">
          <TargetLine
            height="250px"
            id="zyStopTimeMonth"
            ref="zyStopTargetLineRef"
          ></TargetLine>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card header="中压用户预安排停电月度总时长目标" class="mb8">
          <TargetLine
            height="250px"
            id="zyPlanStopTimeMonth"
            ref="zyPlanStopTimeMonthRef"
          ></TargetLine>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card header="中压用户故障停电月度总时长目标" class="mb8">
          <TargetLine
            height="250px"
            id="zyErrorStopTimeMonth"
            ref="zyErrorStopTimeMonthRef"
          ></TargetLine>
        </el-card>
      </el-col> -->
      <el-col :span="24">
        <el-card class="mb8">
          <TargetLine
            height="250px"
            id="stopTimeMonth"
            ref="stopTargetLineRef"
          ></TargetLine>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card class="mb8">
          <TargetLine
            height="250px"
            id="planStopTimeMonth"
            ref="planStopTargetLineRef"
          ></TargetLine>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <TargetLine
            height="250px"
            id="errorStopTimeMonth"
            ref="errorStopTargetLineRef"
          ></TargetLine>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  list,
  importF,
  downloadTemplate,
} from "@/api/powerdistribution/power-outage-control";
import TargetLine from "./components/TargetLine.vue";
import TargetBar from "./components/TargetBar.vue";
import { getToken } from "@/utils/auth";
export default {
  components: { TargetLine, TargetBar },
  data() {
    return {
      dataList: [],
      showSearch: true,
      // 遮罩层
      loading: true,
      total: 0,
      flelist: null,
      url: "",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        reportYear: `${new Date().getFullYear()}`,
      },
      hasList: "列表",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      list({
        ...this.queryParams,
      }).then((response) => {
        this.dataList = response.rows;
        this.loading = false;
        this.$refs.targetBarRef.initEcharts(response.rows, "xxx");
        this.$refs.stopTargetLineRef.initEcharts(response.rows, "月度占比");
        this.$refs.planStopTargetLineRef.initEcharts(
          response.rows,
          "月度预安排占比"
        );
        this.$refs.errorStopTargetLineRef.initEcharts(
          response.rows,
          "月度故障占比"
        );
        this.$refs.errorStopTargetLineRef.initEcharts(
          response.rows,
          "月度故障占比"
        );
        this.$refs.zyPlanStopTargetLineRef.initEcharts(response.rows);
        this.$refs.zyStopTargetLineRef.initEcharts(response.rows);
        this.$refs.zyErrorStopTargetLineRef.initEcharts(response.rows);
      });
    },
    //导入
    handleImportSuccess(res) {
      console.log(res, "res");
    },
    //导入前
    async handleBeforeUpload(val) {
      let data = new FormData();
      data.append("file", val);
      data.append("reportYear", this.queryParams.reportYear);
      let res = await importF(data);
      if (res.code == 200) {
        this.$message.success("导入成功");
      } else {
        this.$message.error("导入失败" || res.msg);
      }
    },
    async handleExport() {
      const res = await downloadTemplate();
      if (res) {
        const elink = document.createElement("a");
        elink.download = `停电预设模版.xlsx`;
        elink.style.display = "none";
        const blob = new Blob([res], { type: "application/x-msdownload" });
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
      } else {
        this.$message.error("导出异常请联系管理员");
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.pageNum = 1;
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>
<style lang="scss" scoped>
.table {
  // height: calc(100% - 150px);
}
::v-deep {
  .el-table {
    height: 100%;
    width: 100%;
    .el-table__body-wrapper {
      width: 100% !important;
      height: calc(100% - 50px) !important; // 表格高度减去表头的高度
      overflow-y: scroll;
    }
  }
}
.mt15 {
  margin-top: 20px;
}
</style>
