<template>
  <div class="wrap">
    <div class="header">
      巡视人员轨迹处理
    </div>
    <el-form ref="form" :model="listQuery" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="人员信息" prop="personName">
            <el-select v-model="listQuery.personName" filterable size="small" placeholder="请输入人员姓名/身份证">
              <el-option
                v-for="item in personNameList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="起止时间" prop="timeRange">
            <el-date-picker
              v-model="timeRange"
              type="datetimerange"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="起始时间"
              end-placeholder="终止时间"
              size="small"
              :clearable="false"
              style="width:98%"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="position:relative">
        <el-col :span="6">
          <el-form-item label="监控点位" prop="point">
            <select-tree v-model="listQuery.point" placeholder="请输入摄像头监控点位" input-size="small" :options="resourceTreeList" :props="defaultProps" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="最小相似度" label-width="120px" prop="minSimilarity">
            <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间1-100" />
          </el-form-item>
        </el-col>
        <el-col :span="12" style="margin-top:4px;display:flex;justify-content: end;padding-right: 25px;">
          <el-button type="primary" size="small" style="margin-right:20px" @click="search">
            查询
          </el-button>
          <el-button type="danger" size="small" style="margin-right:20px" @click="clearInput">
            重置
          </el-button>
          <el-button type="primary" size="small" @click="draw">
            驾驶舱轨迹上图
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 列表显示 -->
    <div class="list-wrap">
      <div class="main">
        <div v-for="item in list" :key="item" class="row">
          <div v-for="child in item" :key="child" class="list-item">
            <div class="img-wrap">
              <img src="../../assets/404_images/404.png" style="width:100%;height:100%">
            </div>
            <div class="title text-over">
              摄像头摄像头摄像头摄像头摄像头摄像头摄像头摄像头00{{ child }}
            </div>
            <div class="desc text-over">
              这是详情描述这是详情描述这是详情描述这是详情描述这是详情描述
            </div>
            <div class="date">
              2023-1-1 12:00:32
            </div>
            <div class="ratio">
              50%
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { hikPic, userList } from '@/api/person'
import { getCameraList } from '@/api/device'
import { getDate } from '@/utils/calendarUtil'
import SelectTree from '@/components/SelectTree/singleSelect'

