<!-- 标准起重机 -->
<template>
  <div class="container" v-loading="loading">

    <div class="device_info">

      <div class="alarm_container">

        <div style="display: flex;align-items: center;">
          <img style="height: 40px;" src="../../assets/img/device_detail_alarm_msg.png" />
          <div style="color: black;font-weight: bold;font-size: 18px;margin-left: 10px;">报警消息</div>
        </div>

        <div class="alarm_scroll">
          <div style="align-self: center;margin-top: 50px;color: #999999;" v-if="alarmMessageArr.arr?.length == 0">暂无报警记录
          </div>
          <Vue3SeamlessScroll :list="alarmMessageArr.arr" :step="0.3" :hover="true">
            <template v-for="item in alarmMessageArr.arr">
              <div class="alarm_msg_item">
                <div style="color: #999999;font-size: 12px;">{{ item.triggerTime }}</div>
                <div style="color: black;font-size: 14px;margin-top: 10px;">{{ item.message }}</div>
              </div>
            </template>
          </Vue3SeamlessScroll>
        </div>

      </div>


      <div class="device_container">

        <div>
          <div class="device_name">{{ deviceData.data.deviceInfo?.deviceName }}</div>
          <div style="color: #999999;font-size: 14px;margin-top: 40px;">设备型号</div>
          <div style="color: black;font-size: 14px;margin-top: 5px;">{{ deviceData.data.deviceInfo?.model }}</div>


          <div style="color: #999999;font-size: 14px;margin-top: 20px;">分类</div>
          <div style="color: black;font-size: 14px;margin-top: 5px;">{{ deviceData.data.deviceInfo?.category }}</div>



          <div style="color: #999999;font-size: 14px;margin-top: 20px;">设备注册号</div>
          <div style="color: black;font-size: 14px;margin-top: 5px;">{{ deviceData.data.deviceInfo?.registrationNo }}
          </div>


          <div style="color: #999999;font-size: 14px;margin-top: 20px;">使用证编号</div>
          <div style="color: black;font-size: 14px;margin-top: 5px;">{{ deviceData.data.deviceInfo?.useCertificateNo }}
          </div>

        </div>
        <div style="align-self: center;max-width: 679px;max-height: 240px;">
          <img style="width: 100%;height: 100%;" src="../../assets/img/device_detail_standard_conver.png" />
        </div>
      </div>

      <div class="electric_current_container">

        <div style="font-size: 18px;font-weight: bold;color: black;">电机电流</div>


        <div class="electric_current_list">
          <template v-for="item in electricCurrentArr.arr">
            <div class="electric_current_list_item">
              <div style="position: relative;width: 120px;height: 120px;">
                <el-progress color="#62DFA2" :show-text="false" :width="120" type="dashboard"
                  :percentage="getPercentage(item)"></el-progress>

                <div
                  style="display: flex;flex-direction: column;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);align-items: center;">
                  <span style="font-size: 17px;font-weight: bold;">
                    {{ item.value ?? '--' }}{{ item.unitName }}
                  </span>
                  <span style="font-size: 12px;margin-top: 7px;color: #7C7C7C;text-align: center;">
                    {{ item.groupName + item.variableName }}
                  </span>
                </div>
              </div>


            </div>

          </template>
        </div>

      </div>

    </div>

    <div class="data_list">

      <template v-for="item in deviceData.data.groupAndVariables">

        <div class="data_item" v-if="item.valueVariables.length > 0 || item.switchVariables.length > 0">
          <div style="display: flex;">
            <img src="../../assets/img/device_detail_line_1.png" />
            <div style="margin: 0 15px;color: black;font-weight: bold;">{{ item.groupName }}</div>
            <img src="../../assets/img/device_detail_line_2.png" />
          </div>


          <div class="gear_container" v-if="item.gear || item.stroke || item.weight">
            <div v-if="item.gear">
              <div style="color: #7C7C7C;font-size: 12px;">档位</div>
              <div class="gear">{{ formatGears(item.gear) }}</div>
            </div>

            <div v-if="item.stroke">
              <div style="color: #7C7C7C;font-size: 12px;">{{ item.mecType == 3 ? `高度` : `行程` }}</div>
              <div class="gear">{{ item.stroke.value ?? '--' }}{{ item.stroke.unit }}</div>
            </div>

            <div v-if="item.weight">
              <div style="color: #7C7C7C;font-size: 12px;">载荷</div>
              <div class="gear">{{ item.weight.value ?? '--' }}{{ item.weight.unit }}</div>
            </div>
          </div>


          <div class="center_switch_list" v-if="item.centerSwitchVariables.length > 0">
            <template v-for="(item2) in item.centerSwitchVariables">
              <div style="display: flex;flex-direction: column;align-items: center;">
                <div :class="['switch_light', getLight(item2)]"></div>
                <div class="variable_name" style="margin-top: 10px;">{{ item2.variableName }}</div>
              </div>
            </template>
          </div>

          <div class="switch_list" v-if="item.switchVariables.length > 0">
            <template v-for="(item2) in item.switchVariables">
              <div style="display: flex;flex-direction: column;align-items: center;">
                <div :class="['switch_light', getLight(item2)]"></div>
                <div class="variable_name" style="margin-top: 10px;">{{ item2.variableName }}</div>
              </div>
            </template>
          </div>

          <div class="value_variable_list">

            <template v-for="(item2) in item.valueVariables">
              <div style="display: flex;justify-content: space-between;margin-top: 20px;">
                <div class="variable_name">{{ item2.variableName }}</div>
                <div class="variable_value">{{ (item2.value ?? '--') + item2.unitName ?? '' }}</div>
              </div>
            </template>

          </div>

        </div>

      </template>

    </div>


  </div>
