<template>
  <div class="content">
    <!-- 工作台 -->
    <div class="box">
      <div class="bos unit1">
        <div class="box_title">当前火情</div>
        <div class="box-main curFire"  >
          <ul  class="infinite-list1" style="overflow: auto">
            <li v-for="item in firePoints" :key="item" class="infinite-list-item1">
              <div class="box_item" >
                <div class="itemim" >
                  <!-- <img src="" alt=""> -->
                  <div class="itemimg">
                    <!-- 需要根据传输的数据进行可视化动态改变 -->
                    <img style="width: 50%;height: auto; font-size: smaller;" :src="item.url" alt="火情等级图片">
                    <!-- {{item.url}} -->
                    <div :style="{color:item.color}">{{item.levele}}</div>
                  </div>
                </div>
                <div class="itemfons">
                  <div class="itemtitle">{{item.point}}</div>
                  <div class="miaoshu">
                    <div class="miaoshu1">着火点描述</div>
                    <el-popover popper-class="poperClass" placement="top" :width="200" trigger="hover"
                      :content="item.contact+item.fireDetial"
                      popper-style="text-align: center;border:1px solid #7F7F7F; box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.6);">
                      <template #reference>
                        <div class="miaoshu2">
                          {{item.fireDetial}}
                          
                        </div>
                      </template>
                    </el-popover>
                  </div>
                  <el-button class="itemdetail" type="primary" size="small" color="#06B0E1" style="color: #fff;" @click="module1Fn(item)">详情</el-button>
            
                  <!-- <div class="itemdetail">详情</div> -->
                </div>
              </div>
            </li>
          </ul>
          

        </div>
      </div>
      <div class="bos unit2">
        <div class="box_title">历史火情</div>
        <div class="box-main">
          <div class="box2_term"  >
            <div class="term1" >选择时间区间</div>
            <el-radio-group v-model="radio" @change="selfDefinedTime" >
              <el-radio :value="1" >近一个月</el-radio>
              <el-radio :value="3">近三个月</el-radio>
              <el-radio :value="6">近半年</el-radio>
            </el-radio-group>
            <div class="term3"  >
              <div class="demo-date-picker" >
           
                  <div class="block" >
                  <el-date-picker
                      v-model="selectDataValue"
                      type="daterange"
                      unlink-panels
                      range-separator="To"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      style="background-color:  #072547; color: #fff;"
                      @change="selfDefinedTimeSelsct"
                  />
                  </div>
              </div>
            </div>
          </div>
          <div id="echarts"></div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="bos unit3">
        <div class="box_title">无人机设备状态</div>
        <div class="box-main3">

          <div class="main-item3"  v-for="(item,index) in uavInfoShow" :key= "index" >
            <div class="box_item3" @click="uavDetailInfo(item)">
              <div class="item3title item3wh">
                <div>{{item.name}}</div>
                <div class="item3_status" :style="{color: [item.color]}" v-if="item.curState ">维修中</div>
                <div class="item3_status" :style="{color: [item.color]}" v-else>状态良好</div>
                <img class="item3whimg" src="../../static/image/wurenjitop.png" alt="无人机图标">
              </div>
              <div class="item3title item3wh1">
                <img src=" ../../static/image/uav/uav.png" alt="" class="imgitem3">
                <div class="item3title1">
                  <div class="item3title item3_detail">
                    <div>无人灭火弹备弹数:</div>
                    <div>4发</div>
                  </div>
                  <div class="item3title item3_detail">
                    <div>上次维修时间:</div>
                    <div>2025.6.10</div>
                  </div>
                  <div class="item3title item3_detail">
                    <div>当前状态:</div>
                    <div>执行编号001灭火任务中</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
         
        </div>
      </div>
      <div class="bos unit4" >
        <div class="box_title">火情信息 (传感器)</div>
        <div class="box-main" >
           <ul  class="infinite-list2" style="overflow: auto">
              <li v-for="item in firePoints" :key="i" class="infinite-list-item2">
                 <div class="box_item4" @click="fireInfoDetector(item)">
                  <div class="itemimg4">
                    <!-- 根据不同的火情级别显示不同的图片 -->
                     <img src="../../static/image/huo.png" v-if="1"  style="width: 100%; height: auto;"/>
                     <img src="../../static/image/uav/wiexiu_wiexuan.png" v-else-if="1"  style="width: 100%; height: auto;"/>
                     <img src="../../static/image/uav/wiexiu.png" v-else="1"style="width: 100%; height: auto;" />
                
                    <!-- <img src="../../static/image/wurenjitop.png" alt=""> -->
                  </div>
                        <div class="itemfons4" >
                          <div class="itemtitle">{{ item.point }}</div>
                          <div class="miaoshu">
                            <div class="miaoshu4">
                              <div class="mess">详情</div>
                              <div class="fireDetialInfoShow">{{item.fireDetial}}</div>
                            </div>
                            <div class="miaoshu4">
                              <div class="mess">联系人</div>
                              <el-popover popper-class="poperClass" placement="top" :width="200" trigger="hover"
                                :content="item.contact+item.fireDetial"
                                popper-style="text-align: center;border:1px solid #7F7F7F; box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.6);">
                                <template #reference>
                                  <div class="lianxi fireDetialInfoShow">
                                    {{ item.contact }}
                                  </div>
                                </template>
                              </el-popover>
                            </div>
                          </div>
                        </div>
                </div>
              </li>
            </ul>
         

        </div>
      </div>
    </div>
    <!-- <el-button type="info" @click="butClick" >Info</el-button> -->
  </div>
