<template>
  <div class="contenter">
    <!-- 建筑管理 -->
    <div class="box_title">
      人员管理
    </div>
    <div class="contenterTitle">
      <div class="title">
        <!-- <div class="title1">建筑详情</div> -->
      
      </div>

      <div class="buildfilter">
        <div class="buildf1">
           <div class="filter-item">
            <div class="buildf1t1">建筑名称:</div>
            <el-select class="buildf1t2 select__"  placeholder="请选择人员名称" v-model="build.buildName" @change="buildchangeFn">
              <el-option v-for="item in personList" :key="item.value" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
           </div>
          <div class="filter-item">
            <div class="buildf1t1">建筑楼层:</div>
            <el-select class="buildf1t2 select__" placeholder="请选权限名称" v-model="build.buildFloor" @change="buildchangeFn">
              <el-option v-for="item in personList" :key="item.value" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="buildf2">
              <el-button type="primary" size="large" color="#06B0E1" style="width: 150px;color: #fff;" @click="fireListFn">查询</el-button>
        </div>
      </div>
       <div class="horizontal-container">
        <div >历史火情</div>
        <div class="addPerson">
         <el-button  type="primary" size="large" style="width: 150px;  color: #fff;" color="#06B0E1">生成火情分析报表</el-button>
     
        </div>
        
       </div>
      
      <el-table stripe :data="buildData" width="1000" v-loading="loading1" class="table___"
        element-loading-background="rgba(0, 0, 0, 0.3)" :max-height="515" style="overflow: auto">
       <!-- :max-height="515"，显示10行记录 -->
        <el-table-column label="建筑名称" align="center">
          <template #default="scope">
            <div >{{ scope.row.aaa0 }}</div>
          </template>
        </el-table-column>
        <el-table-column label="楼层" align="center">
          <template #default="scope">
            {{ scope.row.aaa1 }}
          </template>
        </el-table-column>
        <el-table-column label="着火点" align="center">
          <template #default="scope">
            {{ scope.row.aaa5 }}
          </template>
        </el-table-column>
        <el-table-column label="详细描述" align="center">
          <template #default="scope">
            {{ scope.row.aaa3 }}
          </template>
        </el-table-column>
        <el-table-column label="记录人" align="center">
          <template #default="scope">
            {{ scope.row.aaa3 }}
          </template>
        </el-table-column>
        <el-table-column label="火势记录(图片/视频)" align="center">
          <template #default="scope">
            <div @click="showImgFn(scope.row)" >查看</div>
          </template>
        </el-table-column>
        <el-table-column label="记录时间" align="center">
          <template #default="scope">
            {{ (Date.now())}}
          </template>
        </el-table-column>
        <el-table-column label="任务调度" align="center">
          <template #default="scope">
            <div>前往</div>
          </template>
        </el-table-column>
        <el-table-column label="任务状态" align="center" >
          <template #default="scope">
            <div :style="{color: taskStateColor[scope.row.taskState]}">{{taskStateDes[scope.row.taskState]}}</div>
          </template>
        </el-table-column>
       
      </el-table>
      <div class="page">
        <el-pagination class="page__" v-model:current-page="pagination.PageNum" v-model:page-size="pagination.PageSize"
          layout="prev, pager, next " :total="pagination.total" @current-change="handleCurrentChange" />
      </div>

    </div>

    <!-- <fireShow v-if="imgShow" @click="imgShow = !imgShow"  :images="images" :videos="videos"/> -->
    <el-dialog
      v-model="isFireRecordDialogVisible"

      width="1200"
      :before-close="handleClose"
      style="background-color: rgba(0, 0, 0,0);margin-top: 5%;"
    >
    
      <FireRecord :buildFireData="curFireRecordInfo" ></FireRecord>
    </el-dialog>
    
  </div>
</template>
<script setup>

import fireShow from '../dialog_infoShow_img_vid/fireShow_img_vid.vue'
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import FireRecord from './fireRecord.vue';
const images = ref([
  {id:1,name: 'image1', url: '../../static/image/loginback.png' },
  { id:1,name: 'image2', url: '../../static/image/loginback.png' },
  { id:1,name: 'image3', url: '../../static/image/loginback.png' },
  { id:1,name: 'image4', url: '../../static/image/loginback.png' },
  { id:1,name: 'image5', url: '../../static/image/loginback.png' },
  { id:1,name: 'image6', url: '../../static/image/loginback.png' },
])
const videos = ref([
  { id:1,name: 'video1', url: '../../static/image/loginback.png' },
  { id:1,name: 'video2', url: '../../static/image/loginback.png' },
  { id:1,name: 'video3', url: '../../static/image/loginback.png' },
  { id:1,name: 'video4', url: '../../static/image/loginback.png'},
  { id:1,name: 'video5', url: '../../static/image/loginback.png' },
  { id:1,name: 'video6', url: '../../static/image/loginback.png' },
])
const isFireRecordDialogVisible = ref(false)
const curFireRecordInfo = ref([{
  fireLevel:"三级",
  unitBuilding:"1号楼",
  unitName:"1单元",
  unitFloor:"1楼",
  unitRoom:"101室",
  firePoint:"100m²",
  fireRecord:"张三",
  fireDescribe:"13888888888",
  fireRecordPhone:"13888888888",
  fireRecordTime:"2022-01-01 12:00:00",
  fireImg:["https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          
          ],
  fireVideo:["https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
             "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
  ],
}])
const showImgFn = (info) => {
  console.log("-----0000000000----------",info)
  isFireRecordDialogVisible.value = true
}
const taskStateColor=ref(['red','green','yellow'])
const taskStateDes=ref(['等待任务调度','已完成灭火','正在执行灭火任务'])
const pagination = ref({
  PageNum: 1,
  PageSize: 10,
  total: 100
})


