<template>
  <div id="fan_info">
    <div class="title">风机</div>
    <div class="fans">
      <div class="fan-item">
        <!-- echarts -->
        <div class="echart" ref="info1"></div>
        <!-- 风机名 -->
        <div class="fan-name">一号风机</div>
        <!-- 功能 -->
        <div class="option-nav">
          <div class="state " :class="{ 'blue-state': isStart }">
            <div :class="{ stopColor: !isStart }">
              <div :style="{ backgroundImage: 'url(' +getImageUrl(stateIcon1)+')' }" class="state-icon"></div>
              状态：{{ state }}
            </div>
            <div class="switch">
              <div
                  id="auto"
                  :class="{ active: isStart }"
                  @click="isStart = true"
              >
                启动
              </div>
              <div
                  id="stop"
                  :class="{ active: !isStart }"
                  @click="isStart = false"
              >
                停止
              </div>
            </div>
          </div>
          <div class="power">
            <div class="check-box">
              <el-radio-group v-model="isSAuto1" 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="fan01_option.series[0].data[0].value"
                  :disabled="isSAuto1 === 'true'"
              /></span>
            </div>
          </div>
        </div>
      </div>
      <div class="fan-item">
        <!-- echarts -->
        <div class="echart" ref="info2"></div>
        <!-- 风机名称 -->
        <div class="fan-name">二号风机</div>
        <!-- 功能 -->
        <div class="option-nav">
          <div class="state" :class="{ 'blue-state': isStart2 }">
            <div :class="{ stopColor: !isStart2 }">
              <div :style="{ backgroundImage: 'url(' +getImageUrl(stateIcon2)+')' }" class="state-icon"></div>
              状态：{{ state2 }}
            </div>
            <div class="switch">
              <div
                  :class="{ active: isStart2 }"
                  @click="isStart2 = true"
              >
                启动
              </div>
              <div
                  :class="{ active: !isStart2 }"
                  @click="isStart2 = false"
              >
                停止
              </div>
            </div>
          </div>
          <div class="power">
            <div class="check-box">
              <el-radio-group v-model="isSAuto2" 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="fan02_option.series[0].data[0].value"
                  :disabled="isSAuto2 === 'true'"
              /></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import {ref, reactive, onMounted, computed, watch} from "vue";
const props = defineProps({
  list: Array
});
const socketData = ref()
watch(() => props.list, (now, old) => {
  // console.log('socketDatawatch', now, old)
  // socketData.value=now
}, {deep: true});

onMounted(handleOnMounted);

// 一号风机echarts实例
const info1 = ref(null);
let Echarts_info1 = null;
// 二号风机实例
const info2 = ref(null);
let Echarts_info2 = null;
const 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: 50,
          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}",
      },
    },
  ],
};
const option2 = {
  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: 500,
          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}",
      },
    },
  ],
};

const fan01_option = reactive(option, {deep: true});
const fan02_option = reactive(option2, {deep: true});

function handleOnMounted() {
  Echarts_info1 = echarts.init(info1.value);
  Echarts_info1.setOption(fan01_option);
  //  挂载二号风机实例
  Echarts_info2 = echarts.init(info2.value);
  Echarts_info2.setOption(fan02_option);
}

watch(fan01_option, () => {
  Echarts_info1.setOption(fan01_option);
});
watch(fan02_option, () => {
  Echarts_info2.setOption(fan02_option);
});

// 一号风机启动停止按钮
const isStart = ref(true);
let state = computed(() => {
  return isStart.value ? "运行" : "故障";
  // return socketData[0].running ? "运行" : "故障";
});
const stateIcon1 = computed(() =>
    isStart.value
        ? "blue-state-icon.png"
        : "red-state-icon.png"
);

const isStart2 = ref(false);
let state2 = computed(() => {
  return isStart2.value ? "运行" : "故障";
});
const stateIcon2 = computed(() =>
    isStart2.value
        ? "blue-state-icon.png"
        : "red-state-icon.png"
);
let is = ref("isInput");
// 功率是否自动
let isSAuto1 = ref("false");
let isSAuto2 = ref("false");
const getImageUrl = (name) => {
  return new URL(`../../../assets/images/fanInfo/${name}`, 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 {
  height: 521px;
  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;

  .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;

              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: 20px;
  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>