</template>
<script setup>
// import {staffBuilidInfoUpdataApi} from '../../api/staff'
// const butClick = () => {
//   staffBuilidInfoUpdataApi({id:1}).then(res => {
//     console.log(res)
//   })
// }



import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';

import store from '../../store/index';
const router = useRouter();
const route = useRoute();
import * as echarts from 'echarts';
import useAppStore from '../../store/module/app';
const useAppStoreInstance = useAppStore();
// import { leveledFormat } from 'echarts/types/src/util/time.js';

const radio = ref(1)
const selfDefinedTimeSelsct = () => {
  console.log(selectDataValue.value.length)
  let start =  Date.parse(selectDataValue.value[0]);
  let end = Date.parse(selectDataValue.value[1]);
  console.log("时间选择器的开始与结束时间戳",start, end)

}



const selectDataValue = ref('')
// 定义一个名为uavInfoShow的ref变量，用于存储无人机信息
const uavInfoShow = ref([ {
  // 定义无人机1的信息
  id:1,
  name: '无人机1',
  taskStatus: '执行编号001灭火任务中',
  preFiexTime: '2025.6.10',
  bullet: '4发',
  curState:0,
  color:"green"
},
{
  // 定义无人机2的信息
  id:2,
  bullet: '4发',
  name: '无人机2',
  taskStatus: '执行编号011灭火任务中',
  preFiexTime: '2025.6.10',
  curState:1,
  color:"red"
},
{
  // 定义无人机1的信息
  id:3,
  name: '无人机1',
  taskStatus: '执行编号001灭火任务中',
  preFiexTime: '2025.6.10',
  bullet: '4发',
  curState:1,
  color:"red"
},
{
  // 定义无人机2的信息
  id:4,
  bullet: '4发',
  name: '无人机2',
  taskStatus: '执行编号011灭火任务中',
  preFiexTime: '2025.6.10',
  curState:1,
  color:"red"
},
{
  // 定义无人机1的信息
  id:5,
  name: '无人机1',
  taskStatus: '执行编号001灭火任务中',
  preFiexTime: '2025.6.10',
  bullet: '4发',
  curState:0,
  color:"green"
},
{
  // 定义无人机2的信息
  id:6,
  bullet: '4发',
  name: '无人机2',
  taskStatus: '执行编号011灭火任务中',
  preFiexTime: '2025.6.10',
  curState:1,
  color:"red"
}])
// 
// 定义一个ref类型的变量firePoints，包含一个数组
// 每个对象包含point（地点）、fireDetial（火情详情）、contact（联系人）、fireLevel（火情等级）、url（火情图片地址）、levele（火情等级名称）、color（火情颜色）
const firePoints = ref([
  {id:1, point: '1单元3号楼 8层 405室 朝南', fireDetial: "朝南传感器侦察到火情，请及时安排人员去现场查看", contact: "张三 157365895462",fireLevel:1 ,url: new URL('../../static/image/oneFire.png', import.meta.url).href,levele:"一级火情",color:"red"},
  { id:2,point: '1单元3号楼 8层 405室 朝南', fireDetial: "朝南传感器侦察到火情，请及时安排人员去现场查看", contact: "张三 157365895462",fireLevel:1 ,url: new URL('../../static/image/twoFire.png', import.meta.url).href,levele:"二级火情",color:"yellow"},
  {id:3, point: '1单元3号楼 8层 405室 朝南', fireDetial: "朝南传感器侦察到火情，请及时安排人员去现场查看", contact: "张三 157365895462" ,fireLevel:2,url: new URL('../../static/image/threeFire.png', import.meta.url).href,levele:"三级火情",color:"Orange"},
  {id:4, point: '1单元3号楼 8层 405室 朝南', fireDetial: "朝南传感器侦察到火情，请及时安排人员去现场查看", contact: "张三 157365895462" ,fireLevel:2,url: new URL('../../static/image/threeFire.png', import.meta.url).href,levele:"三级火情",color:"Orange"},
  {id:5, point: '1单元3号楼 8层 405室 朝南', fireDetial: "朝南传感器侦察到火情，请及时安排人员去现场查看", contact: "张三 157365895462" ,fireLevel:0,url: new URL('../../static/image/oneFire.png', import.meta.url).href,levele:"一级火情",color:"red"},
  {id:6, point: '1单元3号楼 8层 405室 朝南', fireDetial: "朝南传感器侦察到火情，请及时安排人员去现场查看", contact: "张三 157365895462" ,fireLevel:1 ,url: new URL('../../static/image/twoFire.png', import.meta.url).href,levele:"二级火情",color:"yellow"},
])

