<template>
  <div class="screen-dialog">
    <el-dialog :title="title" v-model="open" width="1600px">
      <div
        style="height: 745px"
        v-loading="loading"
        element-loading-text="Loading..."
        :element-loading-spinner="svg"
        element-loading-svg-view-box="-10, -10, 50, 50"
        element-loading-background="rgba(34, 45, 91)">
        <!-- <div v-if="datas.length === 0" class="empty"><div>暂无历史数据</div></div>
        <!-- 选择区 -->
        <div class="query-box">
          <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
            <el-form-item label="时间" prop="day" class="screen-select">
              <div class="query-btn">
                <el-select v-model="queryParams.day" popper-class="optionCls" style="width: 140px">
                  <el-option v-for="item in dayOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-button type="primary" icon="Search" @click="getCompareData">搜索</el-button>
              </div>
            </el-form-item>
            <el-form-item label="设备" prop="deviceIds">
              <div class="check-box-group">
                <el-checkbox-group v-model="queryParams.deviceIds">
                  <el-checkbox v-for="device in deviceOption" :key="device.id" :label="device.label" :value="device.value" />
                </el-checkbox-group>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <!-- 图表区域 -->
        <div
          class="chart-box"
          v-loading="chartLoading"
          element-loading-text="Loading..."
          :element-loading-spinner="svg"
          element-loading-svg-view-box="-10, -10, 50, 50"
          element-loading-background="rgba(36, 49, 112)">
          <compare-line-chart v-for="data in compareData" width="510px" height="250px" :title="data.title" :feilds="data.feilds" :datas="data.datas" :suffix="data.suffix"></compare-line-chart>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { getEquipmentList, getCompare } from "@/api/screen/screen"
import CompareLineChart from "./CompareLineChart.vue"
import { ref } from "vue"
const open = ref(false)
const title = ref("数据对比")

const loading = ref(false)
const chartLoading = 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)"/>
      `

const queryParams = ref({
  day: 1,
  deviceIds: [],
})
const dayOption = [
  { label: "1天", value: 1 },
  { label: "3天", value: 3 },
  { label: "7天", value: 7 },
]
const deviceOption = ref([])

// 查看
const show = () => {
  open.value = true
  loading.value = true
  getEquipmentList({ deviceType: "1" })
    .then(res => {
      deviceOption.value = res.data.map(item => {
        return {
          label: item.pondName + "/" + item.deviceName,
          value: item.id,
        }
      })

      // deviceOption.value = generateDeviceOptionTestData(50);
      // 默认选中第一个
      queryParams.value.deviceIds = [deviceOption.value[0].value]
      loading.value = false
    })
    .then(() => {
      getCompareData()
    })
    .finally(() => {
      loading.value = false
    })
}

// 取消
const cancel = () => {
  open.value = false
}

// 获取对比数据
const compareData = ref([])
const getCompareData = () => {
  chartLoading.value = true
  getCompare(queryParams.value)
    .then(res => {
      let feilds = ["名称"]
      compareData.value = []

      res.data.forEach(item => {
        feilds.push(item.deviceName)
      })

      const dataKeys = ["dissolvedOxygen", "temperature", "saturability", "ph", "salinity"]
      const dataTitles = ["溶解氧", "水温", "饱和度", "ph", "盐度"]
      const dataSuffixes = ["mg/L", "℃", "%", "", "g/L"]
      dataKeys.forEach((key, keyIndex) => {
        const title = dataTitles[keyIndex]
        const suffix = dataSuffixes[keyIndex]

        const dataEntries = res.data.map((item, itemIndex) => {
          const history = item.history
          return history.map(data => {
            const entry = {
              name: data.day + " " + data.time,
            }
            entry[`value${itemIndex + 1}`] = data[key]
            return entry
          })
        })

        // 合并所有设备的历史数据
        const mergedData = dataEntries.reduce((acc, curr) => {
          curr.forEach((data, dataIndex) => {
            if (!acc[dataIndex]) {
              acc[dataIndex] = { ...data }
            } else {
              acc[dataIndex] = { ...acc[dataIndex], ...data }
            }
          })
          return acc
        }, [])

        compareData.value.push({
          title,
          suffix,
          feilds: feilds,
          datas: mergedData,
        })
      })
    })
    .finally(() => {
      chartLoading.value = false
    })
}

defineExpose({
  show,
})
</script>

<style lang="scss" scoped>
.el-dialog:not(.is-fullscreen) {
  margin-top: 8vh !important;
}
.query-box {
  background-color: #182d5e;
  border-radius: 10px;
  padding-top: 18px;

  .query-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-right: 15px;
  }

  :deep(.el-form-item) {
    width: 100%;
  }

  :deep(.el-form-item__label) {
    color: #fff;
  }

  // 复选框
  .check-box-group {
    width: 100%;
    height: 90px;
    overflow: auto;
    border-radius: 10px;
    padding: 10px 10px 10px 15px;
    margin-right: 10px;
    background-color: #142550;

    /* 自定义滚动条样式 */
    &::-webkit-scrollbar {
      width: 3px; /* 滚动条宽度 */
    }

    &::-webkit-scrollbar-track {
      background: rgba(7, 22, 52, 0.9); /* 滚动条轨道背景色 */
    }

    &::-webkit-scrollbar-thumb {
      background: #283d88; /* 滚动条滑块背景色 */
      border-radius: 4px; /* 滑块圆角 */
    }

    &::-webkit-scrollbar-thumb:hover {
      background: #4268ce; /* 滑块悬停时的背景色 */
    }
  }
  :deep(.el-checkbox__label) {
    color: #fff;
  }
}

.chart-box {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  border-radius: 10px;
  height: 540px;
  margin-top: 20px;
  padding-top: 18px;
  padding-left: 25px;
}

.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 20px;
  letter-spacing: 5px;
  color: #fff;
}
</style>
