<!--
 * @Author: zhangtq 2452618307@qq.com
 * @Date: 2024-11-15 14:26:52
 * @LastEditors: zhangtq 2452618307@qq.com
 * @LastEditTime: 2025-01-20 18:30:16
 * @FilePath: src/views/screen/components/video/components/VideoLog.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <div class="container">
    <div class="left">
      <div style="width: 100%;display: flex;flex-direction: row">
        <div class="sift-main">
          <el-date-picker
            v-model="timeRange"
            clearable
            type="datetimerange"
            :append-to-body="false"
            popper-class="sift-data"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>

        <el-button icon="el-icon-search" @click="searchTimeBtn" class="searchButton"></el-button>
      </div>
      <div style="width: 100%;display: flex;flex-direction: row;margin-top: 5px;margin-bottom: 5px;">
        <el-input placeholder="请输入名称" v-model="keyWord" v-no-whitespace clearable @clear="resetBtn">
        </el-input>
        <el-button icon="el-icon-search" @click="searchBtn" class="searchButton"></el-button>
      </div>
      <div class="list">
        <div class="car-item" v-for="item in videoList" :key="item.puid" style="display: flex;flex-direction: row">
          <input class="checkbox" type="checkbox" :value="item" @change="selectListChange($event,item)" v-model="selectList"/>
          <div class="name">{{item.name}}</div>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="eventType">
        <div class="module_title"><span>事件类型</span></div>
        <div style="position: absolute;top: 25%;left: 47.5%;font-size: 18px">
          <div class="legend">
            <div style="width: 15px;height: 15px;background-color: #0064e8;margin: 0 10px 0 0"></div>
            设备上线 {{ typeOnlineRate }}
          </div>
          <div class="legend" style="margin-top: 5px;">
            <div style="width: 15px;height: 15px;background-color: #00edfd;margin: 0 10px 0 0"></div>
            设备下线 {{ typeOfflineRate }}
          </div>
        </div>
        <div style="height: 30vh">
          <EventType :total="total" :data="typeData"/>
        </div>
      </div>
      <div class="eventDetail">
        <div class="module_title"><span>事件详情</span></div>
        <div style="position: absolute;top: 54%;left: 31%;font-size: 18px;display: flex;flex-direction: row">
          <div class="legend">
            <div style="width: 15px;height: 15px;background-color: #0064e8;margin: 0 10px 0 0"></div>
            设备上线 {{ typeOnlineRate }}
          </div>
          <div class="legend">
            <div style="width: 15px;height: 15px;background-color: #00edfd;margin: 0 10px 0 0"></div>
            设备下线 {{ typeOfflineRate }}
          </div>
        </div>
        <div style="height: 40vh;margin-top:3vh;">
          <EventDetail :y_data="y_data" :_data1="data1" :_data2="data2"/>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="module_title"><span>日志列表</span></div>
      <LogList :table-data="tableData" :total="total" v-on:pageChange="pageChange" />
    </div>
  </div>
</template>
<script>
import LogList from '@/views/screen/components/video/components/LogList.vue'
import { selectVideoList, selectVideoLogList } from '@/api/screen/screen'
import EventType from '@/views/screen/components/video/components/EventType.vue'
import EventDetail from '@/views/screen/components/video/components/EventDetail.vue'
import { parseTime } from '@/utils/bonus'