const selfDefinedTime =()=>{
  
  // 不知道是不是用时间戳来获取时间

  // // 获取当前时间戳
  const now = Date.now();
  // // 计算7天前的时间戳（7天 × 24小时 × 60分钟 × 60秒 × 1000毫秒）
  const agoTimestamp = now - (radio.value * 30 * 24 * 60 * 60 * 1000);
  // // 将时间戳转换为日期对象
  const agoDate = new Date(agoTimestamp);
  // // 将日期对象转换为字符串
  const agoDateString = agoDate.toLocaleDateString().split('/')[1];
  // // // 获取当前日期
  // const currentDate = new Date();
  // // // 将日期对象转换为字符串
  // const currentDateString = currentDate.toLocaleDateString();
  // // // 将日期字符串拼接成需要的格式
  // const formattedDate = `${agoDateString} - ${currentDateString}`;
  // // // 输出结果
  

  // echartsFn()
  console.log(agoDateString);


  console.log("radio.value--------",radio.value)
  // 这里要写时间的范围，从后端获取数据
  // echartsFn({
  //   time:['桌椅', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun',],
  //   vale:[82, 932, 901, 934, 1290, 1330, 1320]
  //   }
  // )
}
//折线图图表
const echartsFn = (data) => {
  var chartDom = document.getElementById('echarts');
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    xAxis: {
      type: 'category',
      data: data?data.time:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun',],
      axisLabel: {
        // interval:
        showMinLabel: true, // 显示第一个标签
        showMaxLabel: true, // 显示最后一个标签

        // formatter: function (val) {
        //   if (props.dataType == 1) {
        //     if (val.split(' ').length > 1) {
        //       return val.split(' ')[1];
        //     } else {
        //       return val;
        //     }
        //   } else if (!isNaN(new Date(val).getTime()) && val.toString().split(' ').length > 1) {
        //     return val.split(' ')[1];
        //   } else {
        //     return formatterFn(obj.dimensions[0].formatter, val)
        //   }
        // }
      },
      // 隐藏y轴网格线
      splitLine: {
        show: false
      },
      axisLine: {
        // show: false,
        lineStyle: {
          color: '#5c7a99' // 设置轴线颜色为红色
        }
      },
      axisTick: {
        show: false // 这里设置为false即可去掉x轴的间隔线
      }
    },
    yAxis: {
      type: 'value',
      alignTicks: true,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#123152', // 修改为你想要的颜色
          type: 'solid'
        }
      },
    },
    dataZoom: [
      {
        type: 'inside',
        xAxisIndex: [0],
        start: 0,
        end: 10000  //默认缩放组件宽度
        // height:10,
      }
    ],
    grid: {
      left: 30,
      // left: 50,
      right: 30,
      bottom: 10,
      top: 40,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params) => {
        // console.log('params', params)
          let html = `${(params[0].axisValue)}日共发生<span style="color:red">${(params[0].value)}</span>起火灾<br />`
          return html
        } 
    },
    series: [
      {
        data: data?data.vale:[820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        showSymbol: false, // 设置为false以去掉圆点
        smooth: true,
        itemStyle: {
          color: '#0facd6', 
        },
        lineStyle: {
          color: '#0facd6'
        },
      }
    ]
  };
  window.addEventListener("resize", function () {
    // console.log('屏幕变化了');
    if (myChart) {
      var time = setInterval(() => {
        // console.log('走进来');
        myChart.resize()
      }, 200);
      setTimeout(() => {
        clearInterval(time)
      }, 2000)
    }
  })
  myChart.on('click', function (params) {
    // 获取到点击的点的相关信息，再跳转到详情页的时候传递过去
      // console.log("--------------333333333333-------------",params.name,params.value);
      router.push({
        path: '/fireManage',
        query: { taskId: params.name }
      })
      useAppStoreInstance.num=4
  });
  option && myChart.setOption(option);
}
onMounted(() => {
  console.log('页面加载了',router,route)
  echartsFn()
  // module1Fn()
  module2Fn()
  module3Fn()
  module4Fn()

})
// 获取模块1的列表数据--当前火情
const module1Fn = (info) => {
  // console.log('info',info.id)
  // 此时可以跳转，但是菜单状态没变化，需要手动修改，设置localStorage中的menu值也不行
  router.push({
    path: '/fireManage',
    query: { taskId: info.id }
  })
  useAppStoreInstance.num=4
  // localStorage.setItem('menu', '2')
}
const uavDetailInfo = (info) => {
  router.push({
    path: '/uavManage',
    query: { uavId: info.id }
  })
  useAppStoreInstance.num=3
}
// 获取模块2的列表数据--历史火情
const module2Fn = () => {

}
// 获取模块3的列表数据--无人机设备状态
const module3Fn = () => {

}
// 获取模块4的列表数据--火情信息(传感器)
const module4Fn = () => {

}
const fireInfoDetector=(info)=>{
  router.push({
    path: '/fireManage',
    query: { taskId: info.id }
  })
  useAppStoreInstance.num=4
}
</script>
<style scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.box {
  display: flex;
  justify-content: space-between;
  height: 49%;
}