export default {
  name: 'TrailDialog',
  components: { SelectTree },
  data() {
    return {
      listQuery: {
        facePicUrl: '', // 图片url
        personName: '', // 人员名称
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        point: 'IP CAMERA', // 点位
        minSimilarity: '' // 相似度
      },
      timeRange: [], // 时间范围
      personNameList: [],
      resourceTreeList: [],
      defaultProps: {
        children: 'children',
        value: 'id',
        label: 'devName'
      },
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
      rules: {
        point: [
          { required: true, message: '请填写监控点位', trigger: 'blur' }
        ],
        personName: [
          { required: true, message: '请填写人员信息', trigger: 'blur' }
        ],
        minSimilarity: [
          { required: true, message: '请填写最小相似度', trigger: 'blur' }
        ],
        timeRange: [
          { required: true, message: '请填写日期', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    timeRange(val) {
      if (val && val.length > 0) {
        this.listQuery.startTime = val[0]
        this.listQuery.endTime = val[1]
      } else {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      }
    }
  },
  created() {
    this.list = this.handleListOrder(this.list) // 测试列表数据
    this.handleGetUserList() // 获取人员信息数据
    this.handlePointTreeData() // 获取点位数据
  },
  methods: {
    // 获取点位树
    handlePointTreeData() {
      getCameraList({ keywords: '' }).then(response => {
        this.resourceTreeList = response.data
      })
    },
    // 处理返回显示列表数据
    handleListOrder(list, num = 2) {
      const len = list.length
      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
      const newArr = []
      for (let i = 0; i < lineNum; i++) {
        const temp = list.slice(i * num, i * num + num)
        newArr.push(temp)
      }
      return newArr
    },
    // 人员搜索
    handleGetUserList() {
      userList({ keywords: '' }).then(res => {
        console.log(res)
      })
    },
    // 搜索请求发起
    fetchData() {
      hikPic(this.listQuery).then(response => {
        if (response.code === 200) {
          this.list = response.data
        }
      })
    },
    // 清除输入
    clearInput() {
      this.listQuery.personName = ''
      this.listQuery.point = ''
      this.listQuery.startTime = getDate(0, 'DATE') + ' 00:00:00'
      this.listQuery.endTime = getDate(0, 'SECOND')
      this.listQuery.minSimilarity = ''
      this.timeRange = [getDate(0, 'DATE') + ' 00:00:00', getDate(0, 'SECOND')]
    },
    // 搜索
    search() {
      console.log(this.listQuery)
      // 取消校验
      // if (this.listQuery.personName === '') {
      //   this.$message.warning('请输入人员姓名!')
      //   return
      // }
      // this.$refs.form.validate((valid) => {
      //   if (valid) {
      //     this.fetchData()
      //   } else {
      //     this.$message.warning('请检查输入信息!')
      //   }
      // })
      this.fetchData()
    },
    // 驾驶舱点击上图
    draw() {
      console.log('上图')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  ::v-deep(.el-input__inner){
    border:1px solid #40C3F1 !important;
    background: transparent !important;
  }
  ::v-deep(.el-range-input){
    background: transparent !important;
  }
  ::v-deep(.el-form-item__label){
    color:#f1f1f1 !important;
    font-weight: 400 !important;
  }
  ::v-deep(.el-range-separator){
    color:#f1f1f1 !important;
    font-weight: 400 !important;
  }
  ::-webkit-scrollbar {
      z-index: 11;
      width: 6px;
    }
    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-corner {
      border-radius: 5px;
      background: #fff;
    }
    ::-webkit-scrollbar-thumb {
      border-radius: 5px; // 滚动条
      width: 6px;
      background-color: #ccc;
      :hover {
        background-color: #ccc;
      }
    }
    ::-webkit-scrollbar-track-piece {
      border-radius: 5px; // 轨道
      background: #fff;
      width: 6px;
    }
  .text-over{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .wrap{
    width:100%;
    height: 100%;
    background: #5F8EB9;
    position: relative;
    overflow: hidden;
    .header{
      position: relative;
      width: 98%;
      margin-left:20px;
      border-top: 10px solid #5F8EB9;
      border-bottom: 10px solid #5F8EB9;
      padding:5px 0 5px 20px;
      color:#f1f1f1;
      background: #30486C;
      font-size: 16px;
    }
  }
  .el-select{
    width: 100%;
  }
  .header::after{
      content:"";
      display: inline-block;
      position: absolute;
      top:0;
      left: -8px;
      width:4px;
      height:100%;
      background: #40C3F1;
    }
    .list-wrap{
      width:100%;
      height: calc(100% - 175px); // 去除头部区域
      overflow-y: auto;
      .main{
        width:99%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        .row {
          display: flex;
          justify-content: space-between;
          margin-bottom: 40px;
        }
        .row:nth-child(2n) {
          flex-direction: row-reverse;
        }
        .row:nth-child(2n):last-child .item {
          margin-right: auto;
        }
        .list-item{
          position: relative;
          width: 48%;
          height: 240px;
          background-image: url("../../assets/global_images/monitor.png");
          background-repeat: no-repeat;
          // background-size: cover;
          background-size: 100% 100%;
          margin-left: 20px;
          .img-wrap{
            position: absolute;
            left:35px;
            top:40px;
            width:236px;
            height:138px;
            overflow: hidden;
          }
          .title{
            width:200px;
            position: absolute;
            left:42%;
            top: 40px;
            font-size: 20px;
            color:#40C3F1;
          }
          .desc{
            width:300px;
            position: absolute;
            left:42%;
            top: 75px;
            font-size: 16px;
            color:#f1f1f1;
          }
          .date{
            position: absolute;
            left:50%;
            transform: translateX(-50%);
            bottom:70px;
            font-size: 14px;
            color:#c1c1c1;
            margin-left:25px;
          }
          .date::after{
            position: absolute;
            top:0;
            left:-20px;
            content:"";
            display: inline-block;
            width: 15px;
            height: 15px;
            background-image: url("../../assets/global_images/date.png");
            background-repeat: no-repeat;
            background-size: cover;
          }
          .ratio{
            width:100px;
            position: absolute;
            left:50%;
            transform: translateX(-50%);
            bottom:40px;
            font-size: 14px;
            color:#c1c1c1;
            margin-left:18px;
          }
          .ratio::after{
            position: absolute;
            top:0;
            left:-20px;
            content:"";
            display: inline-block;
            width: 15px;
            height: 15px;
            background-image: url("../../assets/global_images/search.png");
            background-repeat: no-repeat;
            background-size: cover;
          }
        }
      }
    }
    .main .row:nth-child(odd){
      .list-item:nth-child(odd)::after{
        content:"";
        display: inline-block;
        width:30px;
        height: 30px;
        position: absolute;
        top:50%;
        transform: translate(-50%);
        right:-52px;
        background-image: url("../../assets/global_images/right.png");
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
    .main .row:nth-child(odd){
      .list-item:nth-child(even)::after{
        content:"";
        display: inline-block;
        width:30px;
        height: 30px;
        position: absolute;
        right:50%;
        transform: translate(-50%);
        bottom:-35px;
        background-image: url("../../assets/global_images/right.png");
        background-repeat: no-repeat;
        background-size: cover;
        transform: rotate(90deg);
      }
    }
    .main .row:nth-child(even){
      .list-item:nth-child(odd)::after{
        content:"";
        display: inline-block;
        width:30px;
        height: 30px;
        position: absolute;
        top:50%;
        transform: translate(-50%);
        left:-35px;
        background-image: url("../../assets/global_images/right.png");
        background-repeat: no-repeat;
        background-size: cover;
        transform: rotate(180deg);
      }
    }
    .main .row:nth-child(even){
      .list-item:nth-child(even)::after{
        content:"";
        display: inline-block;
        width:30px;
        height: 30px;
        position: absolute;
        left:50%;
        transform: translate(-50%);
        bottom:-35px;
        background-image: url("../../assets/global_images/right.png");
        background-repeat: no-repeat;
        background-size: cover;
        transform: rotate(-270deg);
      }
    }
    // 如果是最后一个元素不显示箭头
    .main .row:last-child{
      .list-item:last-child::after{
        display: none;
      }
    }
</style>