<template>
  <div style="background-color: #0e122d;width: 100%;height: 1200px">
    <div class="screenTitle">
      <img
        :src="topBg"
        alt=""
      >
      <span>龙弛智慧隧道系统</span>
    </div>
    <div class="screen">
      <div class="leftBox">
        <div class="deviceSummary">
          <div class="deviceSummary_title">
            <img
              alt=""
              :src="Device"
              style="padding-left: 15px"
            >
            <span style="padding-left: 10px;">设备汇总</span>
          </div>
          <div class="deviceOptionBox">
            <div
              v-for="item in deviceTypeList"
              :key="item.id"
              class="deviceOptionRow"
            >
              <div
                v-for="item2 in item"
                :key="item2.ID"
                class="deviceOption"
              >
                <div style="width: 35px;height: 35px">
                  <el-tooltip
                    :content="item2.name"
                    placement="bottom"
                    effect="light"
                  >
                    <el-icon
                      size="35"
                      color="#1b92fd"
                    >
                      <component :is="item2.iconAddress" />
                    </el-icon>
                  </el-tooltip>
                </div>
                <el-text
                  style="padding-top: 8px;color: #ffffff"
                  size="small"
                >
                  数量：{{ item2.Count }}
                </el-text>
              </div>
            </div>
          </div>
        </div>
        <div class="warn">
          <div class="warnTitle">
            <img
              alt=""
              :src="Warn"
              style="padding-left: 15px"
            >
            <span style="padding-left: 10px;">警告列表</span>
          </div>
        </div>
      </div>
      <div class="centerBox">
        <div style="width: 1200px;height: 600px;border: 3px solid #1b92fd; padding: 2px">
          <Map />
        </div>
      </div>
      <div class="rightBox" />
    </div>
    <div class="centerBox_chart">
      <div class="centerBox_environment">
        <div class="centerBox_environment_title">
          <img
            :src="Setting"
            alt=""
            style="padding-left: 10px"
          >
          <span style="padding-left: 15px;">环境</span>
        </div>
        <div
          id="environment"
          class="centerBox_environment_chart"
          style="width: 600px"
        />
      </div>
      <div class="centerBox_environment">
        <div class="centerBox_environment_title">
          <img
            :src="Sunlight"
            alt=""
            style="padding-left: 10px"
          >
          <span style="padding-left: 15px;">光照度</span>
        </div>
        <div
          id="lamp"
          class="centerBox_environment_chart"
          style="width: 600px"
        />
      </div>
      <div class="centerBox_environment">
        <div class="centerBox_environment_title">
          <img
            :src="Power"
            alt=""
            style="padding-left: 10px"
          >
          <span style="padding-left: 15px;">电感</span>
        </div>
        <div
          id="main"
          class="inductanceBox"
        />
        <div class="custom-select">
          <select @change="changePowerDevice($event.target.value)">
            <option
              v-for="(item,index) in powerList"
              :key="item.ID"
              :value="index"
            >
              {{ item.name }}
            </option>
          </select>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Device from '@/assets/icons/device.png'
import { reactive, onMounted, watch } from 'vue'
// import environments from '@/assets/icons/environment.png'
// import fourWays from '@/assets/icons/fourWays.png'
// import inductance from '@/assets/icons/inductance.png'
// import singleLamp from '@/assets/icons/singleLamp.png'
import Setting from '@/assets/icons/setting.png'
import Sunlight from '@/assets/icons/sunlight.png'
import topBg from '@/assets/icons/topbg.png'
import Power from '@/assets/icons/power.png'
import Warn from '@/assets/icons/warn.png'
import Map from '@/view/screen/components/map.vue'
import * as echarts from 'echarts'
import { useScreenStore } from '@/pinia/modules/screen'
import { queryTunnelList } from '@/api/tunnel'
import { queryAllDeviceGenres } from '@/api/device'
const useScreen = useScreenStore()
// .................................................................
const deviceTypeList = reactive([])

const condition = {
  pageInfo: {
    page: 1,
    pageSize: 1000
  },
  name: '',
  regionId: 0,
  userId: 1
}