//切换分页
const handleCurrentChange = () => {

}


const build = ref({
  buildName: '',
  buildFloor: '',
})
const fireListFn = () => {
  if (build.value.buildName == '' && build.value.buildFloor == '') {
      ElMessage({
        type: 'warning',
        message: "两个参数不能都为空",
      })
  }
  else {
    const temp = buildData.value.filter(item => item.aaa0 == (build.value.buildName==''?item.aaa0:build.value.buildName ) && item.aaa1 ==( build.value.buildFloor==''?item.aaa1:build.value.buildFloor))
    if (temp.length == 0) {
        ElMessage({
          type: 'warning',
          message: "没有找到相关记录",
          })
        }
        else {
          console.log(temp)
        }

    }

    console.log(build.value.satffName, build.value.satffPermission)
  }
 



const personList = ref([
  { name: '张三', value: '1' }, { name: '李四', value: '2' }, { name: '王五', value: '2' }
])
const buildData = ref([
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室大大着火',
    taskState: 0

  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 1

  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2

  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2

  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
  {
    aaa0: '建筑1',
    aaa1: '3',
    aaa2: '3',
    aaa3: '3',
    aaa4: '3',
    aaa5: '朝南住户卧室部分着火',
    taskState: 2
  },
])
//切换选项时更新列表
const buildchangeFn = () => {

}
</script>
<style scoped>
.title {
  height: 30px;
  display: flex;
  justify-content: flex-start;
}

.title1 {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: bold;
  font-size: 16px;
  color: #FFFFFF 国际花园小区鸟瞰图
}

.title2 {
  width: 80px;
  height: 25px;
  background-color: #06B0E1;
  /* background-color: linear-gradient(194deg, #06B0E1 0%, #06B0E1 100%); */
  /* color: #ffffff; */
  text-align: center;
  line-height: 25px;
  margin-left: 20px;
  border-radius: 5px;


}

.titleimg {
  width: 25vw;
  height: 30vh;
  margin-top: 10px;
}

.titleimg1 {
  width: 100%;
  height: 100%;
}

.buildfilter {
  display: flex;
  width: 100%;
  height: 20%;
  margin-top: -30px;
  border: 1px solid #064d77 ;
  border-radius: 1%;
}

.buildf1 {
  width: 40vw;
  height: 100%;
  display: flex;
  flex-direction: column;
 /* background-color: aquamarine; */
}
.filter-item {
  /* 让标签和选择框水平排列 */
  display: flex;
  justify-content: space-between;
  align-items: center; /* 垂直居中对齐 */
  margin-top: 10px;
  margin-bottom: 10px; 
}
.buildf1t2{
  display: flex;
  flex-direction: column;
  background-color: #062e51;
}

.buildf1t1 {
  font-size: 14px;
  line-height: 40px;
  width: 200px;
  text-align: center;
  flex-direction:row  ;
  /* background-color: #69878f; */
}

.buildf2 {
  width: 100%;
  height: 40px;
  margin-top: 50px;
  align-items: center;
  display: flex;
  /* justify-content: space-between; */
  justify-content: flex-end;
  margin-right: 80px;
  color: #fff;

}

.buildbutton {
  
  width: 150px;
  height: 25px;
  border-radius: 5px;
  text-align: center;
  line-height: 25px;
  margin-right: 25px;
  color: #ffffff;
}
.horizontal-container {
  margin: 20px 0 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center; /* 垂直居中对齐 */
}

.bucolor1 {
  background-color: #072547;
  color: #06a8d9;
  border: 1px solid #0194f4;
}

.bucolor2 {
  background-color: #06b0e1;
  color: #ffffff;
}
.addPerson {
  display: flex;
  justify-content: flex-end;
  margin-right: 80px;
}
:deep().el-select .el-select__wrapper {
  background-color: #06325c !important;
  border: 1px solid #064d77 !important;
  box-shadow: none;
}

/* :deep() .el-table--border .el-table__cell {
  background-color: #062e51;
} */

/* 斑马行的背景色 */
:deep() .el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #062e51 !important;
}

:deep() .el-table--striped .el-table__body tr.el-table__row td {
  background-color: #072547;
  border: none !important;
}

/* 表头背景色 */
:deep() .el-table th {
  background: linear-gradient(to bottom, #063563, #063563);
  border: none !important;
}

/* 表头字体色 */
:deep() .el-table thead {
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  line-height: 16px;
  text-align: right;
}

/* 鼠标经过时 行的背景色 */
:deep() .el-table__body tr:hover>td {
  background-color: #072547 !important;
}

.table___ {
  --el-table-border: 0.5px solid #69878f;
  --el-table-border-color: #69878f;
  border-radius: 5px;
  color: #ffffff;
  max-height: calc(100% - 195px - 30vh);
  overflow: auto;
}

:deep() .el-table__inner-wrapper::before {
  border: none;
  height: 0 !important;
}

/* //分页 */
.page {
  height: 40px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5px;
}

.page__ {
  /* width: 100%; */
  height: 40px;
}

:deep().el-pagination {
  background-color: rgba(0, 0, 0, 0) !important;
}

:deep().el-pagination .btn-prev {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid #06a0cf !important;
  color: #ffffff;
}

:deep() .el-pagination .btn-next {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid #06a0cf !important;
  color: #ffffff;
  margin-left: 5px;
}

:deep().el-pagination .el-pager .number {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid #06a0cf !important;
  color: #ffffff;
  margin-left: 5px;
}

:deep().el-pagination .el-pager .more {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid #06a0cf !important;
  color: #ffffff;
  margin-left: 5px;

}

/* 定制整个滚动条 */
::-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;
  /* 滑块悬停颜色 */
}
</style>