<template>
  <div class="gas-container">
    <div class="header">
      <el-date-picker
        v-model="select_date"
        type="date"
        placeholder="选择日期"
        value-format="yyyy-MM-dd"
        @change="handleTimeChange"
        :clearable="false"
      />
    </div>
    <el-table
      :data="tableData"
      row-key="EicCode"
      :tree-props="{ children: 'Children', hasChildren: 'hasChildren' }"
      :expand-row-keys="expandKeys"
      height="75vh"
      border
      lazy
      :load="handleLoad"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      empty-text="没有此日期的数据，请重新选择日期"
    >
      <el-table-column
        v-for="item in tableColums"
        :key="item.prop"
        :label="item.label"
        :width="item.widthsty"
        :min-width="item.minwidthsty"
        :align="item.prop !== 'Name' ? 'center' : 'left'"
        :fixed="item.fixed"
      >
        <template #header>
          <span>{{ item.label }}</span
          ><br />
          <span class="deletesty" v-if="item.unit">{{ item.unit }}</span>
        </template>
        <template slot-scope="scope">
          <span
            v-for="key in listJudge"
            :key="key.val"
            v-if="item.prop === key.prop"
          >
            {{
              scope.row.Injection == "0" && scope.row.Status === "N"
                ? "--"
                : scope.row[key.val]
            }}</span
          >
          <span
            v-if="item.prop === 'action'"
            class="editsty"
            @click="lookHistory(scope.row)"
            >历史数据</span
          >
          <span
            v-else-if="item.prop === 'Status'"
            :class="[
              scope.row.Status === 'E'
                ? 'warnsty'
                : scope.row.Status === 'C'
                ? 'successty'
                : 'disty',
            ]"
            >{{ statusMap.get(scope.row.Status) }}
          </span>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { dataInterence } from "@/api/api.js";
