<template>
  <modulen>
    <template #title>类别销售占比</template>
    <template #end></template>
    <div v-if="opDataNum.length > 0" class="sales-category-ex">
      <div class="ectbox">
        <ectRing :options="ectOpts" />
      </div>
      <div class="ectbg"></div>
    </div>
    <Empty v-else />
  </modulen>
</template>

<script>
import zxrcyhsl from "@/assets/images/curingBussiness/zxrcyh-sl.png";
import { serviceareaSaleType } from "@/api/expressway.js";
import moment from "moment";
import ectRing from "@/components/ectRing.vue";
export default {
  components: { ectRing },
  data() {
    return {
      number: "",
      ectOpts: {},
      opDataType: [],
      opDataNum: [],
      query: {
        level: "0",
        dimension: "",
        timemode: "month",
        timeflag: moment(new Date()).format("yyyyMM")
      }
    };
  },
  computed: {
    getAppDate() {
      return moment(this.$store.state.appDate).format("yyyyMM");
    },
    selectRoad() {
      return this.$store.state.road.selectRoadId;
    }
  },
  watch: {
    getAppDate(newVal) {
      this.query.timeflag = newVal;
      this.getData();
    },
    selectRoad(newVal) {
      const level = this.$store.state.road.selectLevel;
      const roadId = newVal ? newVal[level - 1] : "";
      this.query.level = level;
      this.query.dimension = roadId;
      this.getData();
    }
  },
  mounted() {},
  methods: {
    async getData() {
      const data = await serviceareaSaleType(this.query);

      const _that = this;
      _that.opDataType = [];
      _that.opDataNum = [];
      data.msgContent.forEach((ele, index) => {
        _that.opDataType.push(ele.className);
        _that.opDataNum.push({
          name: ele.className,
          value: ele.saleCount,
          percvalue:
            Math.round((ele.saleCount / ele.saleCountSum).toFixed(2) * 100) +
            "%"
        });
      });
      this.getCharts();
    },
    getCharts() {
      this.ectOpts = {
        // tooltip: {
        //   trigger: 'item'
        // },
        graphic: {
          type: "text",
          left: "center",
          top: "40%",
          style: {
            text: "资产总数",
            textAlign: "center",
            fill: "#333",
            fontSize: 14
          }
        },
        legend: [
          {
            orient: "vertical",
            itemGap: 10,
            formatter: function(name) {
              // let formatData = format.truncateText(name, 50, "overflow", "...");
              return name;
            },
            top: "10%",
            bottom: "10%",
            right: "1%",
            // height: 150,
            textStyle: {
              width: 30,
              color: "#fff"
            },
            // data: this.opDataType.slice(0, 5)
            data: this.opDataType
          }
        ],
        tooltip: {
          trigger: "item",
          show: true,
          // 自定义修改悬浮内容
          formatter: function(params) {
            var res = `<div style="font-size: 16px">销售类别</div><div style="font-size: 14px">${params.data.name}：${params.data.value} 元</div>`;
            return res;
          }
        },
        color: [
          "#4999FF",
          "#81E80A",
          "#98A2A6",
          "#FFCE5A",
          "#FFFFFF",
          "#2ED67C",
          "#F5A071",
          "#A646FF",
          "#FF5757",
          "#00DDCC",
          "#6774BC"
        ],
        series: [
          {
            name: "销售类别",
            legendHoverLink: false,
            type: "pie",
            radius: ["55%", "65%"],
            center: ["25%", "50%"],
            emphasis: {
              label: {
                show: true,
                formatter: function(val) {
                  return [
                    "{a|" + val.data.percvalue + "}",
                    "",
                    "{b|" + val.data.name + "}"
                  ].join("\n");
                },
                rich: {
                  a: {
                    color: "#fff",
                    lineHeight: 30,
                    fontSize: 36,
                    fontWeight: 800,
                    marginTop: 10,
                    fontFamily: "DinNextRegular"
                  },
                  b: {
                    color: "#fff",
                    fontSize: 16,
                    height: 20
                  }
                }
                // fontSize: '40',
                // fontWeight: 'bold'
              }
            },
            label: {
              show: false,
              position: "center"
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              borderColor: "rgba(28, 46, 61, 0.5)",
              borderWidth: 5
            },
            data: this.opDataNum
          }
        ]
      };
    }
  }
};
</script>