<!-- 饼图统计 -->
<template>
  <div class="box">
    <boxTop :title="title"/>
    <div class="cakeBox">
      <div class="title"><span class="label">订单总额</span><span class="value">1700</span><span style="font-size: 16px">26.5%</span><img
          v-if="isHoist" src="@/assets/img/hoist.png"><img v-else src="@/assets/img/decline.png"></div>
      <div class="flex">
        <div class="chartsdom" :id="id"></div>
        <div class="panel">
          <div class="panel-item" v-for="item in chartData">
            <div class="color" :style="{'background-color':item.color }"></div>
            <div class="type">{{ item.name }}</div>
            <div class="number">{{ item.value }}</div>
            <div class="amount">￥{{ item.amount }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import boxTop from '@/components/boxTop/index.vue'

export default {
  data() {
    return {
      isHoist: true,
      chartData: [
        {
          value: 30,
          name: "待付款",
          color: '#975fe4',
          amount: 3395,
        },
        {
          value: 40,
          name: "已付款",
          color: '#45a5ff',
          amount: 2323
        },
        {
          value: 50,
          name: "已发货",
          color: '#81c926',
          amount: 3322
        },
        {
          value: 20,
          name: "待收货",
          amount: 6644,
          color: '#ff8e49'
        },
        {
          value: 16,
          name: "已完成",
          amount: 3211,
          color: '#37cbcb'
        },
      ]
    }
  },
  components: {
    boxTop,
  },
  props: {
    id: {
      type: String,
      default: ``,
    },
    data: {
      type: Object,
      default: new Object(),
    },
    title: {
      type: String,
      default: ``,
    },
    titleEn: {
      type: String,
      default: `Tongren Tobacco Planting Digital Management Platform`,
    },
  },
  async mounted() {
    this.getEchart()
  },
  watch: {
    data: {
      handler() {
        this.getEchart()
      },
      deep: true, // 深度监听
      immediate: true, // 立即执行
    },
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById(this.id))
      const sum = this.chartData.reduce((per, cur) => per + cur.value, 0);
      const gap = (1 * sum) / 100;
      const pieData1 = [];
      const gapData = {
        name: "",
        value: gap,
        itemStyle: {
          color: "transparent",
        },
      };

      const color = this.chartData.map(item => item.color);
      for (let i = 0; i < this.chartData.length; i++) {
        // 第一圈数据
        pieData1.push({
          ...this.chartData[i],
        });
        pieData1.push(gapData);
      }
      let option = {
        color,
        title: {
          show: true,
          text: sum.toLocaleString(),
          subtext: "订单总量",
          x: "45%",
          y: "35%",
          itemGap: 6,
          textStyle: {
            color: "hsla(179, 100%, 65%, 1)",
            fontSize: 24,
            fontWeight: "400"
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 12,
            fontWeight: "400"
          },
          textAlign: "center",
        },
        series: [
          {
            name: "",
            type: "pie",
            roundCap: true,
            radius: ["82%", "92%"],
            center: ["50%", "50%"],
            data: pieData1,
            labelLine: {
              length: 8,
              length2: 16,
              lineStyle: {
                width: 1,
              },
            },
            label: {
              show: false,
              fontFamily: "ysbth",
              position: "outside",
              padding: [0, 0, 0, 0],
              formatter(params) {
                if (params.name === "") {
                  return "";
                }
                return `${params.percent.toFixed(0)}%`;
              },
              color: "#fff",
              fontSize: "14px",
              lineHeight: 10,
            },
          },
          {
            type: "pie",
            radius: ["78%", "81%"],
            center: ["50%", "50%"],
            animation: false,
            hoverAnimation: false,
            data: [
              {
                value: 100,
              },
            ],
            label: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: "#3BC5EF",
              },
            },
          },
          {
            name: "",
            type: "pie",
            startAngle: 90,
            radius: "77%",
            animation: false,
            hoverAnimation: false,
            center: ["50%", "50%"],
            itemStyle: {
              normal: {
                labelLine: {
                  show: false,
                },
                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                  {
                    offset: 1,
                    color: "rgba(50,171,241, 0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(50,171,241, .4)",
                  },
                  {
                    offset: 0,
                    color: "rgba(55,70,130, 0)",
                  },
                ]),
                shadowBlur: 60,
              },
            },
            data: [
              {
                value: 100,
              },
            ],
          },
        ],
      };
      myChart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
.box {
  width: 460px;
  height: 250px;
  background: linear-gradient(rgba(0, 32, 77, 0.8) 0%, rgba(0, 32, 77, 0.5) 100%);
  box-shadow: inset 0px 0px 20px 0px rgba(27, 146, 255, 0.3);
}

.cakeBox {
  width: 460px;
  height: 210px;

  .chartsdom {
    margin: 0 30px;
    width: 150px;
    height: 150px;
  }
}

.flex {
  display: flex;
  align-items: center;
}

.l-height {
  line-height: 100%;
}

.space_around {
  justify-content: space-around;
  align-items: center;
}

.space_between {
  justify-content: space-between;
  align-items: center;
}

.number {
  text-align: center;
  font-size: 16px;
  padding: 4px 0;
  margin: 3px 0;
}

.text {
  font-size: 14px;
  color: #888888;
  display: flex;
  justify-content: center;
  align-items: center;
}

.column_reverse {
  flex-direction: column-reverse;
}

.panel {
  height: 114px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  flex-direction: column;

  .panel-item {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 20px;
    width: 195px;

    .color {
      border-radius: 2px;
      width: 10px;
      height: 10px;
    }
  }
}

.title {
  display: flex;
  align-items: center;
  margin: 10px 30px;

  .label {
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;

  }

  .value {
    font-weight: bold;
    font-size: 24px;
    background: linear-gradient(0deg, rgba(27, 146, 255, 1) 0%, rgba(255, 255, 255, 1) 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

}

.title > * {
  margin: 0 6px;
}
</style>