</template>

<script setup lang="ts">
import { getDevicesRealData, getRealAlarm } from '@/api/device/index'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import { formatGears, getLight, parseGear } from '@/utils/tools'

const props = defineProps({
  id: {
    type: String,
    default: '0'
  },
  deviceCode: {
    type: String,
    default: '0'
  }
})


const deviceId = ref('')
const deviceData: { data: any } = reactive({ data: {} })
const electricCurrentArr: { arr: any[] } = reactive({ arr: [] })
const alarmMessageArr: { arr: any[] } = reactive({ arr: [] })
onMounted(async () => {
  deviceId.value = props.id
  run()
  alarmRun()
})

/**
 * 获取当前进度
 * @param item 
 */
const getPercentage = (item) => {
  //进度条最大值
  const maxValue = 100
  //额定电流
  const rated = parseFloat(item.formula ?? '0')
  //当前值
  const value = parseFloat(item.value ?? '0')
  //进度
  const progress = (maxValue * value) / rated
  return progress
}

const { run, loading } = useRequest(
  () => getDevicesRealData({ deviceId: props.id }),
  {
    manual: true,
    onSuccess: (data: any) => {
      electricCurrentArr.arr = []
      data.groupAndVariables.forEach(item => {
        item.centerSwitchVariables = item.switchVariables.slice(0, 6)
        item.switchVariables = item.switchVariables.slice(6)

        item.currents.forEach(item2 => {
          item2.groupName = item.groupName
          electricCurrentArr.arr.push(item2)
        })
      });


      deviceData.data = data
      onSubscribe([`Json/${deviceData.data.deviceInfo.deviceCode}`], (topic: string, payload: any) => {
        parseData(payload)
      })
    }
  }
)


onUnmounted(() => {
  onUnsubscribe(`Json/${deviceData.data.deviceInfo.deviceCode}`)
  clearTimeout(timer.value)
})


