<template>
  <el-dialog
    title="查看视频"
    :model-value="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>{{ $filters.liveDateFilter(detailObj.startCheckDate) }}</div>
        </el-form-item>
        <el-form-item label="机审完成时间">
          <div>{{ $filters.liveDateFilter(detailObj.completeCheckDate) }}</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)"
            >
              <template v-slot:error>
                <div class="image-slot err-icon-set">
                  <el-icon style="font-size: 40px; margin-top: 25px"
                    ><el-icon-picture-outline
                  /></el-icon>
                </div>
              </template>
            </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 { PictureOutline as ElIconPictureOutline } from '@element-plus/icons'
import { $on, $off, $once, $emit } from '../../../utils/gogocodeTransfer'
import { getVideoDetail } from '@/utils/shortvideo/videoApi'
export default {
  components: {
    ElIconPictureOutline,
  },
  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: {
    showVideoDetail(val) {
      if (val) {
        this.init(this.id)
      }
    },
    // 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()
      }
      $emit(this, 'closeCheckDetail')
    },
  },
  emits: ['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>