const lampData = reactive({})
const powerList = reactive([])
onMounted(() => {
  queryTunnelList(condition).then(res => {
    if (res.code === 0) {
      useScreen.setTunnelList(res.data)
      Object.assign(lampData, res.data.list[0])
      loading(lampData.envData)
      loadingLamp(lampData.envData)
      powerList.length = 0
      lampData.devices.forEach(item => {
        if (item.genre === 7) {
          powerList.push(item)
        }
      })
      if (powerList.length === 0) {
        loadInductance([])
        return
      }
      loadInductance(powerList[0].inductanceDetails)
    }
  })
  queryAllDeviceGenres().then(res => {
    if (res.code === 0) {
      const result = []
      for (let i = 0; i < res.data.length; i += 4) {
        result.push(res.data.slice(i, i + 4))
      }
      deviceTypeList.push(...result)
    }
  })
})

const loading = (list) => {
  const chartDom = document.getElementById('environment')
  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#ffffff'
        }
      },
    },
    legend: {
      data: [
        // '待下发','处置中','已完成'
        {
          name: '温度',
          textStyle: {
            color: '#0EFCFF' // 图例文字颜色
          }
        },
        {
          name: '湿度',
          textStyle: {
            color: '#1b92fd' // 图例文字颜色
          }
        }
      ],
    },
    xAxis: {
      type: 'time', // 使用时间类型的x轴
      boundaryGap: false,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#ffffff',
          width: 1,
          type: 'solid'
        }
      }
    },
    yAxis: {
      axisLine: {
        show: true,
        lineStyle: {
          color: '#ffffff',
          width: 1,
          type: 'solid'
        }
      },
      splitLine: {
        lineStyle: {
          color: ['#ffffff']
        }
      }
    },
    series: [
      {
        name: '温度',
        type: 'line',
        data: list.map(item => [new Date(item.CreatedAt).getTime(), item.temperature])
      },
      {
        name: '湿度',
        type: 'line',
        data: list.map(item => [new Date(item.CreatedAt).getTime(), item.humidity])
      }
    ],
  }

  option && myChart.setOption(option)
}

const loadingLamp = (list) => {
  const chartDom = document.getElementById('lamp')
  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#ffffff'
        }
      },
    },
    legend: {
      data: [
        {
          name: '光照度',
          textStyle: {
            color: '#ffffff' // 图例文字颜色
          }
        },
      ]
    },
    xAxis: {
      type: 'time', // 使用时间类型的x轴
      boundaryGap: false,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#ffffff',
          width: 1,
          type: 'solid'
        }
      }
    },
    yAxis: {
      axisLine: {
        show: true,
        lineStyle: {
          color: '#ffffff',
          width: 1,
          type: 'solid'
        }
      },
      splitLine: {
        lineStyle: {
          color: ['#ffffff']
        }
      }
    },
    series: [
      {
        name: '光照度',
        type: 'bar',
        data: list.map(item => [new Date(item.CreatedAt).getTime(), item.illuminance])
      },
    ]
  }

  option && myChart.setOption(option)
}

const loadInductance = (list) => {
  const chartDom = document.getElementById('main')
  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#ffffff'
        }
      },
    },
    legend: {
      data: [
        {
          name: '电感',
          textStyle: {
            color: '#409eff' // 图例文字颜色
          }
        },
      ],
    },
    xAxis: {
      type: 'time', // 使用时间类型的x轴
      boundaryGap: false,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#ffffff',
          width: 1,
          type: 'solid'
        }
      }
    },
    yAxis: {
      axisLine: {
        show: true,
        lineStyle: {
          color: '#ffffff',
          width: 1,
          type: 'solid'
        }
      },
      splitLine: {
        lineStyle: {
          color: ['#ffffff']
        }
      }
    },
    series: [
      {
        name: '电感',
        data: list.map(item => [new Date(item.uploadTime), item.totalActivePower]),
        type: 'line',
        areaStyle: {}
      }
    ]
  }

  option && myChart.setOption(option)
}

