<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>{{videoDesc}}</div>
          <video :src="resourceUrl" controls="controls" poster="posterImg" class="video-content"></video>
        </el-form-item>
        <div style="width: 100%;height: 1px;background-color: #DCDFE6;"></div>
        <p class="title">审核结果</p>
        <el-form-item label="送审时间">
          <div>{{detailObj.startTime}}</div>
        </el-form-item>
        <el-form-item label="机审完成时间">
          <div>{{detailObj.endTime}}</div>
        </el-form-item>
        <el-form-item label="审核结果">
          <div>{{detailObj.status | videoStatusFilter}}</div>
        </el-form-item>
        <el-form-item label="审核说明">
          <div>{{detailObj.intro}}</div>
        </el-form-item>
        <el-form-item label="图片" class="image-check-video">
          <div v-for="(item, index) in detailObj.srcList" style="display: inline-block">
            <el-image
                style="width: 100px; height: 100px;margin-right: 25px"
                :src="item"
                :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;">1分30秒</p>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
  import { getVideoDetail } from '@/utils/shortvideo/videoApi';
  export default {
    data() {
      return {
        resourceUrl: '',
        videoDesc: '',
        detailObj: {
          desc: '这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整,' +
            '这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整',
          link: '',
          posterImg: '',
          startTime: '',
          endTime: '',
          status: 2,
          intro: '涉及血腥暴力这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整,' +
            '这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整',
          srcList: [
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
            'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
            '',
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
            'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
            '',
          ]
        },

      }
    },
    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.srcList[index];
          newArr[0] = newItem;
          return newArr;
        }
      },
    },
    mounted() {},
    methods: {
      init(id) {
        getVideoDetail(id).then((res) => {
          if(res.code == "000000") {
            const { id, resourceUrl, videoDesc, liteAvCheckInfo } = res.data;
            this.resourceUrl = resourceUrl;//视频地址
            this.videoDesc = videoDesc;//视频描述
          }
        }).catch((error) => {
          this.$message.error("请重试");
        })
      },
      handlerClose() {
        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>
