<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" class="form-item-person-info">
          <el-form-item label="人员信息" prop="personName" style="position:relative">
            <el-select
              v-model="listQuery.personName"
              :value-key="staffCode"
              :loading="selectLoading"
              :remote-method="remoteMethod"
              clear
              filterable
              remote
              reserve-keyword
              size="small"
              placeholder="请输入人员姓名"
              popper-class="eloption"
              :popper-append-to-body="false"
              @change="handlePerson">
              <el-option
                v-for="item in personNameList"
                :key="item.staffCode"
                :label="item.personName + ' ' + item.personType"
                :value="item.personName"
              />
            </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="10">
          <el-form-item label="监控点位" prop="point">
            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
            <!-- <select-tree v-model="point" ref="selectTree" multiple placeholder="请输入摄像头监控点位" input-size="small" :options="resourceTreeList" :props="defaultProps" /> -->
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="最小相似度" label-width="85px" prop="minSimilarity">
            <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间1-100" />
          </el-form-item>
        </el-col>
        <el-col :span="8" style="margin-top:4px;display:flex;justify-content: end;">
          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
            查询
          </el-button>
          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
            重置
          </el-button>
          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
            驾驶舱轨迹上图
          </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="child.facePicUrl" style="width:100%;height:100%">
            </div>
            <div class="title text-over">
              {{ child.positionName ? child.positionName : '' }}
            </div>
            <div class="desc text-over">
              {{ child.devName ? child.devName : '' }}
            </div>
            <div class="date">
              {{ child.time ? child.time : '' }}
            </div>
            <div class="ratio" style="width:130px">
              {{ child.similarity ? child.similarity : '0%' }}
            </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'
import moreSelect from './components/selectTree'
import {repostSocket} from "@/api/common";

export default {
  name: 'TrailDialog',
  components: { moreSelect },
  data() {
    return {
      selectLoading: false,
      personObj: {
        personName: '',
        personNo: '',
        personPicture: '',
        personType: '',
        picUri: '',
        serverIndexCode: '',
        staffCode: '0'
      },
      point: [],
      listQuery: {
        facePicUrl: '', // 图片url
        personName: '', // 人员名称
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        cameraIndexCodes: [], // 点位
        minSimilarity: '' // 相似度
      },
      timeRange: [], // 时间范围
      personNameList: [
        // {
        //   "personName": "郑嘉辉",
        //   "personNo": "TV11326",
        //   "personPicture": "",
        //   "personType": "",
        //   "picUri": "",
        //   "serverIndexCode": "",
        //   "staffCode": ""
        // },
        // {
        //   "personName": "郑11",
        //   "personNo": "TV11326",
        //   "personPicture": "",
        //   "personType": "",
        //   "picUri": "",
        //   "serverIndexCode": "",
        //   "staffCode": ""
        // },
        // {
        //     "personName": "邓榆琦",
        //     "personNo": "",
        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
        //     "personType": "访客",
        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
        //     "staffCode": ""
        // }
      ],
      resourceTreeList: [],
      defaultProps: {
        children: 'children',
        value: 'id',
        label: 'devName'
      },
      list: [],
      wallList: '',
      rules: {
        cameraIndexCodes: [
          { 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: {
    // 获取下拉树形点位数据
    getSelectedValue(val) {
      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
    },
    // select远程搜索方法
    remoteMethod(query) {
      if (query !== '') {
        this.selectLoading = true
        this.handleGetUserList(query)
      } else {
        this.personNameList = []
      }
    },
    // 赋值select参数
    handlePerson(person) {
      this.personNameList.map(item => {
        if (item.personName === this.listQuery.personName) {
          this.listQuery.facePicUrl = item.personPicture
          return
        }
      })
    },
    // 获取点位树
    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(keywords) {
      userList({ keywords }).then(response => {
        this.personNameList = response.data
        this.selectLoading = false
      })
    },
    // 搜索请求发起
    fetchData() {
      hikPic(this.listQuery).then(response => {
        if (response.code === 200) {
          this.wallList = response.data.toString()
          this.list = this.handleListOrder(response.data)
        }
      })
    },
    // 清除输入
    clearInput() {
      this.$refs.moreSelect.clearHandle()
      this.point = []
      this.listQuery.personName = ''
      this.listQuery.facePicUrl = ''
      this.listQuery.cameraIndexCodes = ''
      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')]
    },
    // 轨迹上墙
    onwall() {
      if (this.list.length === 0) {
        this.$message.warning('无记录上图，请重新搜索!')
        return
      }
      const params = {
        type: 'onwall-' + this.listQuery.personName,
        message: this.wallList
      }
      repostSocket(params).then(response => {
        if (response.code === 200) {
        }
      })
    },
    // 搜索
    search() {
      if (this.listQuery.minSimilarity >= 1 && this.listQuery.minSimilarity <= 100) {
        this.fetchData()
      } else {
        this.$message.warning('相似度只能填1-100区间!')
      }
      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('请检查输入信息!')
      //   }
      // })

    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  ::v-deep(.el-input__inner){
    border:1px solid #40C3F1 !important;
    background: transparent !important;
    color:#fff !important;
  }
  ::v-deep(.el-range-input){
    background: transparent !important;
    color:#fff !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;
    color:#fff !important;
  }
  ::v-deep(.el-select .el-select-dropdown__wrap) {
    max-height: 350px !important;
    overflow-y: auto !important;
  }
  .form-item-person-info:hover{
    cursor: text !important;
  }
  .el-form-item__content:hover{
    cursor: text !important;
  }
  ::v-deep(.form-item-person-info .el-input__inner):hover{
    cursor: text !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;
          z-index: 10;
          .img-wrap{
            position: absolute;
            left:35px;
            top:40px;
            width:238px;
            height:138px;
            overflow: hidden;
            z-index: -1;
          }
          .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;
            margin-left: 25px;
          }
          .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;
      }
    }
    .list-wrap .main .list-item .img-wrap{
      position: absolute;
      left: 30px;
      top: 40px;
      width: 190px;
      height: 138px;
      overflow: hidden;
      z-index: -1;
    }
    .list-wrap .main .list-item .date,.list-wrap .main .list-item .ratio{
      left:52% !important;
    }
</style>