<template>
  <div class="device-info-box">
    <!-- 标题 -->
    <div class="device-title">
      <div>
        {{ title + "/" }}<span class="subhead">{{ subhead }}</span>
      </div>
    </div>
    <!-- 内容 -->
    <div class="device-content">
      <div class="device-item" v-for="(item, index) in deviceData" :key="index" @click="handleClick(index, item.code)">
        <div :class="{ value: true, active: item.isActive }">{{ item.value || "-" }}</div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>

    <div v-if="datas.length === 0" class="empty"><div>暂无历史数据</div></div>
    <screen-line-chart v-else :title="chartTitle" :feilds="feilds" :datas="datas" :suffix="chartSuffix"></screen-line-chart>
  </div>
</template>

<script setup>
import ScreenLineChart from "./ScreenLineChart.vue"
const props = defineProps({
  title: {
    type: String,
    default: "塘口一",
  },
  subhead: {
    type: String,
    default: "设备01",
  },
  data: {
    type: Array,
    default: () => [
      { name: "溶解氧 (mg/L)", value: "12", isActive: true },
      { name: "水温 (℃)", value: "36℃", isActive: false },
      { name: "饱和度 (%)", value: "12", isActive: false },
      { name: "PH", value: "12", isActive: false },
      { name: "盐度 (g/L)", value: "", isActive: false },
    ],
  },
  chartData: {
    type: Object,
    default: () => {},
  },
})

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

const handleClick = (index, code) => {
  const currentActiveIndex = deviceData.value.findIndex(item => item.isActive)
  if (currentActiveIndex !== -1) {
    deviceData.value[currentActiveIndex].isActive = false
  }
  deviceData.value[index].isActive = true

  getFeilds(code)
  getChartData(code)
}

// 获取图表feilds
const feilds = ref(["名称", "溶解氧"])
const getFeilds = code => {
  switch (code) {
    case "ph":
      feilds.value = ["名称", "PH"]
      break
    case "temperature":
      feilds.value = ["名称", "水温"]
      break
    case "saturability":
      feilds.value = ["名称", "饱和度"]
      break
    case "salinity":
      feilds.value = ["名称", "盐度"]
  }
}

// 图表title
const chartTitle = ref("溶解氧")
const chartSuffix = ref("")

// 获取图表数据
const datas = ref([])
const getChartData = code => {
  chartTitle.value = props.chartData[code].title
  chartSuffix.value = props.chartData[code].suffix
  datas.value = props.chartData[code].data
}

watch(
  () => props.chartData,
  (newVal, oldVal) => {
    if (newVal !== undefined) {
      chartTitle.value = "溶解氧"
      chartSuffix.value = "mg/L"
      feilds.value = ["名称", "溶解氧"]
      datas.value = props.chartData["dissolvedOxygen"].data
    }
  },
  { deep: true }
)
</script>

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

.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;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;

  .device-item {
    width: 33%;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 15px;

    .name {
      font-size: 14px;
      margin-top: 5px;
    }

    .value {
      width: 73px;
      height: 73px;
      font-size: 16px;
      background-image: url("../../../assets/scream/block_bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      text-align: center;
      line-height: 73px;
      transition: all 0.5s ease;
      cursor: pointer;
    }

    .value.active {
      background-image: url("../../../assets/scream/block_bg_active.png"); /* 点击背景图片路径 */
    }
  }
}

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