<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2023-08-08 13:30:02
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2024-01-02 10:44:37
 * @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-d-b">
    <!-- <div class="top">
      <Title :text="titleText" />
    </div> -->
    <div class="container flex-b">
      <div class="l">
        <Chars :options="options" />
      </div>
      <div class="r flex-d-b">
        <div
          class="r-item flex-b"
          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 :title="'隐患' + item.value" class="b zzz">
            {{ "隐患" + item.value }}
          </div>
          <div v-if="item.value2" class="c">{{ "占比" + item.value2 }}%</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import Title from "@/components/Title.vue";
import Chars from "./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 ["#F9B136", "#00DAF0", "#0289FF", "rgba(249, 177, 54, 1)"];
      },
    },
    // 中间文字是否显示
    centerTextShow: {
      type: Boolean,
      default: false,
    },
    centerText: {
      type: String,
      default: "用户数量",
    },
  },
  data() {
    return {
      options: {},
    };
  },
  watch: {
    charsArr: {
      handler(val) {
        // console.log("chars", val);
        this.charsChange(val, this.color);
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      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,
        title: {
          text:
            this.charsArr[0].value +
            this.charsArr[1].value +
            this.charsArr[2].value,
          textStyle: {
            color: "#2CFFFF",
            fontSize: 20,
            fontWeight: 800,
          },
          subtext: "用户隐患",
          subtextStyle: {
            color: "#ffffff",
            fontSize: 14,
          },
          itemGap: 3,
          left: "center",
          top: "25%",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["85%", "100%"],
            //  radius: "100%",
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            hoverAnimation: 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;
  // 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: 130px;
      // width: 128px;
      // height: 125px;
      // height: 100%;
      flex: 1;
      // background: red;
      // margin-right: 16px;
    }
    .r {
      justify-content: space-between;
      flex: 1;
      .r-item {
        width: 261px;
        height: 24px;
        // background: url("~@/assets/newImage/cszl/rbg.png") no-repeat;
        // background: rgba(15, 114, 135, 0.11);
        border-radius: 5px;
        align-items: center;
        box-sizing: border-box;
        padding-right: 10px;
        padding-left: 10px;
        color: #fff;
        font-size: 12px;
        > div {
          // width: 50px;
          width: 30%;
          text-align: center;
        }
        .a {
          align-items: center;
          // width: 180px;

          .q {
            width: 10.37px;
            height: 6.32px;
            border-radius: 2px;
            margin-right: 8px;
          }
        }
        .b {
          // color: rgba(19, 250, 223, 1);
          // width: 50px;
          text-align: center;
        }
        .c {
          text-align: right;
        }
      }
    }
  }
}
</style>
