<template>
  <el-card
    shadow="never"
    class="aui-card--fill"
  >
    <!-- <span class="label">筛选</span>
    <el-date-picker
      class="date-val"
      v-model="dateVal"
      type="monthrange"
      range-separator="至"
      start-placeholder="开始月份"
      end-placeholder="结束月份"
    >

    </el-date-picker>
    <el-button>查询</el-button> -->
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
      <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="结束月份"
        >

        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">{{ $t('query') }}</el-button>
      </el-form-item>
    </el-form>
    <div class="titleline">
      <div class="left">
        <img
          src="../../../assets/img/logo_tj.png"
          alt=""
          style="width:20px;height:20px"
        >
        意见统计
      </div>
      <div class="right">
        <img
          src="../../../assets/img/logo_tj.png"
          alt=""
          style="width:20px;height:20px"
        >
        代表委员意见统计
      </div>
    </div>
    <div class="bottom">
      <!--  <div
        ref="chartpie1"
        style="width:50%;height:250px;"
      ></div> -->
      <div style="flex:1;transform: translate3d(0, -10%, 0);">
        <Echarts
          :options="optionsComment"
          height="300px"
          width="100%"
        />
      </div>

      <div style="flex:1;transform: translate3d(0, -10%, 0);">
        <Echarts
          :options="optionsDaibiao"
          height="300px"
          width="100%"
        />
      </div>
      <!-- <div
        ref="chartpie2"
        style="width:50%;height:250px"
      ></div> -->
    </div>
    <div class="bottom">
      <!--  <div
        ref="chartzhuzhuang"
        style="width:100%;height:375px;"
      ></div> -->
      <Echarts
        :options="optionsAll"
        height="375px"
        width="100%"
      />
    </div>

  </el-card>

</template>

<script>
import Echarts from "../../../components/echarts.vue";
export default {
  name: "fhjwstatistical",
  components: { Echarts },
  data() {
    return {
      dataForm: {
        dateVal: "",
        department: "",
      },
      optionsComment: {},
      optionsDaibiao: {},
      optionsAll: {},
    };
  },
  methods: {
    getPie1() {
      this.optionsComment = {
        /*  title: {
            text: "天气情况统计",
            subtext: "虚构数据",
            left: "center",
          }, */
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          bottom: 0,
          left: "center",

          data: [
            "反映拖延消极办案",
            "反映违规不当办案",
            "反映办案不廉或作风不正",
            "反映存在插手干预案件办理",
            "反映其他方面问题",
          ],
        },
        series: [
          {
            type: "pie",
            radius: "70%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
              { value: 1548, name: "反映拖延消极办案" },
              { value: 735, name: "反映违规不当办案" },
              { value: 510, name: "反映办案不廉或作风不正" },
              { value: 434, name: "反映存在插手干预案件办理" },
              { value: 335, name: "反映其他方面问题" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
    },
    getPie2() {
      this.optionsDaibiao = {
        /*  title: {
            text: "天气情况统计",
            subtext: "虚构数据",
            left: "center",
          }, */
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          bottom: 0,
          left: "center",

          data: [
            "反映拖延消极办案",
            "反映违规不当办案",
            "反映办案不廉或作风不正",
            "反映存在插手干预案件办理",
            "反映其他方面问题",
          ],
        },
        series: [
          {
            type: "pie",
            radius: "70%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
              { value: 1548, name: "反映拖延消极办案" },
              { value: 735, name: "反映违规不当办案" },
              { value: 510, name: "反映办案不廉或作风不正" },
              { value: 434, name: "反映存在插手干预案件办理" },
              { value: 335, name: "反映其他方面问题" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
    },
    getZhuzhuang() {
      this.optionsAll = {
        title: {
          text: "反馈统计",
          left: "center",
        },
        xAxis: {
          type: "category",
          data: ["控告申诉", "意见反馈", "代表委员有话说"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            label: {
              show: true,
              position: "top",
            },
            data: [120, 200, 150],
            type: "bar",
          },
        ],
      };
    },
  },
  created() {
    this.getPie1();
    this.getPie2();
    this.getZhuzhuang();
  },
  mounted() {},
};
</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: 50%;
  }
  .right {
    width: 50%;
  }
}
.bottom {
  display: flex;
  margin-top: 20px;
}
</style>