<!--
 * @Author: your name
 * @Date: 2022-04-19 14:38:28
 * @LastEditTime: 2022-04-21 17:25:10
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Left/CharBoxA.vue
-->
<template>
  <div class="chars-box all-flex-h">
    <div class="title">燃气事故排名</div>
    <div class="btn-wrapper">
      <div
        v-for="(item, index) in btnArr"
        :key="item"
        class="left"
        :class="{ active: btnV == index }"
        @click="btnClick(index)"
      >
        {{ item }}
      </div>
    </div>
    <div class="num-wrapper" v-if="false">
      <div class="left">
        <span class="text">隐患总数</span><span class="num">12</span>件
      </div>
      <div class="right">
        <span class="text">已整改</span><span class="num">10</span>件
      </div>
    </div>

    <div class="chars" ref="myChartWidth">
      <!-- <Chars :options="bottomOptions()" /> -->
      <Chars :options="options" />
    </div>
  </div>
</template>

<script>
import Chars from "@/components/allCharsCom/Chars";

export default {
  name: "",
  components: {
    Chars,
  },
  data() {
    return {
      btnArr: ["事故原因", "事故类型", "隐患来源"],
      btnV: 0,
      options: {},
      bottomData: [
        { name: "裂缝", value: 20, color: "#604AFF" },
        { name: "管道称重", value: 30, color: "#FFC337" },
        { name: "其他", value: 40, color: "#86FF5B" },
        { name: "腐蚀", value: 99, color: "#03C4F1" },
        { name: "漏气", value: 18, color: "#1F8DF3" },
      ],
    };
  },
  mounted() {
    this.bottomOptions();
  },
  methods: {
    btnClick(index) {
      this.btnV = index;
      if (index === 2) {
        this.bottomData = [
          { name: "裂缝", value: 10, color: "#604AFF" },
          { name: "管道称重", value: 20, color: "#FFC337" },
          { name: "其他", value: 100, color: "#86FF5B" },
          { name: "腐蚀", value: 99, color: "#03C4F1" },
          { name: "漏气", value: 18, color: "#1F8DF3" },
        ];
      } else if (index === 1) {
        this.bottomData = [
          { name: "裂缝", value: 40, color: "#604AFF" },
          { name: "管道称重", value: 30, color: "#FFC337" },
          { name: "其他", value: 20, color: "#86FF5B" },
          { name: "腐蚀", value: 19, color: "#03C4F1" },
          { name: "漏气", value: 50, color: "#1F8DF3" },
        ];
      } else {
        this.bottomData = [
          { name: "裂缝", value: 20, color: "#604AFF" },
          { name: "管道称重", value: 30, color: "#FFC337" },
          { name: "其他", value: 40, color: "#86FF5B" },
          { name: "腐蚀", value: 99, color: "#03C4F1" },
          { name: "漏气", value: 18, color: "#1F8DF3" },
        ];
      }
      this.bottomOptions();
    },
    bottomOptions() {
      const rich = {};
      this.bottomData
        .map((item) => ({
          fontsize: 12,
          color: item.color,
        }))
        .forEach((item, index) => {
          rich[`dataIndex${index}`] = item;
        });
      this.options = {
        series: {
          type: "pie",
          radius: ["68%", "80%"],
          left: "20",
          right: "20",
          color: this.bottomData.map((item) => item.color),
          itemStyle: {
            borderWidth: 2,
            borderRadius: 10,
            borderColor: "#fff",
          },
          label: {
            alignTo: "edge",
            // formatter: "{name|{b}}\n{num|{c} 个}",
            formatter: (parm) => {
              return `{dataIndex${parm.dataIndex}|${parm.data.name}}`;
            },
            minMargin: 5,
            edgeDistance: 10,
            lineHeight: 15,
            rich,
          },
          labelLine: {
            length: 15,
            length2: 0,
            maxSurfaceAngle: 80,
          },
          data: this.bottomData,
        },
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.chars-box {
  width: 100%;
  height: 100%;
  position: relative;
  .title {
    font-size: 16px;
    margin: 22px 0 11px 19px;
    font-weight: 600;

  }
  .btn-wrapper {
    display: flex;
    font-size: 12px;
    justify-content: flex-end;
    margin-right: 34px;
    margin-bottom: 12px;
    > div {
      border-radius: 3px 3px 3px 3px;
      border: 1px solid #c5c5c5;
      padding: 3px 6px;
      cursor: pointer;
      margin-left: 3px;
      &.active {
        background-color: #1a91ff;
        color: #fff;
        border: 1px solid #1a91ff;
      }
      &:hover {
        background: #1a91ffcc;
        color: #fff;
        border: 1px solid #3291ebcc;
      }
    }
  }
  // .num-wrapper {
  //   position: absolute;
  //   display: flex;
  //   top: 100px;
  //   right: 50px;
  //   > div {
  //     font-size: 12px;
  //     margin-left: 19px;
  //     display: inline-block;
  //     position: relative;
  //     .text {
  //       margin-right: 10px;
  //     }
  //     .num {
  //       margin-right: 2px;
  //     }
  //     &.left {
  //       &::before {
  //         content: "";
  //         position: absolute;
  //         width: 6px;
  //         height: 6px;
  //         background-color: #1a91ff;
  //         border-radius: 50%;
  //         left: -10px;
  //         top: 50%;
  //         margin-top: -3px;
  //       }
  //       &::after {
  //       }
  //       .num {
  //         color: #1a91ff;
  //       }
  //     }
  //     &.right {
  //        &::before {
  //         content: "";
  //         position: absolute;
  //         width: 6px;
  //         height: 6px;
  //         background-color: #ffcb44;
  //         border-radius: 50%;
  //         left: -10px;
  //         top: 50%;
  //         margin-top: -3px;
  //       }
  //       .num {
  //         color: #ffcb44;
  //       }
  //     }
  //   }
  // }
  .chars {
    flex: 1;
    // background-color: red;
  }
}
</style>
