<template>
  <el-dialog
      title="查看视频"
      :visible="showVideoDetail"
      @close="handlerClose"
      width="780px"
  >
    <div class="video-detail-container">
      <el-form ref="searchForm" :model="detailObj"  label-suffix=":" size="small" label-width="100px">
        <el-form-item label="视频描述">
          <div>{{detailObj.videoDesc}}</div>
          <video ref="videoRef" :src="detailObj.resourceUrl" controls="controls" poster class="video-content">您的浏览器不支持 video 标签。</video>
        </el-form-item>
        <div style="width: 100%;height: 1px;background-color: #DCDFE6;"></div>
        <p class="title">审核结果</p>
        <el-form-item label="送审时间">
          <div>{{detailObj.startCheckDate | liveDateFilter}}</div>
        </el-form-item>
        <el-form-item label="机审完成时间">
          <div>{{detailObj.completeCheckDate | liveDateFilter}}</div>
        </el-form-item>
        <el-form-item label="审核结果">
<!--          <div>{{detailObj.status | videoStatusFilter}}</div>-->
          <div>{{detailObj.checkResult}}</div>
        </el-form-item>
        <el-form-item label="审核说明">
          <div>{{detailObj.checkExplain}}</div>
        </el-form-item>
        <el-form-item label="图片" class="image-check-video">
          <div v-for="(item, index) in detailObj.liteAvImages" style="display: inline-block">
            <el-image
                style="width: 100px; height: 100px;margin-right: 25px"
                :src="item.url"
                :preview-src-list="setSrc(index)">
              <div slot="error" class="image-slot err-icon-set">
                <i class="el-icon-picture-outline" style="font-size: 40px;margin-top: 25px;"></i>
              </div>
            </el-image>
            <p style="text-align: center;padding-right: 25px;">{{item.timePoint}}</p>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
  import { getVideoDetail } from '@/utils/shortvideo/videoApi';
  export default {
    data() {
      return {
        detailObj: {
          resourceUrl: '',
          videoDesc: '',
          startCheckDate: '',
          completeCheckDate: '',
          status: 2,
          checkResult: '',
          checkExplain: '',
          liteAvImages: []
        },
      }
    },
    props: {
      showVideoDetail: {
        type: Boolean,
        default: false
      },
      id: {
        type: Number | String,
        default: 0,
      }
    },
    watch: {
      id(val){
        console.log('当前查看id',val);
        this.init(val)
      }
    },
    computed: {
      setSrc(){
        return function (index) {
          let newArr = [];
          let newItem = this.detailObj.liteAvImages[index];
          newArr[0] = newItem.url;
          return newArr;
        }
      },
    },
    mounted() {},
    methods: {
      init(id) {
        getVideoDetail(id).then((res) => {
          if(res.code == "000000") {
            const { id, resourceUrl, videoDesc, liteAvCheckInfo } = res.data;
            this.detailObj = res.data;
            // this.resourceUrl = resourceUrl;//视频地址
            // this.videoDesc = videoDesc;//视频描述
          }
        }).catch((error) => {
          this.$message.error("请重试");
        })
      },
      handlerClose() {
        // console.log('视频制作',this.$refs.videoRef.play)
        if (!this.$refs.videoRef.paused) {
          this.$refs.videoRef.pause();
        }
        this.$emit('closeCheckDetail')
      },
    },
  }
</script>
<style lang="scss" scoped>
.video-detail-container{
  min-height: 500px;
  .title{
    line-height: 24px;
    font-size: 18px;
    color: #303133;
    margin: 23px 0 15px;
  }
  .video-content{
    max-height: 300px;
    width: 100%;
    margin-top: 20px;
  }
}
</style>
<style lang="scss">
  .image-check-video{
    .err-icon-set{
      width: 100px;
      height: 100px;
      background: #eee;
      text-align: center;
      vertical-align: middle;
    }
  }
</style>
