<template>

  <el-card
    shadow="never"
    class="aui-card--fill"
  >
    <!-- 查询区域 -->
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getCheck()"
    >
      <el-form-item prop="dateVal">
        <el-date-picker
          class="date-val"
          v-model="dataForm.dateVal"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          value-format="yyyy-MM-dd"
        >

        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="getCheck()">{{ $t('query') }}</el-button>
      </el-form-item>
    </el-form>

    <!-- 顶部柱状图 -->
    <!-- <div class="top">
      <div class="titleline">
        <div class="left">
          <img
            src="../../../assets/img/logo_tj.png"
            alt=""
            style="width:20px;height:20px"
          >
          评价统计
        </div>
      </div>
      <Echarts
        :options="optionsAll"
        height="450px"
        width="100%"
        ref="chart"
      />
    </div> -->
    <!-- 顶部两个饼图区域 -->
    <div class="bottom1">
      <div style="flex:1;transform: translate3d(0, -10%, 0);height:400px">
        <div class="left">
          <img
            src="../../../assets/img/logo_tj.png"
            style="width:20px;height:20px"
          >
          评价统计
        </div>
        <Echarts
          :options="optionsAll"
          height="400px"
          width="100%"
          ref="chart"
        />
      </div>

      <div style="flex:1;transform: translate3d(0, -10%, 0);height:400px">
        <div class="right">
          <img
            src="../../../assets/img/logo_tj.png"
            style="width:20px;height:20px"
          >
          评价人员好差评统计
        </div>
        <Echarts
          :options="optionsDaibiao"
          height="400px"
          width="100%"
          ref="chartDaibiao"
        />
      </div>
    </div>
    <!-- 底部遍历出来的饼图区域 -->
    <!-- <input
      type="text"
      :value="options[0]"
    > -->
    <div class="bottom">
      <div
        class="item-pie"
        v-for="(item,index) in listTop"
        :key="item.id"
      >
        <!-- 遍历饼图 -->
        <div
          v-if="flag2"
          :id="forId(index)"
          style="height:300px;width:100%;"
          :ref="'chart'+index"
        ></div>
        <!-- <Echarts
          :options="options[index]"
          height="300px"
          width="100%"
          :ref="'chart'+index"
        /> -->
      </div>

    </div>

  </el-card>
</template>