const parseData = (payload: any) => {

  const jsonArray = JSON.parse(payload).Items
  for (var i = 0; i < jsonArray.length; i++) {
    const mqttValue = jsonArray[i].Value
    const mqttCode = jsonArray[i].Code
    console.log(mqttCode, mqttValue)
    const electricCurrent = electricCurrentArr.arr.find((f: any) => f.code == mqttCode)
    if (electricCurrent) {
      electricCurrent.value = formatValue(mqttValue, electricCurrent.translate)
      continue
    }

    for (let y = 0; y < deviceData.data.groupAndVariables.length; y++) {
      const group = deviceData.data.groupAndVariables[y];
      if (parseGear(group.gear, mqttCode, mqttValue)) {
        continue
      }
      const weight = group.weight
      if (weight?.code == mqttCode) {
        weight.value = formatValue(mqttValue, weight.translate)
        continue
      }

      if (weight?.light?.code == mqttCode) {
        weight.light.value = weight.light.isReverse != mqttValue
        continue
      }

      const stroke = group.stroke
      if (stroke?.code == mqttCode) {
        stroke.value = formatValue(mqttValue, stroke.translate)
        continue
      }

      const grid = group.centerSwitchVariables.find((f: any) => f.code == mqttCode)
      if (grid) {
        grid.value = (grid.isReverse.toString()) != mqttValue
        continue
      }

      const switchs = group.switchVariables.find((f: any) => f.code == mqttCode)
      if (switchs) {
        switchs.value = (switchs.isReverse.toString()) != mqttValue
        continue
      }

      const variable = group.valueVariables.find((f: any) => f.code == mqttCode)

      if (variable) {
        if (variable.variableType == 10) {
          variable.value = mqttValue === 'true' || mqttValue === true ? '开启' : '闭合'
        } else {
          variable.value = formatValue(mqttValue, variable.translate)
        }
        continue
      }
    }

  }
}

const timer: any = ref('')

const { run: alarmRun } = useRequest(
  () => getRealAlarm({ deviceId: props.id }),
  {
    manual: true,
    onSuccess: (data: any) => {
      alarmMessageArr.arr = data
      timer.value = setTimeout(() => {
        alarmRun()
      }, 1000);
    }
  }
)



</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.device_info {
  width: 100%;
  display: flex;
  height: 316px;
}

.alarm_container {
  display: flex;
  flex-direction: column;
  width: 330px;
  height: 100%;
  overflow: hidden;
  background: #FFFDFC linear-gradient(0deg, #FFFDFC, #FFE7ED);
  border-radius: 10px;
  padding: 20px;
}

.alarm_scroll {
  width: 100%;
  overflow: hidden;
  margin-top: 10px;
  display: flex;
  flex-direction: column;

  .alarm_msg_item {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }
}


.device_container {
  display: flex;
  height: 100%;
  width: calc(100% - 700px);
  background: #FFFFFF;
  border-radius: 10px;
  margin-left: 20px;
  padding: 20px;
  justify-content: space-between;
}

.device_name {
  color: black;
  font-weight: bold;
  font-size: 24px;
}

.electric_current_container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 330px;
  background: #FFFFFF;
  border-radius: 10px;
  margin-left: 20px;
  padding: 20px 10px 20px 20px;
}

.electric_current_list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 20px;
  gap: 10px 20px;
  overflow-y: auto;
}

.electric_current_list_item {
  width: 100%;
  display: flex;
}

:deep(.el-progress) {
  path:first-child {
    stroke: #ECF7F7;
  }
}

.data_list {
  margin-top: 20px;
  display: flex;
  height: 100%;
  width: 100%;
  max-width: 1920px;
  overflow-x: auto;
}


.data_item {
  background: #FFFFFF;
  min-width: 350px;
  border-radius: 10px;
  padding: 20px;
  margin-right: 20px;
  margin-bottom: 50px;
  display: flex;
  height: fit-content;
  flex-direction: column;
}

.gear_container {
  justify-content: space-evenly;
  border: 1px solid #E7E9EA;
  border-radius: 5px;
  padding: 20px;
  margin-top: 30px;
  display: flex;
}

.gear {
  color: black;
  font-weight: bold;
  margin-top: 5px;
}

.center_switch_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 30px;
  gap: 20px 10px;
  justify-content: center;
}

.switch_light {
  width: 60px;
  height: 5px;
  background: #6AD28C;
  border-radius: 3px;


  &.gray {
    background: #ACB1B8
  }

  &.green {
    background: #6AD28C
  }

  &.red {
    background: #D32E26
  }

  &.yellow {
    background: #F49F51
  }
}

.variable_name {
  color: #7C7C7C;
  font-size: 14px;
}

.variable_value {
  color: black;
  font-weight: bold;
  font-size: 14px;
}

.switch_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 40px;
  gap: 10px;
}

.value_variable_list {
  display: flex;
  flex-direction: column;
}
</style>
