  <template>
  <div class="dap">
    <indexHD ref="indexHDRef" ></indexHD>
    <indexDanger ref="indexDangerRef"></indexDanger>
    <div class="row">
      <div class="left_top bcg">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="行政区域统计" name="tj1">
            <el-table
              :data="tableData"
              size="mini"
              header-align="center"
              align="center"
              height="400px"
            >
              <el-table-column prop="name" label="各区(县)" align="center">
                <template slot-scope="scope">
                  <el-link type="primary" @click="showHD(scope.row)">{{scope.row.name}}</el-link>
                </template>
              </el-table-column>

              <el-table-column label="注册企业数" align="center">
                <el-table-column
                  prop="thisUnitNum"
                  label="当月"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="totalUnitNum"
                  label="累计"
                  align="center"
                >
                </el-table-column>
              </el-table-column>
              <el-table-column label="上报隐患数量" align="center">
                <el-table-column
                  prop="thisReportNum"
                  label="当月"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="totalReportNum"
                  label="累计"
                  align="center"
                >
                </el-table-column>
              </el-table-column>
              <el-table-column label="已整改数量" align="center">
                <el-table-column prop="thisHaveNum" label="当月" align="center">
                </el-table-column>
                <el-table-column
                  prop="totalHaveNum"
                  label="累计"
                  align="center"
                >
                </el-table-column>
              </el-table-column>
              <el-table-column label="未整改数量" align="center">
                <el-table-column prop="thisNotNum" label="当月" align="center">
                </el-table-column>
                <el-table-column prop="totalNotNum" label="累计" align="center">
                </el-table-column>
              </el-table-column>
              <el-table-column label="整改率" align="center">
                <el-table-column prop="thisRate" label="当月" align="center">
                </el-table-column>
                <el-table-column prop="totalRate" label="累计" align="center">
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="所处位置统计" name="tj2">
            <el-table
              :data="tableDat_1"
              size="mini"
              header-align="center"
              align="center"
              height="400px"
            >
              <el-table-column prop="name" label="各企业" align="center">
                <!-- <template slot="date" slot-scope="scope">
                {{scope}}
              </template> -->
              </el-table-column>
              <el-table-column label="上报隐患数量" align="center">
                <el-table-column
                  prop="thisReportNum"
                  label="当月"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="totalReportNum"
                  label="累计"
                  align="center"
                >
                </el-table-column>
              </el-table-column>
              <el-table-column label="已整改数量" align="center">
                <el-table-column prop="thisHaveNum" label="当月" align="center">
                </el-table-column>
                <el-table-column
                  prop="totalHaveNum"
                  label="累计"
                  align="center"
                >
                </el-table-column>
              </el-table-column>
              <el-table-column label="未整改数量" align="center">
                <el-table-column prop="thisNotNum" label="当月" align="center">
                </el-table-column>
                <el-table-column prop="totalNotNum" label="累计" align="center">
                </el-table-column>
              </el-table-column>
              <el-table-column label="整改率" align="center">
                <el-table-column prop="thisRate" label="当月" align="center">
                </el-table-column>
                <el-table-column prop="totalRate" label="累计" align="center">
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- <div class="right_top bcg" :style="$store.state.app.sidebar.opened ? 'width: 24%;': 'width: 32%;' "> -->
      <div class="right_top bcg">
        <h3>本月上报隐患排名</h3>
        <el-table
          ref="right_top"
          class="custom-table"
          highlight-current-row
          :data="tableData1"
          border
          height="396"
        >
          <el-table-column prop="index" type="index" label="排名"> </el-table-column>
          <el-table-column prop="areaName" label="区域"> </el-table-column>
          <el-table-column prop="reportHiddenNum" label="隐患数量"> </el-table-column>

        </el-table>
      </div>
    </div>

    <div class="row">
      <div class="left_center bcg">
        <!-- <el-date-picker
        style="position: absolute; right: 100px; top: 30px; z-index: 999"
        v-model="year"
        type="year"
        placeholder="选择年"
        size="mini"
      >
      </el-date-picker> -->
        <div ref="left_center" class="tu"></div>
      </div>
      <div class="right_bom bcg">
        <div ref="right_bom" class="size"></div>
      </div>
    </div>

    <div class="row">
      <div class="hyly bcg">
        <div ref="hyly" class="size"></div>
      </div>
      <div class="jjClass bcg">
        <div ref="jjClass" class="size"></div>
      </div>
      <div class="scale bcg">
        <div ref="scale" class="size"></div>
      </div>
    </div>

  </div>

