<template>
  <div class="community_content">
    <div class="title">{{ title }}</div>
    <div id="community" :style="{ height: height, width: width }"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import resize from "../../../components/Charts/mixins/resize";

export default {
  name: "efunnel",
  mixins: [resize],
  props: {
    width: String,
    height: String,
    title: {
      type: String,
      default: "",
    },
    funnelData: {
      type: Object,
      default: () => {
        return [{ screeningCoverRate: 0 }];
      },
    },
  },
  data() {
    return {
      activeIndex: 10,
      chart: null,
    };
  },
  watch: {
    funnelData: {
      deep: true,
      handler(val) {
        this.initCommunity(val);
        this.$forceUpdate();
      },
    },
    height(val) {
      this.$forceUpdate();
    },
    width(val) {
      this.$forceUpdate();
    },
  },
  methods: {
    initCommunity(funnelData) {
      if (!funnelData) {
        return;
      }
      const myChart = echarts.init(document.getElementById("community"));
      this.chart=myChart //混入resize
      let colors = [
        "#1cd389",
        "#668eff",
        "#ffc751",
        "#ff6e73",
        "#8683e6",
        "#9692ff",
      ];
      let lineargroup = [
        {
          value: 80,
          name: "目标人群",
          oriname: "目标人群",
          number: funnelData.target || 0,
          // color: ["rgba(102,142,255,0.7)", "rgba(102,142,255,0)"]
        },
        {
          value: 60,
          name: "血检率",
          oriname: "初筛血检",
          number: funnelData.firstScreeningCount || 0,
          rate: funnelData.firstScreeningCoverRate || "--",
          // color: ["rgba(255,198,82,0.6)", "rgba(255,198,82,0)"]
        },
        {
          value: 40,
          name: "内镜转化率",
          oriname: "内镜检查",
          number: funnelData.endoscopeCount || 0,
          rate: funnelData.endoscopeRate || "--",
          // color: ["rgba(255,110,115,0.5)", "rgba(255,110,115,0)"]
        },
        {
          value: 20,
          name: "病理转化率",
          oriname: "病理检查",
          number: funnelData.pathologyCount || 0,
          rate: funnelData.pathologyRate || "--",
          //  color: ["rgba(134,131,230,0.4)", "rgba(134,131,230,0)"]
        },
      ];

      let data1 = [];
      let data2 = [];

      for (let i = 0; i < lineargroup.length; i++) {
        let obj1 = {
          value: lineargroup[i].value,
          num: lineargroup[i].number,
          name: lineargroup[i].oriname,
          rate: lineargroup[i].rate,
        };

        let obj2 = {
          value: lineargroup[i].value,
          name: lineargroup[i].name,
          rate: lineargroup[i].rate,
          label: { show: i == 0 ? false : true },
        };
        data1.push(obj1);
        data2.push(obj2);
      }

      const option = {
        color: colors,
        series: [
          {
            top: 0,
            type: "funnel",
            // height: this.height,
            // width:this.width,
            gap: 6, //数据图形间距
            right: "20%",
            // width: "60%",
            z: 3,
            label: {
              color: "#fff",
              show: true,
              position: "inside",
              fontSize: "14",
              formatter: function (d) {
                let ins = d.name + "{aa|}\n" + d.data.num;
                return ins;
              },
              rich: {
                aa: {
                  padding: [8, 0, 6, 0],
                },
              },
            },
            data: data1,
          },
          {
            top: 0,
            type: "funnel",
            // height: "250",
            gap: 6,
            right: "20%",
            // width: "60%",
            label: {
              normal: {
                position: "right",
                formatter: function (d) {
                  let ins = "{aa|" + d.name + "}\n{bb|" + d.data.rate + "}";
                  return ins;
                },
                rich: {
                  aa: {
                    align: "center",
                    color: "#fff",
                    fontSize: "14",
                    lineHeight: "30",
                  },
                  bb: {
                    align: "center",
                    color: "#fff",
                    fontSize: "14",
                  },
                },
              },
            },
            labelLine: {
              show: false,
            },
            data: data2,
          },
        ],
      };
      myChart.setOption(option);
      myChart.resize()
    },
  },
  mounted() {
    this.initCommunity(this.funnelData);
  },
};
</script>
<style lang="scss">
.title {
  color: white;
}

.container {
  width: 100%;
  height: 100%;
  transition: all 0.5s;
}
</style>