.bos {
  border: 1px solid #063b6c;
  background-color: #072547;
}

.unit1 {
  width: 40%;
}

.unit2 {
  width: 59%;
}

.unit3 {
  width: 55%;
}

.unit4 {
  width: 44%;
}

.box_title {
  width: 100%;
  height: 48px;
  line-height: 48px;
  padding-left: 20px;
  background-image: url(../../static/image/title.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.box-main {
  height: calc(100% - 48px);
  padding: 10px;
  overflow-y: hidden;
  /* background-color: #351f39; */

}

.box_item {
  width: 100%;
  height: 100%;
  background-color: #063563;
  margin-bottom: 5px;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  padding: 10px;
  /* &nbsp */
}

.itemim {
  width: 80px;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemimg {
  /* height: 100%;
  width: auto;
  aspect-ratio: 1/1; */
  height: 80px;
  width: 80px;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  /* background-color: #068bb8; */
  /* border: 1px solid red; */
}

.itemfons {
  position: relative;
  height: 100%;
  width: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 5px;
  margin-left: 10px;
}

.itemtitle {
  font-weight: 600;
}

.miaoshu {
  font-size: 14px;
  width: 100%;
  overflow: hidden;
}

.miaoshu1 {
  font-size: 14px;
  /* background-color: #351f39; */
  /* background-image: url(../../static/image/wurenjitop.png);
   */
  background: linear-gradient( 270deg, rgba(14,216,242,0) 95%, #0571C4 100%);
  background-repeat: no-repeat;

}

.itemimg1 {
  height: 30px;
  width: 30px;
  /* background-image: url(); */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 5px;
}

.itemfons1 {
  position: relative;
  height: 100%;
}

.miaoshu2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

.itemdetail {
  width: 45px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: #06b0e1;
  border-radius: 5px;
  position: absolute;
  top: 10px;
  right: 10px;
}

.itemimg4 {
  height: 30px;
  width: 30px;
  /* background-image: url(); */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 5px;
}

.itemfons4 {
  position: relative;
  height: 100%;
  width: calc(100% - 30px);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 5px;
  margin-left: 10px;
}

.box_item4 {
  width: 100%;
  height: 100%;
  background-color: #351f39;
  /* margin-bottom: 5px; */
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  padding: 10px;
  /* &nbsp */
}

.miaoshu4 {
  width: 100%;
  display: flex;
  margin-bottom: 5px;
}

.lianxi {
  width: calc(100% - 50px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

.mess {
  width: 50px;
  height: 20px;
  text-align: center;
  background-color: #294261;
  border: 1px solid #205e82;
  margin-right: 5px;
  margin-top: 10px;
}
.fireDetialInfoShow{
  margin-top: 10px;
}

/* ------------------------------------------------------------
 */
.box2_term {
  display: flex;
  align-items: center;
  padding: 10px;
  font-size: 14px;
  color: #c0c7d0;
}

.term1 {
  margin-right: 10px;
}

.term3 {
  margin-left: 20px;
  text-decoration: underline;
  color: #068bb8;
  cursor: pointer;
}

:deep().el-radio__label {
  color: #c0c7d0 !important;
}

:deep().el-radio.is-checked .el-radio__label {
  color: #409eff !important;
}

/* 3-------------------------------------------------------- */
.box-main3 {
  width: 100%;
  height: calc(100% - 48px);
  /* padding: 20px; */
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.box_item3 {
  width: 100%;
  height: 100%;
  background-image: url(../../static/image/wurenji.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;

}

.main-item3 {
  width: 50%;
  height: 42%;
  /* padding: 0px 0px; */
  margin-top: 20px;
  overflow: hidden;
}








/* 定制整个滚动条 */
::-webkit-scrollbar {
  width: 10px;
  /* 滚动条宽度 */
}

/* 定制滚动条轨道 */
::-webkit-scrollbar-track {
  background: #023375;
  border-radius: 10px;

  /* 轨道颜色 */
}

/* 定制滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
  background: #0d68c1;
  border-radius: 10px;

  /* 滑块颜色 */
}

/* 当鼠标悬停在滑块上 */
::-webkit-scrollbar-thumb:hover {
  background: #DDDEE0;
  /* 滑块悬停颜色 */
}

.item3title {
  display: flex;
  justify-content: space-between;

}

.imgitem3 {
  margin-left: 0.5vw;
  width: 5vw;
  height: 8vh;
  /* border: 1px solid red; */
}

.item3wh {
  width: 90%;
  padding-left: 40px;
  padding-right: 30px;
  line-height: 5vh;
  height: 4vh;
  margin: 0 auto;
  position: relative;
}

.item3whimg {
  position: absolute;
  top: 40%;
  left: 22px;
  width: 15px;
  height: 15px;
}

.item3wh1 {
  width: 90%;
  height: calc(100% - 4vh);
  padding: 0 20px;
  margin: 0 auto;
  align-items: center;
  font-size: 14px;
}

.item3_detail {}

.item3title1 {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 80%;
  width: 70%;
  /* background-color: #351f39; */
}

.item3_status {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: bold;
  font-size: 15%;
  font-style: normal;
}

#echarts {
  width: 100%;
  height: calc(100% - 55px);
}

.infinite-list1 {
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list1 .infinite-list-item1 {
  display: flex;
  /* align-items: center;
  justify-content: center; */
  height: 110px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list1 .infinite-list-item1 + .list-item1 {
  margin-top: 10px;
}

.infinite-list2 {
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list2 .infinite-list-item2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list2 .infinite-list-item2 + .list-item2 {
  margin-top: 10px;
}


/* 日期选择器 */

.demo-date-picker {
  display: flex;
  /* width: 100%; */
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  /* padding: 30px 0; */
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
  color: #fff;

}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

:deep(.el-picker-panel) {
    background-color: #072547;
}

/* 如果需要修改输入框的背景色 */
:deep(.el-range-input) {
    background-color:#072547;
}
</style>