<template>

  <el-card
    shadow="never"
    class="aui-card--fill"
  >
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >

      <el-form-item>
        <el-date-picker
          class="date-val"
          v-model="dataForm.dateVal"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
        >

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

      <!-- <div
        ref="chartpie"
        style="height:450px;width:100%"
      ></div> -->

      <Echarts
        :options="optionsAll"
        height="450px"
        width="100%"
      />

    </div>
    <div class="bottom">
      <div
        class="item-pie"
        v-for="(item,index) in list"
        :key="item.id"
      >
        <!--  <Echarts
          :options="optionsDepart[index]"
          height="450px"
          width="100%"
        /> -->
        <div
          :id="forId(index)"
          style="height:300px;width:100%;"
        ></div>
      </div>

    </div>

  </el-card>
</template>

<script>
import Echarts from "../../../components/echarts.vue";
import * as echarts from "echarts";
export default {
  name: "fhjwcommentstatistical",
  components: { Echarts },
  data() {
    return {
      dataForm: {
        dateVal: "",
      },
      chartList: [], //
      getId: [], //用来生成echarts
      chartList_values: [], //取其值
      optionsAll: {},
      optionsDepart: {},
      list: [
        {
          id: 1,
          title: "第一检察部",
          goodnum: 500,
          middlenum: 20,
          bandnum: 0,
        },
        {
          id: 2,
          title: "第二检察部",
          goodnum: 800,
          middlenum: 50,
          bandnum: 1,
        },
        {
          id: 3,
          title: "第三检察部",
          goodnum: 200,
          middlenum: 5,
          bandnum: 0,
        },
        {
          id: 4,
          title: "第四检察部",
          goodnum: 100,
          middlenum: 1,
          bandnum: 1,
        },
        {
          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,
        },
      ],
    };
  },
  methods: {
    forId(index) {
      return "geo_" + index;
    },
    /*  show(option) {
            console.log(option.level_incite_user_list, '每个等级的占比情况11');
            this.chartList = option.level_incite_user_list;
            this.mapTree();
        }, */
    mapTree() {
      this.getId = [];
      this.chartList_values = Object.values(this.list);
      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.getId[i].setOption({
            title: {
              text: this.chartList_values[i].title,
              left: "center",
            },
            color: ["#91cc75", "#FFDC60", "#FF7070"],
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{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)",
                  },
                },
              },
            ],
          });
        }
      });
    },
    getPie() {
      //const myChart = echarts.init(chart, null, { renderer: "svg" });
      let legendData = [];
      let goodData = [];
      let middleData = [];
      let badData = [];
      this.list.forEach((ele) => {
        legendData.push(ele.title);
        goodData.push(ele.goodnum);
        middleData.push(ele.middlenum);
        badData.push(ele.bandnum);
      });

      this.optionsAll = {
        color: ["#91cc75", "#FFDC60", "#FF7070"],
        title: { text: "评价统计", left: "center" },
        legend: {
          bottom: 0,
          data: ["好", "中", "差"],
        },
        xAxis: {
          type: "category",
          data: legendData,
        },
        yAxis: {
          type: "value",
        },
        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",
            },
          },
        ],
      };
    },
  },
  created() {
    this.getPie();
  },
  mounted() {
    this.mapTree();
  },
};
</script>

<style lang="less" scoped>
.fhjwcommentstatistical {
  width: 100%;
  .top {
    width: 100%;
    display: flex;
  }
}
.bottom {
  width: 100%;

  display: flex;
  flex-wrap: wrap;

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

    //display: flex;
  }
}
</style>