<template>
  <!-- 目标展板 -->
  <div class="app-container scroll-auto">
    <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-button
          type="primary"
          icon="el-icon-upload2"
          plain
          size="mini"
          @click="handleImport"
          >导入</el-button
        >
      </el-col> -->
      <el-radio-group
        style="margin-left: 8px"
        size="mini"
        v-model="currentType"
        @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="currentType == '列表'">
      <TableCmponent
        :dataList="dataList"
        :dataList1="dataList1"
        :dataList2="dataList2"
        :dataList3="dataList3"
        :loading="loading"
      ></TableCmponent>
    </template>
    <template v-if="currentType != '列表'">
      <EchartsComponent
        :dataList="dataList"
        :dataList1="dataList1"
        :dataList2="dataList2"
        :dataList3="dataList3"
        :loading="loading"
      ></EchartsComponent>
    </template>
    <ImportModel ref="importModelRef" @refresh="getList"></ImportModel>
  </div>
</template>

<script>
import {
  list,
  downloadTemplate,
} from "@/api/powerdistribution/power-outage-control";
import ImportModel from "./components/ImportModel.vue";
import TableCmponent from "./components/TableCmponent.vue";
import EchartsComponent from "./components/EchartsComponent.vue";
export default {
  components: {
    ImportModel,
    TableCmponent,
    EchartsComponent,
  },
  data() {
    return {
      dataList: [],
      dataList1: [],
      dataList2: [],
      dataList3: [],
      showSearch: true,
      // 遮罩层
      loading: true,
      total: 0,
      queryParams: {
        reportYear: `${new Date().getFullYear()}`,
      },
      currentType: "列表",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      list({
        ...this.queryParams,
      }).then((response) => {
        this.dataList = response.rows;
        this.initDurationPercentage();
        this.loading = false;
      });
    },
    // 生成占比
    initDurationPercentage() {
      this.dataList1 = [];
      this.dataList2 = [];
      this.dataList3 = [];
      this.dataList.forEach((ite) => {
        let keys = ["stopTimeMonth", "planStopTimeMonth", "errorStopTimeMonth"];
        keys.forEach((k, ki) => {
          let totle = Array(12)
            .fill(0)
            .reduce((t, c, i) => {
              return t + ite[`${k}${i + 1 < 10 ? "0" + (i + 1) : i + 1}`];
            }, 0);
          let obj = {
            companyName: ite.companyName,
          };
          Array(12)
            .fill(0)
            .forEach((_it, i) => {
              obj[`${k}Per${i + 1 < 10 ? "0" + (i + 1) : i + 1}`] = (
                ite[`${k}${i + 1 < 10 ? "0" + (i + 1) : i + 1}`] / totle
              ).toFixed(9);
            });
          this[`dataList${ki + 1}`].push(obj);
        });
      });
    },
    handleImport() {
      this.$refs.importModelRef.openModel();
    },
    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.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      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>