</template>

<script>
import * as echarts from "echarts";

import {
  getAdministeration,
  getPlace,
  getDanger,
  getDangerByDeptId,
  getTrade,
  getEconomics,
  getScale,
  getDangerStatus,
  getDangerList,
} from "@/api/ehs/ehsExamples";
import indexHD from "./indexHD";
import indexDanger from "./indexDanger"
export default {
  name: "dap",
  components: { indexHD, indexDanger},
  data() {
    return {
      activeName: "tj1", //tab默认显示
      tableData: [], //table
      tableDat_1: null,
      tableData1: [],
      myChart1: null,
      myChart2: null,
      myChart3: null,
      myChart4: null,
      myChart5: null,
      year: "2023", //柱状图默认年份 参数
    };
  },
  methods: {
    showHD(row) {
      console.log(row);
      this.$refs.indexHDRef.openDialog(row.deptId);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    async leftCenterinit() {
      this.year = new Date().getFullYear();
      let res = await getDangerList(this.year);
      let temp = res.data;
      let legendData = [];
      let dataSeries = [];
      let colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']

      temp.map((item, index) => {
        legendData.push(item.name);
        dataSeries.push({
          name: item.name,
          type: "bar",
          stack: "Ad",
          itemStyle: {
            color: colors[index % colors.length],
            borderRadius: [5, 5, 2, 2],
          },
          // emphasis: {
          //   focus: "series",
          // },
          data: item.data,
        },
        );
      });


      this.myChart1 = echarts.init(this.$refs.left_center);
      let option = {
        // color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'], // 设置整体颜色主题/
        title: {
          text: "年度隐患数据统计分析",
          left: "left",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          // top: "20px",
          // left: "100px",
          type: "plain",
          // data: ["重大隐患", "一般隐患"], // 设置图例文字内容
          data: legendData,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: dataSeries,
      };
      option && this.myChart1.setOption(option);
      // myChart.resize();
    },
    async rightBominit() {
      let res = await getDangerStatus();
      this.myChart2 = echarts.init(this.$refs.right_bom);
      let option = {
        title: { text: "隐患整改进度统计" },
        tooltip: {
          trigger: "item",
        },
        legend: {
          // top: "5%",
          bottom: "5%",
          right: "right",
        },
        series: [
          {
            name: "隐患数量",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 6,
              borderColor: "#fff",
              borderWidth: 2,
            },
            // label: {
            //   show: false,
            //   position: "center",
            // },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: 40,
            //     fontWeight: "bold",
            //   },
            // },
            labelLine: {
              show: false,
            },
            data: res.data,
          },
        ],
      };

      option && this.myChart2.setOption(option);
      //  myChart.resize();
      this.myChart2.on('click', (params) => {
        const a = res.data.find((e) => {
          return params.name == e.name;
        })
        this.$refs.indexDangerRef.openDialog1(a.status);
      });
    },
    async hylyinit() {
      let res = await getTrade();
      this.myChart3 = echarts.init(this.$refs.hyly);
      let option = {
        title: { text: "行业领域统计隐患数量" },
        tooltip: {
          trigger: "item",
        },
        legend: {
          // top: "5%",
          bottom: "5%",
          right: "right",
        },
        series: [
          {
            name: "行业统计隐患数量",
            type: "pie",
            radius: "50%",
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 6,
              borderColor: "#fff",
              borderWidth: 2,
            },
            // label: {
            //   show: false,
            //   position: "center",
            // },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: 40,
            //     fontWeight: "bold",
            //   },
            // },
            labelLine: {
              show: false,
            },
            data: res.data,
          },
        ],
      };
      option && this.myChart3.setOption(option);
      // myChart.resize();
      this.myChart3.on('click', (params) => {
        const a = res.data.find((e)=>{
          return   params.name == e.name;
        })
        this.$refs.indexDangerRef.openDialog4(a.enterpriseType);
      });
    },
    async jjClassInit() {
      let res = await getEconomics();
      this.myChart4 = echarts.init(this.$refs.jjClass);
      let option = {
        title: { text: "经济类型统计隐患数量" },
        tooltip: {
          trigger: "item",
        },
        legend: {
          // top: "5%",
          bottom: "5%",
          right: "right",
        },
        series: [
          {
            name: "经济类型隐患统计",
            type: "pie",
            radius: "50%",
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 6,
              borderColor: "#fff",
              borderWidth: 2,
            },
            // label: {
            //   show: false,
            //   position: "center",
            // },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: 40,
            //     fontWeight: "bold",
            //   },
            // },
            labelLine: {
              show: false,
            },
            data: res.data,
          },
        ],
      };
      option && this.myChart4.setOption(option);
      // myChart.resize();
      this.myChart4.on('click', (params) => {
        const a = res.data.find((e) => {
          return params.name == e.name;
        });
        this.$refs.indexDangerRef.openDialog3(a.economicType);
      });
    },
    async scaleInit() {
      let res = await getScale();
      this.myChart5 = echarts.init(this.$refs.scale);
      let option = {
        title: { text: "企业规模统计隐患数量" },
        tooltip: {
          trigger: "item",
        },
        legend: {
          // top: "5%",
          bottom: "5%",
          right: "right",
        },
        series: [
          {
            name: "企业规模隐患统计",
            type: "pie",
            radius: "50%",
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 6,
              borderColor: "#fff",
              borderWidth: 2,
            },
            // label: {
            //   show: false,
            //   position: "center",
            // },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: 40,
            //     fontWeight: "bold",
            //   },
            // },
            labelLine: {
              show: false,
            },
            data: res.data,
          },
        ],
      };
      option && this.myChart5.setOption(option);
      // window.onresize = function() {
      //  this.myChart5.resize();
      // };
      this.myChart5.on('click', (params) => {
        const a = res.data.find((e) => {
          return params.name == e.name;
        });
        this.$refs.indexDangerRef.openDialog2(a.enterpriseScale);
      });
    },

  },
  created() {
    // 行政
    getAdministeration()
      .then((response) => {
        if (response.code == 200) this.tableData = response.data;
      })
      .catch((err) => {
        console.log(err);
      });

    // 根据位置
    getPlace()
      .then((response) => {
        if (response.code == 200) this.tableDat_1 = response.data;
      })
      .catch((err) => {
        console.log(err);
      });

    // 上报隐患
    getDangerByDeptId()
      .then((response) => {
        if (response.code == 200) {
          response.data.map((item,index)=>{
            item.index = index+1
          })
          this.tableData1 = response.data;
         }
    })
      .catch((err) => {
        console.error(err);
      });

  },
  mounted() {
    // this.autoScroll();自动滚动
    this.leftCenterinit(); //隐患数据
    this.rightBominit(); //隐患整改进度
    this.hylyinit(); // 行业领域
    this.jjClassInit(); // 经济类型
    this.scaleInit(); // 企业规模
  },
  watch: {
    "$store.state.app.sidebar.opened"(value) {
      console.log(value);
      setTimeout(() => {
        this.myChart1 && this.myChart1.resize();
        this.myChart2 && this.myChart2.resize();
        this.myChart3 && this.myChart3.resize();
        this.myChart4 && this.myChart4.resize();
        // this.myChart5 && this.myChart5.dispose();
        this.myChart5 && this.myChart5.resize();
      }, 100);
    },
  },
  computed: {},
};
</script>

<style lang="css" scoped>
.dap {
  padding: 12px;
  background-color: #f1f1f1;
}
.row {
  display: flex;
}
.bcg {
  padding: 15px 15px 15px 15px;
  background-color: #fff;
  margin: 8px;
}

.left_top {
  min-width: 71%;
}
.right_top {
  /* width: 470px; */
  min-width: 25%;
}
.left_center {
  position: relative;
  flex: 2;
}
.right_bom {
  flex: 1;
}
.left_center .tu {
  width: 100%;
  height: 350px;
}

.size {
  min-width: 100%;
  height: 300px;
}
.hyly {
  flex: 1;
}
.jjClass {
  flex: 1;
}
.scale {
  flex: 1;
}
</style>
