<template>
  <el-card
    shadow="never"
    class="aui-card--fill"
  >
    <!-- 查询区域 -->
    <el-form
      :inline="true"
      :model="dataForm"
    >
      <!--  <el-form-item>
        <el-input
          v-model="dataForm.department"
          placeholder="部门名称"
          clearable
        ></el-input>
      </el-form-item> -->
      <el-form-item>
        <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="getAll()">{{ $t('query') }}</el-button>
      </el-form-item>
    </el-form>
    <!-- 顶部两个饼图区域 -->
    <div class="bottom">
      <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="optionsComment"
          id="chartComment"
          height="400px"
          width="100%"
          ref="chartComment"
        />
      </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>
    <!-- 标题 -->
    <div
      class="titleline"
      style="margin-top:30px"
    >
      <div class="left">
        <img
          src="../../../assets/img/logo_tj.png"
          style="width:20px;height:20px"
        >
        反馈统计
      </div>
    </div>
    <!-- 底部折线图区域 -->
    <div class="bottom-zhu">
      <Echarts
        :options="optionsAll"
        height="375px"
        width="100%"
        ref="chartAll"
      />
    </div>

  </el-card>

</template>

<script>
import Echarts from "../../../components/echarts.vue";
export default {
  name: "fhjwstatistical",
  inject: ["refresh"],
  components: { Echarts },
  data() {
    return {
      dataForm: {
        dateVal: "",
        department: "",
      },
      optionsComment: {},
      optionsDaibiao: {},
      optionsAll: {},
      flag: false,
    };
  },
  methods: {
    // 获取信息
    getInfo() {
      this.$http
        .get("/fhjw/fhjwfeedback/getCount")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.flag = true;
          this.getPieDaibiao(res.data[1].feedbackCount);
          this.getZhuzhuang(res.data[2].feedbackCount);
          this.getPieComment(res.data[0].feedbackCount);
        })
        .catch(() => {});
    },

    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.flag = true;
          this.getPieDaibiao(res.data[1].feedbackCount);
          this.getZhuzhuang(res.data[2].feedbackCount);
          this.getPieComment(res.data[0].feedbackCount);
        })
        .catch(() => {});
    },

    //意见统计
    getPieComment(feedbackCount) {
      let data = [
        { value: feedbackCount.delayCount, name: "反映拖延消极办案" },
        { value: feedbackCount.illegalCount, name: "反映违规不当办案" },
        {
          value: feedbackCount.dishonestyCount,
          name: "反映办案不廉或作风不正",
        },
        {
          value: feedbackCount.interveneCount,
          name: "反映存在插手干预案件办理",
        },
        { value: feedbackCount.otherProblemCount, name: "反映其他方面问题" },
      ];
      let legendData = [
        "反映拖延消极办案",
        "反映违规不当办案",
        "反映办案不廉或作风不正",
        "反映存在插手干预案件办理",
        "反映其他方面问题",
      ];
      this.optionsComment = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}件 ({d}%)",
        },
        legend: {
          bottom: 0,
          left: "center",
          data: legendData,
        },
        series: [
          {
            name: "占比",
            type: "pie",
            radius: "60%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: data,
            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:百分比)
              },
            },
          },
        ],
      };
    },

    //代表委员
    getPieDaibiao(feedbackCount) {
      let data = [
        { value: feedbackCount.delayCount, name: "反映拖延消极办案" },
        { value: feedbackCount.illegalCount, name: "反映违规不当办案" },
        {
          value: feedbackCount.dishonestyCount,
          name: "反映办案不廉或作风不正",
        },
        {
          value: feedbackCount.interveneCount,
          name: "反映存在插手干预案件办理",
        },
        { value: feedbackCount.otherProblemCount, name: "反映其他方面问题" },
      ];
      let legendData = [
        "反映拖延消极办案",
        "反映违规不当办案",
        "反映办案不廉或作风不正",
        "反映存在插手干预案件办理",
        "反映其他方面问题",
      ];
      this.optionsDaibiao = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}件({d}%)",
        },
        legend: {
          bottom: 0,
          left: "center",
          data: legendData,
          formatter: function (name) {
            //用来格式化图例文本，支持字符串模板和回调函数两种形式。模板变量为图例名称 {name}
            return `${name}`;
          },
        },
        series: [
          {
            name: "占比",
            type: "pie",
            radius: "60%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: data,
            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:百分比)
              },
            },
          },
        ],
      };
    },

    //反馈统计
    getZhuzhuang(feedbackCount) {
      let data = [
        feedbackCount.complainCount,
        feedbackCount.feedbackCount,
        feedbackCount.committeeCount,
      ];
      let xData = ["控告申诉", "意见反馈", "代表委员有话说"];
      this.optionsAll = {
        xAxis: {
          type: "category",
          data: xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            barWidth: 40,
            label: {
              show: true,
              position: "top",
            },
            data: data,
            type: "bar",
          },
        ],
      };
    },

    //查询
    getAll() {
      this.flag = false;
      if (this.dataForm.dateVal) {
        this.getInfoQuery();
      } else {
        this.getInfo();
      }
    },
  },
  created() {
    this.getInfo();
    //this.init();
  },
  mounted() {
    // this.getInfo();
  },
  activated() {
    if (this.flag === true) {
      this.$refs.chartComment.resize();
      this.$refs.chartDaibiao.resize();
      this.$refs.chartAll.resize();
    }
  },
};
</script>

<style lang="less" scoped>
.label,
.date-val {
  margin-right: 10px;
}
.titleline {
  display: flex;
  line-height: 50px;
  font-size: 18px;
  //border-bottom: 1px solid #eee;
  .left {
    width: calc(50% - 20px);
    border-bottom: 1px solid #eee;
    margin-right: 20px;
  }
}
.bottom {
  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;
  }
}
.bottom-zhu {
  width: calc(50% - 10px);
  transform: translate3d(0, -10%, 0);
  height: 375px;
  margin-top: 30px;
  width: 50%;
  border-bottom: 1px solid #eee;
}
</style>