<template>
  <div class="w-full h-full">
    <el-row :gutter="10" v-loading="loading">
      <el-col :span="row1ColNum[0]">
        <el-card class="mb8 relative">
          <TargetBar height="350px" ref="targetBarRef"></TargetBar>
          <el-tooltip class="item" effect="dark" content="放大" placement="top">
            <i
              v-show="row1ColNum[0] == 6"
              class="el-icon-zoom-in abs"
              @click="handleEnlarge(0)"
            ></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="缩小" placement="top">
            <i
              v-show="row1ColNum[0] == 24"
              class="el-icon-zoom-out abs2"
              @click="handleNarrow()"
            ></i>
          </el-tooltip>
        </el-card>
      </el-col>
      <el-col :span="row1ColNum[1]">
        <el-card class="mb8 relative">
          <TargetLine
            height="350px"
            id="stopTimeMonth"
            ref="stopTargetLineRef"
          ></TargetLine>
          <el-tooltip class="item" effect="dark" content="放大" placement="top">
            <i
              v-show="row1ColNum[1] == 6"
              class="el-icon-zoom-in abs"
              @click="handleEnlarge(1)"
            ></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="缩小" placement="top">
            <i
              v-show="row1ColNum[1] == 24"
              class="el-icon-zoom-out abs2"
              @click="handleNarrow()"
            ></i>
          </el-tooltip>
        </el-card>
      </el-col>
      <el-col :span="row1ColNum[2]">
        <el-card class="mb8 relative">
          <TargetLine
            height="350px"
            id="planStopTimeMonth"
            ref="planStopTargetLineRef"
          ></TargetLine>
          <el-tooltip class="item" effect="dark" content="放大" placement="top">
            <i
              v-show="row1ColNum[2] == 6"
              class="el-icon-zoom-in abs"
              @click="handleEnlarge(2)"
            ></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="缩小" placement="top">
            <i
              v-show="row1ColNum[2] == 24"
              class="el-icon-zoom-out abs2"
              @click="handleNarrow()"
            ></i>
          </el-tooltip>
        </el-card>
      </el-col>
      <el-col :span="row1ColNum[3]">
        <el-card class="mb8 relative">
          <TargetLine
            height="350px"
            id="errorStopTimeMonth"
            ref="errorStopTargetLineRef"
          ></TargetLine>
          <el-tooltip class="item" effect="dark" content="放大" placement="top">
            <i
              v-show="row1ColNum[3] == 6"
              class="el-icon-zoom-in abs"
              @click="handleEnlarge(3)"
            ></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="缩小" placement="top">
            <i
              v-show="row1ColNum[3] == 24"
              class="el-icon-zoom-out abs2"
              @click="handleNarrow()"
            ></i>
          </el-tooltip>
        </el-card>
      </el-col>
      <!-- <el-col :span="row2ColNum[0]">
        <el-card class="mb8 relative">
          <TargetLine
            height="350px"
            id="stopTimeMonthPer"
            ref="stopTargetLinePerRef"
          ></TargetLine>
          <el-tooltip class="item" effect="dark" content="放大" placement="top">
            <i
              v-show="row2ColNum[0] == 8"
              class="el-icon-zoom-in abs"
              @click="handleEnlarge(0, 1)"
            ></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="缩小" placement="top">
            <i
              v-show="row2ColNum[0] == 24"
              class="el-icon-zoom-out abs2"
              @click="handleNarrow(1)"
            ></i>
          </el-tooltip>
        </el-card>
      </el-col>
      <el-col :span="row2ColNum[1]">
        <el-card class="mb8 relative">
          <TargetLine
            height="350px"
            id="planStopTimeMonthPer"
            ref="planStopTargetLinePerRef"
          ></TargetLine>
          <el-tooltip class="item" effect="dark" content="放大" placement="top">
            <i
              v-show="row2ColNum[1] == 8"
              class="el-icon-zoom-in abs"
              @click="handleEnlarge(1, 1)"
            ></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="缩小" placement="top">
            <i
              v-show="row2ColNum[1] == 24"
              class="el-icon-zoom-out abs2"
              @click="handleNarrow(1)"
            ></i>
          </el-tooltip>
        </el-card>
      </el-col>
      <el-col :span="row2ColNum[2]">
        <el-card class="mb8 relative">
          <TargetLine
            height="350px"
            id="errorStopTimeMonthPer"
            ref="errorStopTargetLinePerRef"
          ></TargetLine>
          <el-tooltip class="item" effect="dark" content="放大" placement="top">
            <i
              v-show="row2ColNum[2] == 8"
              class="el-icon-zoom-in abs"
              @click="handleEnlarge(2, 1)"
            ></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="缩小" placement="top">
            <i
              v-show="row2ColNum[2] == 24"
              class="el-icon-zoom-out abs2"
              @click="handleNarrow(1)"
            ></i>
          </el-tooltip>
        </el-card>
      </el-col> -->
    </el-row>
  </div>
</template>

<script>
import TargetLine from "./TargetLine.vue";
import TargetBar from "./TargetBar.vue";
export default {
  components: {
    TargetLine,
    TargetBar,
  },
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
    dataList1: {
      type: Array,
      default: () => [],
    },
    dataList2: {
      type: Array,
      default: () => [],
    },
    dataList3: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      row1ColNum: [6, 6, 6, 6],
      row2ColNum: [8, 8, 8],
    };
  },
  watch: {
    dataList: {
      handler(val) {
        this.$nextTick(() => {
          this.initChart1();
        });
      },
      deep: true,
      immediate: true,
    },
    dataList1: {
      handler(val) {
        this.$nextTick(() => {
          this.initChart2();
        });
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 放大 type ==1 放大第二行
    handleEnlarge(i, type) {
      if (type == 1) {
        this.row2ColNum = this.row2ColNum.map(() => 0);
        this.row2ColNum[i] = 24;
        this.initChart2();
      } else {
        this.row1ColNum = this.row1ColNum.map(() => 0);
        this.row1ColNum[i] = 24;
        this.initChart1();
      }
    },
    // 缩小 type ==1 缩小第二行
    handleNarrow(type) {
      if (type == 1) {
        this.row2ColNum = this.row2ColNum.map(() => 8);
        this.initChart2();
      } else {
        this.row1ColNum = this.row1ColNum.map(() => 6);
        this.initChart1();
      }
    },
    initChart1() {
      this.$refs.targetBarRef.initEcharts(this.dataList, "xxx");
      this.$refs.stopTargetLineRef.initEcharts(
        this.dataList,
        "中压用户停电月度总时长目标"
      );
      this.$refs.planStopTargetLineRef.initEcharts(
        this.dataList,
        "中压用户预安排停电月度总时长目标"
      );
      this.$refs.errorStopTargetLineRef.initEcharts(
        this.dataList,
        "中压用户故障停电月度总时长目标"
      );
    },
    initChart2() {
      // this.$refs.stopTargetLinePerRef.initEcharts(this.dataList1, "月度占比");
      // this.$refs.planStopTargetLinePerRef.initEcharts(
      //   this.dataList2,
      //   "月度预安排占比"
      // );
      // this.$refs.errorStopTargetLinePerRef.initEcharts(
      //   this.dataList3,
      //   "月度故障占比"
      // );
    },
  },
};
</script>

<style lang="scss" scoped>
.relative {
  position: relative;
}
.abs {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
.abs2 {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
</style>
