<template>
  <div id="fan_info">
    <div class="title">风机</div>
    <div class="fans">
      <div class="fan-item" v-for="(item,index) in socketData" :key="item.equipmentId">
        <!-- echarts -->
        <div class="echart"></div>
        <!-- 风机名 -->
        <div class="fan-name">{{ changeNum(index + 1) }}号风机</div>
        <!-- 功能 -->
        <div class="option-nav">
          <div class="state " :class="{ 'blue-state': !item.breakdown }">
            <div :class="{ stopColor: item.breakdown }">
              <div :style="{ backgroundImage: 'url(' +getImageUrl(item.breakdown)+')' }" class="state-icon"></div>
              状态：{{ item.breakdown ? '故障' : '运行' }}
            </div>
            <div class="switch">
              <div
                  id="auto"
                  :class="{ active: item.running }"
                  @click="item.running = true"
              >
                启动
              </div>
              <div
                  id="stop"
                  :class="{ active: !item.running }"
                  @click="item.running = false"
              >
                停止
              </div>
            </div>
          </div>
          <div class="power">
            <div class="check-box">
              <el-radio-group v-model="item.autoMode" class="radio-group">
                <el-radio :label="true">自动</el-radio>
                <el-radio :label="false">手动</el-radio>
              </el-radio-group>
            </div>
            <div class="edit-power">
              <span style="color: white">当前功率</span>
              <span class="units"
              ><input
                  type="number"
                  min="0"
                  v-model="item.frequencyFeedback"
                  :disabled="item.autoMode"
              /></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";

const props = defineProps({
  list: Array,
  fanData: Array
});
const socketData = ref()
let Echarts_info1 = null;
let fan01_option = reactive();

watch(() => props.fanData, (now) => {
  getBasicData(now.frequencyChangerList)
}, {deep: true});
watch(() => props.list, (now) => {
  socketData.value.forEach(item => {
    now.forEach(newItem => {
      if (item.equipmentId === newItem.equipmentId) {
        if (newItem.frequencyFeedback) {
          item.frequencyFeedback = newItem.frequencyFeedback
        }
      }
    })
  })
  handleOnMounted()
}, {deep: true});

onMounted(() => {
  setTimeout(() => {
    nextTick(() => {
      handleOnMounted()
    })
  }, 100);
});
const getImage = (type) => {
  switch (type) {
    case false:
      return "blue-state-icon.png";
    case true:
      return "red-state-icon.png";
  }
}
const changeNum = (index) => {
  switch (index) {
    case 1:
      return '一';
    case 2:
      return '二';
    case 3:
      return '三';
  }
}
const getBasicData = (data) => {
  let tranObj = {}
  let tranArr = []
  data.map(item => {
    tranObj = {
      equipmentId: item.equipmentId,
      autoMode: item.autoMode,//自动模式
      breakdown: item.breakdown,//故障
      running: item.running,//启动,
      frequencyFeedback: item.frequencyFeedback//当前功率
    }
    tranArr.push(tranObj)
  })
  socketData.value = tranArr
}

const handleOnMounted = () => {
  const chart = document.getElementsByClassName('echart');
  for (let i = 0; i < chart.length; i++) {
    Echarts_info1 = echarts.init(chart[i]);
    fan01_option = {
      series: [
        {
          type: "gauge",
          startAngle: -120,
          endAngle: -420,
          pointer: {
            show: false,
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 10,
              borderColor: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#4BB10E", // 0% 处的颜色
                  },
                  {
                    offset: 0.25,
                    color: "#B1AD0E", // 100% 处的颜色
                  },
                  {
                    offset: 0.75,
                    color: "#B1880E", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#D77E01", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#4BB10E", // 0% 处的颜色
                  },
                  {
                    offset: 0.25,
                    color: "#B1AD0E", // 100% 处的颜色
                  },
                  {
                    offset: 0.75,
                    color: "#B1880E", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#D77E01", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              }
            },
          },
          max: 1000,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: true,
            splitNumber: 1,
            length: 10,
          },
          axisLabel: {
            show: false,
          },
          data: [
            {
              value: socketData.value[i].frequencyFeedback,
              fontSize: 2100,
              detail: {
                valueAnimation: true,
                offsetCenter: ["0%", "0%"],
                fontSize: 40,
                color: "white",
              },
            },
          ],
          axisLine: {
            lineStyle: {
              width: 3,
              color: [[1, "#155F7C"]],
            },
          },
          detail: {
            width: 100,
            height: 14,
            fontSize: 26,
            color: "inherit",
            formatter: "{value}",
          },
        },
      ],
    }
    fan01_option && Echarts_info1.setOption(fan01_option);
  }
}