watch(() => useScreen.currentTunnel, (newValue) => {
  loading(newValue.envData)
  loadingLamp(newValue.envData)
  powerList.length = 0
  newValue.devices.forEach(item => {
    if (item.genre === 7) {
      powerList.push(item)
    }
  })
  if (powerList.length === 0) {
    loadInductance([])
    return
  }
  loadInductance(powerList[0].inductanceDetails)
})

const changePowerDevice = (e) => {
  loadInductance(powerList[e].inductanceDetails)
}

</script>

<style scoped lang="less">
// 公共样式
.title {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-family: PingFang-SC-Medium,serif;
  color: rgba(27, 146, 253, 1);
}
.boxShape {
  width: 370px;
  border: 1px solid rgba(27,146,253,0.5);
  background: rgba(50, 72, 106, 0.2);
  margin-left: 20px;
}
//.....................
.screenTitle{
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  //background: linear-gradient(to bottom, #2583e0, #80aad8); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
  //-webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
  //-webkit-text-fill-color: transparent;/*给文字设置成透明*/
  position: relative;
  span{
    position: absolute;
    top: 30px;
    left: 890px;
    font-size: 30px;
    color: #ffffff;
    padding-left: 20px;
    letter-spacing: 10px;
  }
  img{
    height: 80px;
  }
}
.screen{
  width: 100%;
  height: 600px;
  background-color: #0e122d;
  display: flex;
  margin-top: 20px;
  .leftBox {
    width: 20%;
    height: 600px;
    .deviceSummary {
      height: 240px;
      .boxShape;
      .deviceSummary_title {
        width: 370px;
        height: 50px;
        .title;
        img{
          width: 30px;
          height: 30px;
        }
      }
      .deviceOptionBox {
        width: 370px;
        height: 190px;
        margin-top: 20px;
        .deviceOptionRow {
          width: 100%;
          height: 60px;
          display: flex;
          margin-top: 20px;
          .deviceOption {
            width: 90px;
            height: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #ffffff;
          }
        }
      }
    }
    .inductance {
      height: 200px;
      margin-top: 20px;
      position: relative;
      .boxShape;
      .inductanceTitle {
        width: 370px;
        height: 50px;
        .title;
        img{
          width: 30px;
          height: 30px;
        }
      }
    }
    .warn {
      height: 340px;
      margin-top: 20px;
      .boxShape;
      .warnTitle {
        width: 370px;
        height: 50px;
        .title;
        img{
          width: 30px;
          height: 30px;
        }
      }
    }
  }
  .centerBox {
    width: 60%;
    height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .rightBox {
    width: 20%;
    height: 600px;
  }
}
.centerBox_chart {
  width: 2080px;
  height: 220px;
  margin-top: 40px;
  margin-left: 20px;
  display: flex;
  justify-content: space-between;
  border: 1px solid rgba(27,146,253,0.5);
  background: rgba(50, 72, 106, 0.2);
}
.centerBox_environment{
  width: 600px;
  height: 220px;
  position: relative;
  .centerBox_environment_title {
    width: 500px;
    height: 50px;
    .title;
    img {
      width: 30px;
      height: 30px;
    }
  }
  .centerBox_environment_chart {
    height: 250px;
    position: absolute;
    top: 5px;
  }
  .inductanceBox {
    width: 600px;
    height: 250px;
    position: absolute;
    top: 5px;
  }
  .custom-select {
    width: 150px;
    position: absolute;
    right: 20px;
    top: 10px;
  }

  .custom-select select {
    width: 100%;
    padding: 10px;
    background-color: rgba(50, 72, 106, 0.2);
    color: #ecf0f1;
    border: 2px solid rgba(27,146,253,0.5);
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
  }

  .custom-select select:focus {
    outline: none;
    border-color: #3498db;
  }

  .custom-select option {
    background-color: #2c3e50;
    color: #ecf0f1;
  }

  .custom-select option:hover {
    background-color: #3498db;
  }
}
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: #409eff;
}

.el-popper.is-customized .el-popper__arrow::before {
  background: #409eff;
  right: 0;
}

</style>

