<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2023-08-08 13:30:02
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-08-31 16:22:18
 * @FilePath: /smart-and-safe-city/src/views/Cszl/components/CharsBar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="item flex-column">
    <div class="top">
      <Title :text="titleText" />
    </div>
    <div class="container flex-betweem">
      <div class="l">
        <Chars :options="options" />
      </div>
      <div class="r flex-column">
        <div
          class="r-item flex-betweem"
          v-for="(item, index) in charsArr"
          :key="item.name"
        >
          <div class="a flex">
            <div :style="{ background: `${color[index]}` }" class="q"></div>
            <div class="text">{{ item.name }}</div>
          </div>
          <div class="b">{{ item.value }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "@/components/Title.vue";
import Chars from "@/components/Chars.vue";
export default {
  name: "",
  components: {
    Title,
    Chars,
  },
  props: {
    titleText: {
      type: String,
      default: "",
    },
    // 数据
    charsArr: {
      type: Array,
      default: () => {
        return [
          {
            value: 1119,
            name: "居民用户数",
          },
          {
            value: 585,
            name: "工商业用户数",
          },
          {
            value: 40,
            name: "餐饮用户数",
          },
        ];
      },
    },
    // 颜色
    color: {
      type: Array,
      default: () => {
        return ["#0289FF", "#00D9F5", "#F9B136"];
      },
    },
    // 中间文字是否显示
    centerTextShow: {
      type: Boolean,
      default: true,
    },
    centerText: {
      type: String,
      default: "用户数量",
    },
  },
  data() {
    return {
      options: {},
    };
  },
  mounted() {
    this.charsChange(this.charsArr, this.color);
  },
  methods: {
    charsChange(arr, color) {
      this.options = {
        // tooltip: {
        //   trigger: 'item'
        // },
        // legend: {
        //   type: "scroll",
        //   orient: "vertical",
        //   right: "0%",

        //   top: 15,
        //   bottom: 0,
        //   textStyle: {
        //     color: "#ffffff",
        //     fontSize: 12,
        //   },
        //   icon: "roundRect",
        //   itemWidth: 20,
        //   itemHeight: 8,
        //   // itemGap: 30,
        //   formatter: (name) => {
        //     // 第一个空格
        //     let kg1 = "";
        //     if (name.length == this.maxNameLength) {
        //       for (let i = 0; i < 7; i++) {
        //         kg1 += " ";
        //       }
        //     } else {
        //       for (
        //         let i = 0;
        //         i < 3 * (this.maxNameLength - name.length) + 7;
        //         i++
        //       ) {
        //         kg1 += " ";
        //       }
        //     }
        //     let obj = arr.filter((item) => {
        //       return name == item.name;
        //     })[0];
        //     var total = arr.reduce((a, b) => {
        //       const value1 = b.value;
        //       return a + b.value;
        //     }, 0);
        //     //第二个空格
        //     const length = (obj.value + "").length;
        //     let kg2 = "";
        //     for (let i = 0; i < (this.maxValueLength - length) * 2 + 10; i++) {
        //       kg2 += " ";
        //     }

        //     return (
        //       name +
        //       kg1 +
        //       // obj.value +
        //       kg2 +
        //       Math.floor((obj.value / total) * 1000) / 10 +
        //       "%"
        //     );
        //   },
        // },
        color,

        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["75%", "90%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
              emphasis: {
                formatter: "{b}\n{c}\n({d}%)",
                show: false,
                textStyle: {
                  fontSize: "16",
                  fontWeight: "bold",
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              borderWidth: 10,
              // shadowBlur: 20,
              borderRadius: 20,
            },

            labelLine: {
              show: false,
            },
            data: arr,
            label: {
              show: this.centerTextShow,
              // normal: {
              //   formatter: function (params) {
              //     console.log('params',params)
              //     return "1744\n用户数量";
              //   },
              //   position: "center",
              //   show: true,
              //   textStyle: {
              //     fontSize: "12",
              //     fontWeight: "400",
              //     color: "#fff",
              //   },
              // },
              position: "center",
              formatter: [
                `{a|${
                  arr.reduce((pre, next, index) => {

                    return { value: pre.value + next.value };
                  }).value
                }}`,
                `{b|${this.centerText}}`,
              ].join("\n"),
              rich: {
                a: {
                  color: "#fff",
                  fontSize: 16,
                  lineHeight: 20,
                  verticalAlign: "bottom",
                },
                b: {
                  color: "#fff",
                  fontSize: 12,
                  lineHeight: 20,
                },
              },
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.item {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  // background: rgba(5, 11, 27, 0.55);
   background: url("~@/assets/newImage/cszl/right-bottom.png") no-repeat;
    background-size: 100% 100%;
  padding-left: 23.61px;
  box-sizing: border-box;
  padding-top: 29.96px;
  padding-bottom:10px;
  .top {
    position: relative;
    // top: 29.96/215 * 100%;
    margin-bottom:20px;
  }

  .container {
    // height: 120/215 * 100%;
    // top: 29.32/215 * 100% +29.96/215 * 100%;
    flex:1;
    padding-left: 30px;
    padding-right: 35px;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    // background: red;
    // background: blue;
    .l {
      width: 120px;
      height: 100%;
      // background: red;
      margin-right: 8px;
    }
    .r {
      justify-content: space-between;

      .r-item {
        width: 190px;
        height: 30px;
        background: url("~@/assets/newImage/cszl/rbg.png") no-repeat;
        align-items: center;
        box-sizing: border-box;
        padding-right: 21px;
        padding-left: 16px;
        color: #fff;
        font-size: 14px;
        .a {
          align-items: center;
          .q {
            width: 10.37px;
            height: 6.32px;
            border-radius: 2px;
            margin-right: 4px;
          }
        }
      }
    }
  }
}
</style>
