<template>
  <el-card class="header" :style="{height:height}">
    <div class="remindHeader topLine">
      <img src="/static/img/workCenter.png" alt srcset />
      <span>中心工作排行</span>
      <span>
        <el-select v-model="typeValue" placeholder="请选择" @change="hadleType">
          <el-option
            v-for="item in typeData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </span>
    </div>
    <div ref="pieChart" class="chart" :style="{height:height}" />
  </el-card>
</template>
<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import { debounce } from "@/utils";
import { getRankingData } from "@/api/dashboard/orderDatas";
export default {
  props: {
    height: {
      type: String,
      default: "470px"
    }
  },
  data() {
    return {
      typeData: [
        {
          value: 0,
          label: "本月"
        },
        {
          value: 1,
          label: "本日"
        }
      ],
      typeValue: 0,
      loading: false,
      chart: null,
      search_date: "1",
      option: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          bottom: "0",
          data: [] // 图例数据
        },
        calculable: true,
        series: [
          {
            name: "",
            type: "pie",
            radius: "55%",
            center: ["50%", "45%"],
            data: [
              {
                value: 0,
                name: "无数据"
              }
            ], // 数据
            animationEasing: "cubicInOut",
            animationDuration: 2600
          }
        ]
      }
    };
  },
  created() {
    this.getDatas();
  },
  mounted() {
    this.initChart();
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize();
      }
    }, 100);
    window.addEventListener("resize", this.__resizeHandler);
  },
  methods: {
    //获取数据
    getDatas() {
      return new Promise(resolve => {
        const params = {
          type: this.typeValue
        };
        getRankingData(params).then(response => {
          if (response.state.toLowerCase() === "success") {
            const res = response.totask;
            this.option.series[0].data=[
              {
                value: 0,
                name: "无数据"
              }
            ];
            if (res && res.length > 0) {
              const sData = [];
              res.forEach((v, i) => {
                sData.push({
                  value: v.F_RealPrice,
                  name: v.key
                });
              });
              this.option.series[0].data = sData;

              this.initChart();
            }
            this.initChart()
          }
        });
        resolve();
      });
    },
    // 初始化数据
    initChart() {
      this.chart = echarts.init(this.$refs.pieChart, "macarons");
      this.chart.clear();
      this.chart.setOption(this.option);
    },
    //选择
    hadleType(val) {
      this.typeValue = val;
      this.getDatas();
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  margin-top: 20px;
  span {
    font-size: 16px;
    font-weight: 700;
    .el-select {
      width: 90px;
      height: 33px;
      float: right;
    }
  }
  img {
    vertical-align: middle;
    margin-right: 7px;
  }
}
</style>