<template>
  <div class="page-main">
    <t-button-group class="top-btn">
      <t-button :color="tabId === 1 ? 'primary' : 'secondary'" @click="tabClick(1)">风场大门</t-button>
      <t-button :color="tabId === 2 ? 'primary' : 'secondary'" @click="tabClick(2)">集控室</t-button>
    </t-button-group>
    <div class="page-top">
      <span>风场:</span>
      <t-select v-model="gateFieldData" clearable @change="getVideoSurveillanceData(true)">
        <t-option v-for="(item,index) in organizationList" :key="index" :value="item.id">{{ item.org }}</t-option>
      </t-select>
    </div>
    <div class="page-bottom">
      <div v-for="(item,index) in videoList" :key="index">
        <t-card class="card-video">
          <img :src="item.url" class="card-image">
          <div slot="foot" class="bottom">
            <span v-tooltip="item.videoDetail">{{ item.videoDetail.content | handleText }}</span>
            <div style="margin-left:auto">
              <t-button v-tooltip="item.options1" class="bottom-btn" @click="goDistinguishRecord(item.videoId)">
                <t-icon size="16" icon="image-outline"></t-icon>
              </t-button>
              <t-button v-tooltip="item.options2" class="bottom-btn" @click="handleReview(item.videoId)">
                <t-icon size="16" icon="piechart-outline"></t-icon>
              </t-button>
              <t-button v-tooltip="item.options3" class="bottom-btn">
                <t-icon size="16" icon="arrow-expand-all-outline"></t-icon>
              </t-button>
            </div>
          </div>
        </t-card>
      </div>
    </div>
    <t-pager :page-size="videoPageSize" :current="videoCurrent" :total="videoTotal" :sizer-range="[ 5, 10, 20, 30 ]" class="pager" show-elevator @on-change="onChangeGate"></t-pager>
    <replay-dialog :list="replayList" :visibled.sync="showReplayDialog" />
  </div>
</template>
<script>
import sysapi from '@/api/videoSurveillance'
import commonapi from '@/api/common'
import ReplayDialog from './components/ReplayDialog'

export default {
  components: { ReplayDialog },
  filters: {
    handleText (value) {
      if (!value) return ''
      if (value.length > 13) {
        return value.slice(0, 13) + '...'
      }
      return value
    }
  },
  data () {
    return {
      videoCurrent: 1, // 大门分页数据
      videoPageSize: 10, // 大门分页数据
      videoTotal: 100, // 大门分页总数
      tabId: 1,
      paramsObj: { // 接口请求数据
        page: 0,
        limit: 10
      },
      departments: '',
      organizationList: [], // 风场数据
      gateFieldData: 101101,
      videoList: [],
      totalList: [],
      roomList: [],

      showReplayDialog: false,
      replayList: []
    }
  },
  mounted () {
    this.getWindFiledList() // 获取风场列表
    this.getVideoSurveillanceData() // 获取视频监控界面数据
  },
  methods: {
    async handleReview (id) {
      // const res = await sysapi.getVideoPlayBack(id)
      // console.log(res)
      this.replayList = [{
        fileName: '12月14 16:55',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165526.mp4',
        fileType: 'video/mp4'
      }, {
        fileName: '12月14 16:56',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165527.mp4',
        fileType: 'video/mp4'
      }, {
        fileName: '12月14 16:57',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165528.mp4',
        fileType: 'video/mp4'
      }, {
        fileName: '12月14 16:58',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165529.mp4',
        fileType: 'video/mp4'
      }, {
        fileName: '12月14 16:59',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165530.mp4',
        fileType: 'video/mp4'
      }, {
        fileName: '12月14 17:00',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165531.mp4',
        fileType: 'video/mp4'
      }]
      this.replayList = [{
        sources: [{
          src: 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4',
          type: 'video/mp4'
        }]
      }, {
        sources: [{
          src: 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4',
          type: 'video/mp4'
        }]
      }]
      this.showReplayDialog = true
    },
    async tabClick (id) {
      this.paramsObj.page = 0
      this.videoList = []
      this.tabId = id
      this.videoCurrent = 1
      this.getVideoSurveillanceData()
    },
    getWindFiledList () {
      commonapi.getDepartments().then(resp => {
        this.organizationList = []
        console.log(resp)
        this.organizationList = resp.data.map(item => {
          return {
            org: item.name,
            id: item.id
          }
        })
      }, err => {
        this.$Message.danger('获取风场列表失败！')
        console.log(err)
      })
    },
    // 获得风场大门数据
    getVideoSurveillanceData (isWind) {
      if (isWind) {
        this.videoList = []
      }
      if (this.videoList.length <= 10) {
        this.paramsObj.page = this.videoCurrent
        sysapi.getVideoSurveillanceData({ params: this.paramsObj }).then(res => {
          this.departments = res.data.departments
          this.videoTotal = this.departments[this.tabId - 1].total
          res.data.data.forEach((element, index) => {
            if (element.departmentId === this.tabId) {
              this.videoList.push(element)
            }
          })
          this.videoList.forEach(element => {
            if (typeof (element.videoDetail) === 'object') {
              var txt = element.videoDetail.content
            } else { txt = element.videoDetail }
            element.videoDetail = {}
            element.videoDetail.content = txt
            element.videoDetail.placement = 'top'
          })
          this.getVideoSurveillanceData()
        })
      }
    },
    // 进入识别记录界面
    goDistinguishRecord (id) {
      this.$router.push({ path: '/videoSurveillance/distinguishRecord', query: { videoId: id } })
    },
    // 风场大门分页
    onChangeGate (val) {
      this.videoList = []
      this.videoCurrent = val
      this.getVideoSurveillanceData()
    }
  }
}
</script>
<style lang="scss" scoped>
.page-main {
  padding: 30px 24px 24px 24px;
  .top-btn {
    float: right;
  }
  .page-bottom {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    margin-left: -24px;
    .card-video-first,
    .card-video {
      width: 354px;
      height: 240px;
      margin-top: 20px;
      .card-image {
        width: 100%;
        height: 100%;
      }
      .bottom {
        padding: 0 12px;
        display: flex;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.5);
        height: 40px;
        color: #fff;
        font-size: 14px;
        .bottom-btn {
          color: #fff;
          border: none;
          padding: 0 !important;
          &:hover {
            color: #0089d4;
          }
        }
      }
    }
    .card-video {
      .card-footer {
        padding: 0px 0 0 24px !important;
        background: none;
        width: 100%;
        position: absolute;
        border-top: none;
        bottom: 0px;
      }
      .card-block,
      .card-video-block {
        margin-left: 24px;
        padding: 0 !important;
      }
    }
  }
  .pager {
    margin-right: auto;
    margin: 21px 0px 24px 0;
    float: right;
  }
  .btn-primary,
  .radio-group-button .form-radio:checked,
  .radio-group-button .form-radio[checked] {
    color: #0089d4;
    background-color: #fff;
    border: 1px solid #0089d4;
  }
  .btn-secondary,
  .radio-group-button .form-radio,
  .checkbox-group--button .form-checkbox .form-checkbox__inner,
  .btn-dashed-secondary,
  .btn-outline-secondary {
    background: none;
  }
}
</style>
