<template>
  <Module
    class="h-1/3"
    :loading="loading"
    :error="error"
    :info="bsMeta && bsMeta['machine']"
  >
    <template #title>机电主要设备统计(数量) <div class="Equipment-detail-skip"  @click="goEquipment">设备明细&nbsp;&nbsp;<i  class="el-icon-caret-right" ></i></div></template>
    <!-- <template #end>
      <span class="titbtn" @click="clickEndButton">
        <i class="el-icon-arrow-right"/>
      </span>
    </template> -->
    <div class="chart-container">
      <div class="pie-charts">
        <Ect :options="ectOpts" :default="0" />
      </div>
      <div class="ectOpts-leng">
        <div
          v-for="(item, index) in opDataNum"
          :key="index"
          class="ect-lecell"
        >
          <div class="elcll-left">
            <span
              class="colorbox"
              :style="{ background: opNumColor[index] }"
            ></span>
            <span class="elcll-text1">{{ item.name }}</span>
          </div>
          <div class="elcll-right">{{ item.showValue }}</div>
          <span class="ect-lecell-icon">
            <i class="el-icon-caret-top" />
          </span>
        </div>
      </div>
    </div>
    <!-- <teleport to="body" v-if="winInited">
      <div class="eq-model" :class="{ hide: !panelShow }">
        <div class="absolute z-10 inset-0" @click="panelShow = false"></div>
        <eqListWin class="z-50" :hide="!panelShow" />
      </div>
    </teleport> -->
  </Module>
</template>

<script>
import eqListWin from "./eqListWin.vue";
import { getDeviceCount } from "@/api/businessOverview"
import { mapState } from 'vuex'
import { formatThousand } from "@/utils/util"
import { generateKey } from "@/api/operation";
import { getLinke } from "@/api/chargeInfo";

export default {
  components: { eqListWin },
  data() {
    return {
      opDataNum: [],
      ectOpts: {},
      opNumColor: ["#98A2A6", "#3DC6FF", "#FFCE5A", "#00DDCC", "#4999FF"],
      panelShow: false,
      winInited: false
    }
  },
  computed: {
    ...mapState({
      selectLevel: state => state.road.selectLevel,
      selectRoadId: (state) => state.road.selectRoadId,
      routeName : (state) =>state.activeBaseStruct
    }),
    params() {
      return this.selectLevel + "&" + (this.selectRoadId || []).join(',')
    }
  },
  watch: {
    params(newVal) {
      this.getData()
    },
  },
  mounted() {
    this.getData()
  },
  methods: {
    async goEquipment(){
    generateKey().then((res) => {
    window.open(`http://183.64.175.153:8891/?tokenKey=${res.data}#/road-property/electromechanical/location`)
    });
      },


    clickEndButton() {
      this.panelShow = true
      this.winInited = true
    },
    async getData() {
      this.opDataNum = [];
      const data = await getDeviceCount(
        this.selectLevel,
        this.selectRoadId[this.selectLevel - 1]
      )
      if (data.msgContent) {
         this.opDataNum = [];
        data.msgContent.forEach((ele) => {
          this.opDataNum.push({
            name: ele.systemType,
            value: ele.deviceCount,
            showValue: formatThousand(ele.deviceCount)
          })
        })
      }
     this.getCharts();
    },
    getCharts() {
      this.ectOpts = {
        tooltip: {
          show: false,
        },
        color: this.opNumColor,
        series: [
          {
            name: "机电设备",
            type: "pie",
            radius: ["65%", "80%"],
            emphasis: {
              label: {
                show: true,
                formatter: function (val) {
                  return [
                    "{a|" + val.data.name + "}",
                    "",
                    "{b|" + val.data.showValue + "}",
                  ].join("\n");
                },
                rich: {
                  a: {
                    color: "#fff",
                    fontSize: 14,
                    height: 20,
                  },
                  b: {
                    color: "#fff",
                    lineHeight: 30,
                    fontSize: 26,
                    // fontWeight: 800,
                    marginTop: 10,
                    fontFamily: "DinNextRegular",
                  },
                },
                // fontSize: '40',
                // fontWeight: 'bold'
              },
            },
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              borderColor: "#030E15",
              borderWidth: 5,
            },
            data: this.opDataNum,
          },
        ],
      };
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
.titbtn {
  color: #ffe8c8;
  width: 50px;
  text-align: right;
  cursor: pointer;
}
.chart-container {
  width: 100%;
  height: 85%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .pie-charts {
    // width: vw(140);
    // height: vw(140);
    width: 45%;
    height: 100%;
    background: url("@/assets/images/curingBussiness/pie-bg.png") no-repeat;
    background-size: 100% auto;
    background-position: center;
    position: relative;
  }
  .ectOpts-leng {
    display: flex;
    flex-direction: column;
    justify-content: center;
    // width: vw(160);
    // height: vh(180);
    width: 55%;
    height: 100%;
    padding-left: 20px;
    padding-right: 40px;
  }
  .ect-lecell {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(59, 152, 219, 0.2);
    padding: 0 vw(10);
    margin-bottom: vh(15);
  }
  .ect-lecell:last-child{
    margin-bottom: 0;
  }
  .elcll-left {
    display: flex;
    align-items: center;
  }
  .colorbox {
    display: block;
    width: vw(10);
    height: vh(7);
    background: #3dc6ff;
    margin-right: 10px;
  }
  .elcll-text1 {
    font-size: 12px;
    color: #d5d7d9;
  }
  .elcll-right {
    font-size: 16px;
    font-family: "DinNextRegular";
  }
  .ect-lecell-icon {
    font-size: 13px;
    color: #3dc6ff;
    position: absolute;
    transform: rotate(45deg);
    right: -5px;
    top: -8px;
  }
}
.eq-model {
  background: rgba(0, 0, 0, 0.6);

  @apply fixed inset-0 z-50 transition-all ease-in-out duration-300 flex items-center justify-center;

  &.hide {
    background: rgba(0, 0, 0, 0);

    @apply pointer-events-none;
  }
}
.Equipment-detail-skip{
    position: absolute;
    display: inline-block;
   right: 20px;
  cursor:pointer;
}
</style>