<script>
import Echarts from "../../../components/echarts.vue";
import * as echarts from "echarts";
import { isSpecial } from "@/utils/validate";
export default {
  name: "fhjwcommentstatistical",
  components: { Echarts },
  data() {
    return {
      dataForm: {
        dateVal: "",
      },
      chartList: [], //
      getId: [], //用来生成echarts
      getIDBack: [],
      chartList_values: [], //取其值
      optionsAll: {},
      optionsDepart: {},
      optionsDaibiao: {},
      options: [],
      data: [],
      flag2: false,
      flag: false,
      flag3: true,
      listTop: [
        {
          id: 9,
          title: "院领导",
          goodnum: 0,
          middlenum: 0,
          bandnum: 0,
          good: "",
          middle: "",
          bad: "",
          totle: 0,
        },
        {
          id: 1,
          title: "第一检察部",
          goodnum: 0,
          middlenum: 0,
          bandnum: 0,
          good: "",
          middle: "",
          bad: "",
          totle: 0,
        },
        {
          id: 2,
          title: "第二检察部",
          goodnum: 0,
          middlenum: 0,
          bandnum: 0,
          good: "",
          middle: "",
          bad: "",
          totle: 0,
        },
        {
          id: 3,
          title: "第三检察部",
          goodnum: 0,
          middlenum: 0,
          bandnum: 0,
          good: "",
          middle: "",
          bad: "",
          totle: 0,
        },
        {
          id: 4,
          title: "第四检察部",
          goodnum: 0,
          middlenum: 0,
          bandnum: 0,
          good: "",
          middle: "",
          bad: "",
          totle: 0,
        },
        {
          id: 5,
          title: "第五检察部",
          goodnum: 0,
          middlenum: 0,
          bandnum: 0,
          good: "",
          middle: "",
          bad: "",
          totle: 0,
        },
        {
          id: 6,
          title: "第六检察部",
          goodnum: 0,
          middlenum: 0,
          bandnum: 0,
          good: "",
          middle: "",
          bad: "",
          totle: 0,
        },
        {
          id: 7,
          title: "第七检察部",
          goodnum: 0,
          middlenum: 0,
          bandnum: 0,
          good: "",
          middle: "",
          bad: "",
          totle: 0,
        },
        {
          id: 8,
          title: "溪口检察部",
          goodnum: 0,
          middlenum: 0,
          bandnum: 0,
          good: "",
          middle: "",
          bad: "",
          totle: 0,
        },
      ],
      listTopTemp: [
        {
          id: 9,
          title: "院领导",
          goodnum: 0,
          middlenum: 0,
          bandnum: 0,
          good: "",
          middle: "",
          bad: "",
          totle: 0,
        },
        {
          id: 1,
          title: "第一检察部",
          goodnum: 0,
          middlenum: 0,
          bandnum: 0,
          good: "",
          middle: "",
          bad: "",
          totle: 0,
        },
        {
          id: 2,
          title: "第二检察部",
          goodnum: 0,
          middlenum: 0,
          bandnum: 0,
          good: "",
          middle: "",
          bad: "",
          totle: 0,
        },
        {
          id: 3,
          title: "第三检察部",
          goodnum: 0,
          middlenum: 0,
          bandnum: 0,
          good: "",
          middle: "",
          bad: "",
          totle: 0,
        },
        {
          id: 4,
          title: "第四检察部",
          goodnum: 0,
          middlenum: 0,
          bandnum: 0,
          good: "",
          middle: "",
          bad: "",
          totle: 0,
        },
        {
          id: 5,
          title: "第五检察部",
          goodnum: 0,
          middlenum: 0,
          bandnum: 0,
          good: "",
          middle: "",
          bad: "",
          totle: 0,
        },
        {
          id: 6,
          title: "第六检察部",
          goodnum: 0,
          middlenum: 0,
          bandnum: 0,
          good: "",
          middle: "",
          bad: "",
          totle: 0,
        },
        {
          id: 7,
          title: "第七检察部",
          goodnum: 0,
          middlenum: 0,
          bandnum: 0,
          good: "",
          middle: "",
          bad: "",
          totle: 0,
        },
        {
          id: 8,
          title: "溪口检察部",
          goodnum: 0,
          middlenum: 0,
          bandnum: 0,
          good: "",
          middle: "",
          bad: "",
          totle: 0,
        },
      ],
      list2: [
        {
          id: 1,
          title: "第一检察部",
          goodnum: 400,
          middlenum: 100,
          bandnum: 3,
        },
        {
          id: 2,
          title: "第二检察部",
          goodnum: 400,
          middlenum: 50,
          bandnum: 2,
        },
        {
          id: 3,
          title: "第三检察部",
          goodnum: 350,
          middlenum: 5,
          bandnum: 5,
        },
        {
          id: 4,
          title: "第四检察部",
          goodnum: 333,
          middlenum: 1,
          bandnum: 6,
        },
        {
          id: 5,
          title: "第五检察部",
          goodnum: 250,
          middlenum: 2,
          bandnum: 2,
        },
        {
          id: 6,
          title: "第六检察部",
          goodnum: 500,
          middlenum: 3,
          bandnum: 1,
        },
        {
          id: 7,
          title: "第七检察部",
          goodnum: 338,
          middlenum: 8,
          bandnum: 0,
        },
        {
          id: 8,
          title: "溪口检察部",
          goodnum: 188,
          middlenum: 2,
          bandnum: 0,
        },
      ],
      listTypeOfMan: [],
    };
  },
  computed: {
    dataRule() {
      /*  var validateCaseName = (rule, value, callback) => {
        this.flag3 = true;
        if (value && !isSpecial(value)) {
          console.log("88888", value);
          this.flag3 = false;

          return callback(
            new Error(this.$t("validate.format", { attr: "不能带特殊字符" }))
          );
        } else {
          console.log("99999");
        }
        callback();
      }; */
      return {
        dateVal: [
          {
            required: !this.flag3,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  methods: {
    getCheck() {
      console.log("kkk", this.dataForm.dateVal);
      if (this.dataForm.dateVal instanceof Array) {
        this.flag3 = true;
        this.getAll();
      } else {
        this.flag3 = false;
      }
    },
    forId(index) {
      return "geo_" + index;
    },
    getInfoQuery() {
      this.$http
        .get(
          "/fhjw/fhjwfeedback/getCount?startDate=" +
            this.dataForm.dateVal[0] +
            "&endDate=" +
            this.dataForm.dateVal[1]
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.listTop = this.listTopTemp;
          this.listTop.forEach((ele) => {
            res.data.forEach((eles) => {
              if (ele.title === eles.deptName) {
                ele.goodnum = eles.committeeCountDTO.good;
                ele.middlenum = eles.committeeCountDTO.medium;
                ele.bandnum = eles.committeeCountDTO.bad;
                ele.totle = eles.committeeCountDTO.totalCount;
              }
            });
          });
          console.log("this.list", this.listTop);
        })
        .then(() => {
          //this.init();
          this.flag2 = true;
          this.getComment();
          this.mapTree();
        })
        .catch(() => {});

      this.$http
        .get(
          "/fhjw/fhjwcomment/getCountByUserRole?startDate=" +
            this.dataForm.dateVal[0] +
            "&endDate=" +
            this.dataForm.dateVal[1]
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }

          this.listTypeOfMan = [...res.data];
          //console.log("llll", ...res.data);
        })
        .then(() => {
          //this.init();
          this.flag = true;
          this.getTypeOfMan();
        })
        .catch(() => {});
    },
    // 获取信息
    getInfo() {
      console.log("aaaa");
      this.$http
        .get("/fhjw/fhjwcomment/getCountByDept")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }

          this.listTop.forEach((ele) => {
            res.data.forEach((eles) => {
              if (ele.title === eles.deptName) {
                ele.goodnum = eles.committeeCountDTO.good;
                ele.middlenum = eles.committeeCountDTO.medium;
                ele.bandnum = eles.committeeCountDTO.bad;
                ele.totle = eles.committeeCountDTO.totalCount;
              }
            });
          });
          console.log("this.list", this.listTop);
        })
        .then(() => {
          //this.init();
          this.flag2 = true;
          this.getComment();
          this.mapTree();
        })
        .catch(() => {});
      this.$http
        .get("/fhjw/fhjwcomment/getCountByUserRole")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.listTypeOfMan = [...res.data];
        })
        .then(() => {
          //this.init();

          console.log("listTypeOfMan", this.listTypeOfMan);
          this.flag = true;
          this.getTypeOfMan();
        })
        .catch(() => {});
    },
    mapTree() {
      //遍历画饼图
      this.getId = [];
      this.chartList_values = Object.values(this.listTop);
      this.$nextTick(function () {
        for (var i = 0; i < this.chartList_values.length; i++) {
          let arr = [];
          arr.push(
            {
              value: this.chartList_values[i].goodnum,
              name: "好",
            },
            {
              value: this.chartList_values[i].middlenum,
              name: "中",
            },
            {
              value: this.chartList_values[i].bandnum,
              name: "差",
            }
          );

          //console.log(arr, "arr========");

          //拿到channel_grade_name作为变量key
          this.getId.push(echarts.init(document.getElementById("geo_" + i)));
          this.getIDBack = this.getId;
          // console.log("ooooo", this.getId);
          //this.getId = getIDBack;

          this.getId[i].setOption(
            {
              title: {
                text: this.chartList_values[i].title,
                left: "center",
              },
              color: ["#40B27D", "#FFDC60", "#FF7070"],
              tooltip: {
                trigger: "item",
                formatter: "{b} : {c}个({d}%)",
              },
              legend: {
                bottom: 0,
                left: "center",
                data: ["好", "中", "差"],
              },
              series: [
                {
                  name: "占比",
                  type: "pie",
                  radius: "60%",
                  center: ["50%", "50%"],
                  selectedMode: "single",
                  data: arr,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                  },
                  label: {
                    normal: {
                      show: true,
                      formatter: "{b}: {c}个({d}%)", //自定义显示格式(b:name, c:value, d:百分比)
                    },
                  },
                },
              ],
            },
            true
          );
          /*   window.addEventListener("resize", function () {
            this.getId[i].resize();
          });
          this.$on("hook:destroyed", () => {
            window.removeEventListener("resize", function () {
              this.getId[i].resize();
            });
          }); */
        }
        console.log("uuuu", this.options);
        /*  window.addEventListener("resize", function () {
          this.getId[0].resize();
        });
        this.$on("hook:destroyed", () => {
          window.removeEventListener("resize", function () {
            this.getId[0].resize();
          });
        }); */
      });
    },
    getComment() {
      //const myChart = echarts.init(chart, null, { renderer: "svg" });
      let legendData = [];
      let goodData = [];
      let middleData = [];
      let badData = [];

      this.listTop.forEach((ele) => {
        legendData.push(ele.title);
        goodData.push(ele.goodnum);
        middleData.push(ele.middlenum);
        badData.push(ele.bandnum);
      });
      console.log("middleData", middleData);

      this.optionsAll = {
        color: ["#40B27D", "#FFDC60", "#FF7070"],
        //title: { text: "评价统计", left: "center" },
        legend: {
          bottom: 0,
          data: ["好", "中", "差"],
        },
        grid: {
          left: 60,
          right: 60,
        },
        xAxis: {
          type: "category",
          data: legendData,
          axisLabel: {
            interval: 0, //强制文字产生间隔
            rotate: 45, //文字逆时针旋转45°
            textStyle: {
              //文字样式
              color: "black",
              fontSize: 10,
              fontFamily: "Microsoft YaHei",
            },
          },
        },
        yAxis: {
          type: "value",
          name: "数量（个）",
        },
        series: [
          {
            name: "好",
            data: goodData,
            type: "bar",
            label: {
              show: true,
              position: "top",
            },
          },
          {
            name: "中",
            data: middleData,
            type: "bar",
            label: {
              show: true,
              position: "top",
            },
          },
          {
            name: "差",
            data: badData,
            type: "bar",
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      };
    },
    getTypeOfMan() {
      //const myChart = echarts.init(chart, null, { renderer: "svg" });
      let legendData = [];
      let goodData = [];
      let middleData = [];
      let badData = [];
      this.listTypeOfMan.forEach((ele) => {
        legendData.push(ele.userRole);
        goodData.push(ele.good);
        middleData.push(ele.medium);
        badData.push(ele.bad);
      });

      this.optionsDaibiao = {
        color: ["#40B27D", "#FFDC60", "#FF7070"],
        //title: { text: "评价统计", left: "center" },
        legend: {
          bottom: 0,
          data: ["好", "中", "差"],
        },
        grid: {
          left: 60,
          right: 60,
        },
        xAxis: {
          type: "category",
          data: legendData,
        },
        yAxis: {
          type: "value",
          name: "数量（个）",
        },
        series: [
          {
            name: "好",
            data: goodData,
            type: "bar",
            label: {
              show: true,
              position: "top",
            },
          },
          {
            name: "中",
            data: middleData,
            type: "bar",
            label: {
              show: true,
              position: "top",
            },
          },
          {
            name: "差",
            data: badData,
            type: "bar",
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      };
    },
    /*  getAll() {
      this.listTop = this.list2;
      this.getComment();
      this.mapTree();
      this.getTypeOfMan();
      this.$nextTick(() => {
        this.$refs.chart.getEchart();
      });
    }, */
    getAll() {
      this.flag2 = false;
      this.flag = false;
      if (this.dataForm.dateVal) {
        this.getInfoQuery();
      } else {
        this.getInfo();
      }
    },
  },
  created() {
    this.getInfo();
    //this.getTypeOfMan();
  },
  mounted() {},
  activated() {
    //this.getTypeOfMan();
    if (this.flag2 && this.flag) {
      this.$refs.chartDaibiao.resize();
      this.$refs.chart.resize();
    }

    /* for (let i = 0; i < this.getIDBack.length; i++) {
      window.addEventListener("resize", function () {
        this.getIDBack[i].resize();
      });
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          this.getIDBack[i].resize();
        });
      });
    } */
  },
};
</script>

<style lang="less" scoped>
.fhjwcommentstatistical {
  width: 100%;
  .top {
    width: 60%;
    margin: 0 auto;
    display: flex;
  }
}
.titleline {
  width: 100%;
  display: flex;
  line-height: 50px;
  font-size: 18px;
  border-bottom: 1px solid #eee;
}
.bottom {
  width: 100%;

  display: flex;
  flex-wrap: wrap;

  .item-pie {
    width: calc(25% - 10px);
    margin-right: 10px;
    margin-top: 80px;
    // flex: 1;

    //display: flex;
  }
}
.bottom1 {
  display: flex;
  margin-top: 40px;
  font-size: 18px;
  line-height: 50px;
  .left {
    width: calc(100% - 20px);
    border-bottom: 1px solid #eee;
    margin-right: 20px;
  }
  .right {
    width: calc(100% - 2px);
    border-bottom: 1px solid #eee;
  }
}
</style>