export default {
  name: 'VideoLog',
  components: { EventDetail, EventType, LogList },
  data() {
    return {
      constants: {},
      timeRange: [ parseTime(new Date(), '{y}-{m}-{d} 00:00:00'), parseTime(new Date(), '{y}-{m}-{d} 23:59:59') ],
      keyWord:'',
      total: 0,
      typeOnlineRate: 0,
      typeOfflineRate: 0,
      queryParams: {
        pageSize: 15,
        pageNum: 1,
        startTime: '',
        endTime: '',
        puid: '',
        name: ''
      },
      tableData: [],
      typeData:[],
      y_data: [],
      data1: [],
      data2:[],
      videoList: [
        { id: 1, name: '球机一号' },
        { id: 2, name: '球机二号' },
        { id: 3, name: '球机三号' },
        { id: 4, name: '球机四号' },
        { id: 5, name: '球机五号' },
        { id: 6, name: '球机六号' },
        { id: 7, name: '球机七号' },
        { id: 8, name: '球机八号' },
        { id: 9, name: '球机九号' },
        { id: 10, name: '球机十号' },
        { id: 11, name: '球机十一号' },
        { id: 12, name: '球机十二号' },
        { id: 13, name: '球机十三号' },
        { id: 14, name: '球机十四号' },
        { id: 15, name: '球机十五号' },
        { id: 16, name: '球机十六号' },
        { id: 17, name: '球机十七号' },
        { id: 18, name: '球机十八号' },
        { id: 19, name: '球机十九号' },
        { id: 20, name: '球机二十号' },
      ],
      selectList:[]
    }
  },
  mounted() {
    this.fetchDate()
  },
  methods: {
    searchBtn() {
      const params = {
        name : this.keyWord
      }
      this.getVideoList(params)
    },
    resetBtn() {
      this.keyWord = ''
      this.searchBtn()
    },
    getVideoList(params) {
      selectVideoList(params).then(res => {
        this.videoList = res.rows
      })
    },
    searchTimeBtn() {
      if (!this.timeRange) {
        this.$message.error('请选择时间范围')
        return
      }
      let name = this.selectList.map(item => item.name).join(',')
      let puid = this.selectList.map(item => item.puid).join(',')
      if (puid === '') {
        this.$message.error('请先选择需要查询的设备')
        return
      }
      console.log(this.timeRange)
      this.queryParams.startTime = parseTime(this.timeRange[0], '{y}-{m}-{d} {h}:{i}:{s}')
      this.queryParams.endTime = parseTime(this.timeRange[1], '{y}-{m}-{d} {h}:{i}:{s}')
      this.queryParams.name = name
      this.queryParams.puid = puid
      this.getVideoLogList(this.queryParams)
    },

    selectListChange(e,item) {
      if (!e.target.checked) {
        this.selectList = this.selectList.filter(i => i.puid !== item.puid)
        //去重
        this.selectList = Array.from(new Set(this.selectList))
      }else{
        this.selectList.push(item)
        this.selectList = Array.from(new Set(this.selectList))
      }

      console.log(this.selectList)
    },
    // 获取数据
    fetchDate() {
      this.getVideoList()
      // this.getVideoLogList(this.queryParams)
    },
    // 分页 切换页码
    pageChange(val) {
      const params = {
        pageSize: 15,
        pageNum: val
      }
      this.getVideoLogList(params)
    },
    // 获取日志列表
    getVideoLogList(params) {
      selectVideoLogList(params).then(res => {
        console.log(res)
        this.tableData = res.rows
        this.total = res.total
        let data = res.rows
        // 定义一个map
        let onlineMap = new Map()
        let offlineMap = new Map()
        let typeOnlineNum = 0
        let typeOfflineNum = 0
        data.forEach(item => {
          const dateKey = item.onLineTime.substring(5, 13)
          if (!onlineMap.has(dateKey)) onlineMap.set(dateKey, 0)
          if (!offlineMap.has(dateKey)) offlineMap.set(dateKey, 0)

          if (item.type === '球机上线') {
            typeOnlineNum++
            onlineMap.set(dateKey, onlineMap.get(dateKey) + 1)
          } else {
            typeOfflineNum++
            offlineMap.set(dateKey, offlineMap.get(dateKey) + 1)
          }
        })
        if (typeOnlineNum === 0 && typeOfflineNum === 0) {
          this.typeOnlineRate = '0%'
          this.typeOfflineRate = '0%'
        } else {
          this.typeOnlineRate = (typeOnlineNum / (typeOnlineNum + typeOfflineNum) * 100).toFixed(2) + '%'
          this.typeOfflineRate = (typeOfflineNum / (typeOnlineNum + typeOfflineNum) * 100).toFixed(2) + '%'
        }
        //将map的key加上:00
        onlineMap = new Map([...onlineMap].map(item => [item[0] + ':00', item[1]]))
        offlineMap = new Map([...offlineMap].map(item => [item[0] + ':00', item[1]]))

        this.typeData = [
          { name: '设备上线', value: typeOnlineNum },
          { name: '设备下线', value: typeOfflineNum },
        ]
        this.y_data = Array.from(onlineMap.keys())
        //根据y_data时间排序  然后再取value
        this.y_data.sort((a, b) => {
          return new Date(a) - new Date(b)
        })

        this.data1 = this.y_data.map(key => onlineMap.get(key))
        this.data2 = this.y_data.map(key => offlineMap.get(key))
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.left {
  width: 28%;
  height: 100%;
  background-color: rgb(5, 32, 75) !important;
  display: flex;
  flex-direction: column;

  .list{
    width: 100%;
    height: 70vh;
    overflow: auto;
    padding: 0 10px;
    border: 1px solid #1f3a6f;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */

    .car-item {
      width: 100%;
      height: 40px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .checkbox {
        margin-right: 10px;
        width: 20px;
        height: 20px;
      }
      .name {
        color: white;
        font-size: 18px;
      }
    }
  }
}

.list::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

.center {
  width: 38%;
  height: 100%;
  margin-left: 1%;
  margin-right: 2%;
  background-color: rgb(5, 32, 75) !important;
  display: flex;
  flex-direction: column;

  .eventType {
    width: 100%;
    height: 50%;
    background-color: rgb(5, 32, 75) !important;
  }

  .eventDetail {
    width: 100%;
    height: 50%;
    background-color: rgb(5, 32, 75) !important;
  }
}

.right {
  width: 40%;
  height: 100%;
  background-color: rgb(5, 32, 75) !important;

}


.module_title {
  background: url("../../../../../assets/screen/video/title.png") no-repeat;
  background-size: 100% 100%;
  color: white;
  font-size: 1.1rem;
  font-weight: bold;
  width: 100%;
  min-height: 35px;

  span {
    margin-left: 4rem;
  }
}

.legend {
  width: 220px;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: url('../../../../../assets/screen/btn.png') 100% no-repeat;
  background-size: 100% 100%
}


/**
  * 日历样式
 */
.sift-main {
  ::v-deep.el-range-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    display: inline-block;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 39%;
    text-align: center;
    font-size: 14px;
    color: whitesmoke;
    background: rgb(5, 32, 75, 0.9) !important;
  }
  //年、月、日的日历面板样式
  ::v-deep.sift-data {
    background: rgb(5, 32, 75, 0.9);
    .available{
      color: #adadad !important;
    }

    //日历面板头部区域的样式
    .el-date-picker__header {
      background: unset;
    }
    .el-picker-panel__footer {
      background: unset;
    }

   .el-button--text {
     border-color: transparent;
     color: whitesmoke !important;
     background: transparent;
     padding-left: 0;
     padding-right: 0;
   }
    .el-button--default{
      background: unset;
    }
    .is-plain{
      border : none;
    }
    .el-button--mini{
      color: whitesmoke !important;
    }
    // 头部lanble的样式,如(2024年3月)
    .el-date-picker__header-label {
      color: #fff;
    }

    // 切换日历的按钮样式
    .el-picker-panel__icon-btn {
      color: #fff;
    }

    // 周一二三四五的样式
    .el-date-table th {
      color: #fff;
    }

    /* 切换到年时 */
    //除头部的日历模块区域样式  当type=date点击label的年或者月时的样式
    .el-year-table,
    .el-month-table {
      background: unset;
      //头部显示范围内的年的模块的样式
      .available {
        background: unset;
        // 里面的文字的样式
        a {
          color: #1890ff;
        }
      }

      //今年
      .today {
        a {
          color: #fff;
        }
      }

      //选中的年
      .current {
        background: unset;
        border-radius: unset;

        a {
          color: yellow;
        }
      }
    }

    /* 当type=date点击label 日 的样式 */
    // 非本月的区域样式
    .prev-month,
    .next-month {
      background: unset;
      color: #8c8c8c;
    }

    //当月的显示区域样式
    .available {
      // background: blue;
      color: whitesmoke;
    }

    .current {
      // color: green;
      // background: yellow;
      div {
        span {
          background: yellow;
          color: #000;
        }
      }
    }

    .today {
      div {
        span {
          background: #1890ff;
          color: #fff;
        }
      }
    }
  }
}
</style>
