<template>
  <div class="max-big-box">
    <!--返回按钮-->
    <div class="out-page-button cursor_pointer" @click="outButton">
      <img src="~@/assets/images/icon_25.png">
      <p>返回</p>
    </div>
    <!--<div class="time-box">-->
      <!--<p>日期：</p>-->
      <!--<p class="cursor_pointer" @click="openTimeBox('1')">{{playTime}}</p>-->
      <!--<p>-</p>-->
      <!--<p class="cursor_pointer" @click="openTimeBox('2')">{{endTime}}</p>-->
    <!--</div>-->
    <div class="bottom-max-box TabStrip">
      <div class="bottom-for-box" v-for="(item,index) in videoData" :key="index">
        <div>
          <img src="~@/assets/images/icon_18.png">
          <p>{{item.name}}</p>
          <p>{{item.time}}</p>
        </div>
        <!--<img class="img-box" :src="item.url">-->
        <mpegts-video style="display: inline-block" :videoProps="item"></mpegts-video>
      </div>
    </div>
    <!--时间日历-->
    <div class="time-max-big-box" v-if="timeType!=0">
      <div class="time-big-box">
        <el-calendar class="time-min-box" v-model="timeValue">
        </el-calendar>
        <div class="button-box">
          <p class="cursor_pointer" @click="openTimeBox('0')">返回</p>
          <p class="cursor_pointer" @click="clearTimeData">清除</p>
          <p class="cursor_pointer" @click="setTimeData">确定</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { playStartList } from '@/api/userApi'
  import mpegtsVideo from './mpegtsVideo.vue'
  export default {
    name: "warehouseMonitoringInformation",//仓库监控信息
    props:["deviceIds"],
    components: {
      mpegtsVideo,
    },
    data () {
      return {
        //日历时间
        timeValue: new Date(),
        timeType:0,
        //搜索时间
        playTime:"请选择时间",
        endTime:"请选择时间",
        //数据
        videoData:[
          // {
          //   name:"仓库内摄像头1",
          //   time:"2021-10-10 10:10:10",
          //   url:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1573622612,1679629767&fm=26&gp=0.jpg"
          // },
        ]
      }
    },

    created(){

    },
    mounted() {
      this.playStartList();
    },
    methods: {
      async playStartList () {
        const { data } = await playStartList({deviceIds:this.deviceIds});
        console.log('data1',data)
        if(data.code==200){
          let list = [];
          for(let i=0;i<data.data.length;i++){
            list.push({
              name:'',
              time:'',
              width:397,    //(宽度:非必传-默认600)
              height:216,   //(高度:非必传-默认338)
              url:data.data[i].flv,
            })
          }
          this.$set(this,'videoData',list);
        }
      },
      //时间选择事件
      openTimeBox(type){
        this.timeType=type
      },
      setTimeData(){
        let year = this.timeValue.getFullYear();
        let month = this.timeValue.getMonth()+1;
        let day = this.timeValue.getDate();
        if(this.timeType==1){
          this.playTime = year+'-'+month+'-'+day;
        }else if(this.timeType==2){
          this.endTime = year+'-'+month+'-'+day;
        }else if(this.timeType==3){
          this.playTimeOne = year+'-'+month+'-'+day;
        }else if(this.timeType==4){
          this.endTimeOne = year+'-'+month+'-'+day;
        }
        this.timeType = 0;
      },
      clearTimeData(){
        if(this.timeType==1){
          this.playTime = "请选择时间";
        }else if(this.timeType==2){
          this.endTime = "请选择时间";
        }else if(this.timeType==3){
          this.playTimeOne = "请选择时间";
        }else if(this.timeType==4){
          this.endTimeOne = "请选择时间";
        }
        this.timeType = 0;
      },
      // 调用父组件方法退出当前页面
      outButton(){
        this.$parent.outPage();
      },

    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    height:100%;
    width:100%;
    //返回按钮
    .out-page-button
      height:30px;
      width:93px;
      margin:0 0 0 106px;
      background:url("~@/assets/images/button_02.png");
      background-size 100% 100%
      display flex
      img
        display block
        height:12px;
        width:7px;
        margin:9px 10px 0 22px;
      p
        line-height:30px;
        font-size:$font_12;
        color:$color_ff;
        text-align left
    .time-box
      width:400px;
      display flex
      margin:20px 0 0 105px;
      p
        color:$color_ff;
      p:nth-child(1)
        width:50px;
        line-height:30px;
        font-size:$font_14;
        text-align left
      p:nth-child(2)
        width:120px;
        height:30px;
        background url("~@/assets/images/button_08.png")
        background-size 100% 100%
        font-size:$font_12;
        line-height:30px;
      p:nth-child(3)
        width:27px;
        line-height:30px;
      p:nth-child(4)
        width:120px;
        height:30px;
        background url("~@/assets/images/button_08.png")
        background-size 100% 100%
        line-height:30px;
        font-size:$font_12;
    .bottom-max-box
      margin:20px auto;
      padding-bottom:40px;
      width:1796px;
      height:760px;
      overflow-x:hidden;
      overflow-y:scroll;
      text-align left
      .bottom-for-box
        display inline-block
        height:286px;
        width:446px;
        background url("~@/assets/images/min_back_07.png")
        background-size 100% 100%
        margin:21px 74px 0;
        div
          display flex
          margin:14px 0 0 30px;
          img
            display block
            height:20px;
            width:20px;
            margin:5px 10px 0 0;
          p
            color:$color_ff;
            line-height:30px;
            text-align left
          p:nth-child(2)
            font-size:$font_16;
            width:240px;
          p:nth-child(3)
            font-size:$font_14;
        .img-box
          border-radius:10px;
          width:397px;
          height:216px;
          margin:9px 25px 0;
  //时间日历
  .time-max-big-box
    z-index 6
    height:100%;
    width:100%;
    position: absolute
    top:0;
    left:0;
    background:rgba(0,0,0,0.3);
    .time-big-box
      z-index 6
      height:750px;
      width:660px;
      position: absolute
      top:50%;
      left:50%;
      transform :translate3d(-50%,-50%,0)
      margin:auto;
      background $color_ff
      border-radius:8px;
      border:4px solid $theme;
      .button-box
        display flex
        color:$color_ff;
        width:390px;
        margin:20px auto;
        p:nth-child(1)
          height:30px;
          line-height:30px;
          width:120px;
          background:url("~@/assets/images/button_10.png");
          background-size 100% 100%
        p:nth-child(2)
          margin-left:20px;
          height:30px;
          line-height:30px;
          width:120px;
          background:url("~@/assets/images/button_05.png");
          background-size 100% 100%
        p:nth-child(3)
          margin-left:20px;
          height:30px;
          line-height:30px;
          width:120px;
          background:url("~@/assets/images/button_02.png");
          background-size 100% 100%
</style>