const getImageUrl = (name) => {
  let icon = getImage(name)
  return new URL(`../../../assets/images/fanInfo/${icon}`, import.meta.url).href
}
</script>

<style lang="scss" scoped>
:deep( .el-radio__input.is-checked + .el-radio__label) {
  color: #38CAFB;
}

:deep( .el-radio__input.is-checked .el-radio__inner) {
  border-color: #062247;
  background: #38CAFB;
}

:deep( .el-radio__inner) {
  border: none;
  background: none;
}

:deep(.el-radio__inner::after) {
  display: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}

:deep( .el-radio__input) {
  width: 24px;
  height: 24px;
  border: 2px solid #38cafb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep( .el-radio__label) {
  font-size: 28px;
  font-family: MicrosoftYaHei;
  color: #38cafb;
  line-height: 37px;
}

#fan_info {
  min-height: 547px;
  max-height: 795px;
  height: 547px;
  width: 830px;
  position: absolute;
  z-index: 100;
  top: 184px;
  left: 68px;
  padding: 10px;
  background-image: url(../../../assets/images/fanInfo/bg.png);
  //clip-path: polygon(0% 0%, 40% 0%, 48% 15%, 100% 15%, 100% 100%, 0% 100%);
  color: #2fb0df;
  box-sizing: border-box;

  .title {
    width: 40%;
    text-align: left;
    font-size: 20px;
    padding: 0px 0px 0px 62px;
    font-size: 32px;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    color: #38cafb;
    line-height: 42px;
  }

  .fans {
    height: calc(100% - 30px);

    .fan-item {
      height: 50%;
      display: flex;
      font-size: 14px;

      .echart {
        height: 100%;
        width: 30%;
        margin: 0px 0px 0px 10px;
        position: relative;
      }

      .echart::after {
        content: "Hz";
        font-size: 24px;
        font-family: MicrosoftYaHei, MicrosoftYaHei;
        font-weight: bold;
        color: #ffffff;
        line-height: 31px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 60%);
      }

      .fan-name {
        width: 39px;
        height: 140px;
        font-size: 26px;
        font-family: MicrosoftYaHei;
        color: #38cafb;
        line-height: 35px;
        text-align: center;
        margin-right: 42px;
        transform: translateY(33%);
      }

      .option-nav {
        display: flex;
        width: 70%;

        .blue-state {
          > div:first-child:hover {
            color: #fff;
            background-color: #127399;
            width: 180px;
            padding-left: 5px;
            border-radius: 8px;

            > div:first-child {
              background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
            }
          }
        }

        .state {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          font-size: 26px;
          font-family: MicrosoftYaHei;
          color: #38cafb;
          line-height: 35px;
          gap: 40px;

          > div:first-child {
            display: flex;
            align-items: center;
            padding-left: 5px;

            > div {
              margin-right: 10px;
            }
          }

          img {
            margin-right: 4px;
            transform: translateY(15%);
          }

          .state-icon {
            width: 26px;
            height: 26px;
          }

          .switch {
            display: flex;
            width: 160px;
            height: 40px;
            border-radius: 22px;
            border: 2px solid #0f82af;
            overflow: hidden;
            font-family: MicrosoftYaHei, MicrosoftYaHei;
            font-weight: bold;
            color: #127399;
            line-height: 35px;

            & > div {
              flex: 1;
              text-align: center;
              cursor: pointer;
            }
          }
        }

        .power {
          flex: 1.3;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 0px 20px;
          font-size: 28px;
          font-family: MicrosoftYaHei;
          color: #38cafb;
          line-height: 37px;
          gap: 33px;

          .edit-power {
            margin-top: 10px;

            input {
              width: 130px;
              height: 44px;
              border: 2px solid #0f82af;
              background: transparent;
              margin-left: 14px;
              outline:none;
              font-size: 28px;
              font-family: MicrosoftYaHei, MicrosoftYaHei;
              font-weight: bold;
              color: #38cafb;
              line-height: 37px;
            }
          }
        }
      }
    }
  }
}

.units {
  position: relative;
}

.units::after {
  content: "Hz";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  font-family: MicrosoftYaHei;
  color: #38cafb;
  line-height: 37px;
}

.active {
  color: white;
  background: #0f7da9;
}

.stopColor {
  color: red;
}

.stopColor:hover {
  color: #fff;
  width: 180px;
  background: #9B2222;
  border-radius: 8px;

  > div:first-child {
    background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
  }
}
</style>