export default {
  name: "",
  data() {
    return {
      select_date: "",
      tableData: [],
      expandKeys: [],
      tableColums: [
        {
          label: "",
          prop: "Name",
          minwidthsty: "110px",
          widthsty: "200px",
          fixed: true,
        },
        { label: "指标ID", prop: "GasInStorageCode", fixed: false },
        {
          label: "天然气存量",
          prop: "gasInStorage",
          unit: "TWh",
          widthsty: "100px",
          fixed: false,
        },
        { label: "指标ID", prop: "FullCode", fixed: false },
        {
          label: "储存容量百分比",
          prop: "full",
          unit: "%",
          widthsty: "120px",
          fixed: false,
        },
        { label: "指标ID", prop: "TrendCode", fixed: false },
        {
          label: "较前日对比",
          prop: "trend",
          unit: "%",
          widthsty: "110px",
          fixed: false,
        },
        { label: "指标ID", prop: "InjectionCode", fixed: false },
        {
          label: "注入量",
          prop: "injection",
          unit: "GWh/d",
          widthsty: "80px",
          fixed: false,
        },
        { label: "指标ID", prop: "WithdrawalCode", fixed: false },
        {
          label: "减少量",
          prop: "withdrawal",
          unit: "GWh/d",
          widthsty: "80px",
          fixed: false,
        },
        { label: "指标ID", prop: "WorkingGasVolumeCode", fixed: false },
        {
          label: "最大存量",
          prop: "workingGasVolume",
          unit: "TWh",
          widthsty: "100px",
          fixed: false,
        },
        { label: "指标ID", prop: "InjectionCapacityCode", fixed: false },
        {
          label: "注入速度",
          prop: "injectionCapacity",
          unit: "GWh/d",
          widthsty: "100px",
          fixed: false,
        },
        { label: "指标ID", prop: "WithdrawalCapacityCode", fixed: false },
        {
          label: "取出速度",
          prop: "withdrawalCapacity",
          unit: "GWh/d",
          widthsty: "100px",
          fixed: false,
        },
        { label: "数据状态", prop: "Status", widthsty: "100px", fixed: false },
        { label: "操作", prop: "action", widthsty: "120px", fixed: false },
      ], //列配置
      statusMap: new Map([
        ["E", "估计"],
        ["C", "已确认"],
        ["N", "无数据"],
      ]), //E(估计)C(已确认)N(无数据)
      listJudge: [
        { prop: "injection", val: "Injection" },
        { prop: "gasInStorage", val: "GasInStorage" },
        { prop: "full", val: "Full" },
        { prop: "trend", val: "Trend" },
        { prop: "withdrawal", val: "Withdrawal" },
        { prop: "workingGasVolume", val: "WorkingGasVolume" },
        { prop: "injectionCapacity", val: "InjectionCapacity" },
        { prop: "withdrawalCapacity", val: "WithdrawalCapacity" },
      ],
      loading: false,
    };
  },
  methods: {
    handleTimeChange() {
      this.getGasEicContinent();
    },

    async getTime() {
      const res = await dataInterence.getGasLasteTimeV2();
      if (res.Ret == 200) {
        this.select_date = res.Data;
        this.getGasEicContinent();
      }
    },

    async getGasEicContinent() {
      this.loading = true;
      const res = await dataInterence.getGasEicContinentV2({
        Date: this.select_date,
      });
      if (res.Ret == 200 && res.Data) {
        this.tableData = res.Data.map((item) => {
          let temarr = item.Children.map((element) => {
            return {
              ...element,
              hasChildren: true,
              level: 2,
              pathArr: [
                {
                  name: item.Name,
                  shortName: item.ShortName,
                  EicCode: item.EicCode,
                },
                {
                  name: element.Name,
                  shortName: element.ShortName,
                  EicCode: element.EicCode,
                },
              ],
            };
          });

          return {
            ...item,
            Children: temarr,
            level: 1,
            pathArr: [
              {
                name: item.Name,
                shortName: item.ShortName,
                EicCode: item.EicCode,
              },
            ],
          };
        });
        this.findLevelOne();
      } else {
        this.tableData = [];
        this.loading = false;
      }
    },

    lookHistory(item) {
      sessionStorage.setItem("gasHistoryHead", JSON.stringify(item.pathArr));
      this.$router.push({
        path: "/gasHistory",
        query: {
          EicCode: item.EicCode,
        },
      });
    },

    /* 默认展开国家上一级 */
    findLevelOne() {
      this.expandKeys = this.tableData.map((item) => {
        if (item.Type === "continent") return item.EicCode;
      });
      this.loading = false;
    },

    // 懒加载下一级
    async handleLoad(row, treeNode, resolve) {
      if (row.level == 3) {
        resolve(row.Children);
      } else {
        console.info(this.select_date);
        console.info(row.Name);
        const res = await dataInterence.getGasDataV2({
          Date: this.select_date,
          Name: row.Name,
        });
        if (res.Ret == 200) {
          let arr = [];
          console.info("175");
          arr =
            res.Data &&
            res.Data.map((item) => {
              let temarr = item.Children.map((element) => {
                return {
                  ...element,
                  pathArr: [
                    ...row.pathArr,
                    {
                      name: item.Name,
                      shortName: item.ShortName,
                      EicCode: item.EicCode,
                    },
                    {
                      name: element.Name,
                      shortName: element.ShortName,
                      EicCode: element.EicCode,
                    },
                  ],
                };
              });
              return {
                ...item,
                Children: temarr,
                hasChildren: true,
                level: 3,
                pathArr: [
                  ...row.pathArr,
                  {
                    name: item.Name,
                    shortName: item.ShortName,
                    EicCode: item.EicCode,
                  },
                ],
              };
            });
          resolve(arr);
        }
      }
    },
  },

  created() {
    this.getTime();
  },
};
</script>
<style lang="scss">
.gas-container {
  * {
    box-sizing: border-box;
  }
  background-color: #fff;
  box-sizing: border-box;
  padding: 20px;
  // min-height: calc(100vh - 120px);
  .header {
    margin-bottom: 20px;
  }
  // .el-table .el-table__expand-icon .el-icon-arrow-right:before {
  //   content: "\e7a0";
  //   font-size: 16px;
  //   color: #000;
  // }
  .el-table__expand-icon————expanded {
    transform: rotate(0);
  }
  .el-table .el-table__expand-icon————expanded .el-icon-arrow-right:before {
    content: "\e7a2";
  }
  .zk-table {
    font-size: 14px;
    color: #444;
  }
  .el-table [class*="el-table__row————level"] .el-table__expand-icon {
    margin-top: 3px;
  }
  .el-table .el-table__row .is-left .cell {
    display: flex;
  }
}
</style>
