<template>
  <div class="device-info-box" :class="{ 'grayed-out': [0, 3, 8].includes(online) }">
    <!-- 标题 -->
    <div class="device-title">
      <div>
        {{ title + "/" }}<span class="subhead">{{ subhead }}</span>
      </div>
      <div v-if="isHistory" class="history-btn" @click="openHistoryData()">历史数据 ></div>
    </div>
    <!-- 内容 -->
    <div
      v-if="deviceData.length > 0"
      class="device-content"
      v-loading="loading"
      element-loading-text="Loading..."
      :element-loading-spinner="svg"
      element-loading-svg-view-box="-10, -10, 50, 50"
      element-loading-background="rgba(33, 42, 90, 0.8)">
      <div v-for="(item, index) in deviceData" :key="index" class="device-item">
        <div class="name">{{ item.switchName }}</div>
        <div class="controller-value">
          <el-switch
            v-if="typeof item.openStatus === 'boolean'"
            v-model="item.openStatus"
            @change="handleSwitchChange($event, item.index)"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
          <div v-else class="device-value">{{ item.openStatus }}</div>
        </div>
      </div>
    </div>
    <div v-else class="empty"><div>设备未激活</div></div>
  </div>

  <!-- 历史数据弹窗 -->
  <controller-history-dialog ref="historyRef" />
</template>

<script setup>
import { controlSwitch } from "@/api/screen/screen"
import ControllerHistoryDialog from "./ControllerHistoryDialog.vue"
const { proxy } = getCurrentInstance()

const props = defineProps({
  title: {
    type: String,
    default: "塘口",
  },
  subhead: {
    type: String,
    default: "设备01",
  },
  data: {
    type: Array,
    default: () => [
      { switchName: "控-开关1", openStatus: true },
      { switchName: "控-开关2", openStatus: false },
      { switchName: "控-开关3", openStatus: true },
      { switchName: "控-开关4", openStatus: false },
      { switchName: "参数", openStatus: "23" },
    ],
  },
  isHistory: {
    type: Boolean,
    default: false,
  },
  deviceId: {
    type: String,
    default: "",
  },
  iotId: {
    type: String,
    default: "",
  },
  online: {
    type: Number,
    default: null,
  },
})

const emit = defineEmits(["change"])

const historyRef = ref(null)

const deviceData = ref([...props.data])

const openHistoryData = () => {
  historyRef.value.show(props.deviceId)
}
const loading = ref(false)
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
let timer = null
const handleSwitchChange = (value, index) => {
  controlSwitch({
    index: index,
    iotId: props.iotId,
    status: value ? 1 : 0,
  }).then(res => {
    if (timer) {
      clearTimeout(timer)
    }
    loading.value = true
    timer = setTimeout(() => {
      proxy.$modal.msgSuccess(res.msg)
      emit("change")
      loading.value = false
    }, 2000)
  })
}

watch(
  () => props.data,
  (newVal, oldVal) => {
    deviceData.value = [...newVal]
  },
  { deep: true }
)
</script>

<style lang="scss" scoped>
.device-info-box {
  width: 32%;
  padding: 25px 10px 15px;
  background-image: url("../../../assets/scream/device_item_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.grayed-out {
  filter: grayscale(100%);
  opacity: 0.6;
  pointer-events: none;
}

.device-title {
  width: 100%;
  padding-right: 12px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #fff;
  position: relative;
  padding-left: 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 5px;
  background: linear-gradient(90deg, rgba(22, 104, 215, 0.95) 0%, rgba(22, 104, 215, 0.08) 100%);

  .subhead {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    color: #ffffff;
  }

  .history-btn {
    font-weight: 400;
    letter-spacing: 0px;
    opacity: 0.5;
    cursor: pointer;

    &:hover {
      opacity: 1;
    }
  }
}

.device-title ::before {
  content: "";
  width: 3px;
  height: 15px;
  background-color: #ffa840;
  position: absolute;
  left: 0;
  top: 8px;
  z-index: 2;
}

.device-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;

  .device-item {
    width: 30%;
    margin-bottom: 10px;
    margin-right: 1.6%;
    margin-left: 1.6%;
    height: 72px;
    min-height: 72px;
    background-color: #1677ff29;
    color: #ffffffe6;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .name {
      opacity: 0.8;
      font-size: 14px;
      margin-left: 10px;
      height: 30px;
    }
    .device-value {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      margin-right: 10px;
      letter-spacing: 1px;
      color: #ffa840;
      font-size: 18px;
    }
    .controller-value {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      margin-right: 10px;
    }
  }
}

.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 164px;
  font-size: 16px;
  letter-spacing: 5px;
}
</style>
