<template>
  <a-descriptions bordered :column="2" size="small" :labelStyle="labelStyle">
    <a-descriptions-item label="办理人">{{ caseConductInfo.transactor_name }}</a-descriptions-item>
    <a-descriptions-item label="办理时间">
      {{ caseConductInfo.transact_time }}
    </a-descriptions-item>
    <a-descriptions-item label="拟拆除后照片">
      <div>
        <ImagePreview :imageList="threadAfterImage" />
      </div>
    </a-descriptions-item>
    <a-descriptions-item label="视频">
      <div v-if="videoOptions.length > 0">
        <!-- <video-player
          class="video-player vjs-custom-skin"
          v-for="(item, index) in videoOptions"
          :key="index"
          ref="videoPlayer"
          :playsinline="true"
          :options="item"
          style="width: 200px"
        ></video-player> -->
        <!-- <video v-for="(item, index) in videoOptions" :src="item.sources[0].src" style="width: 200px"></video> -->
        <video
          ref="videoPlayer"
          class="video-js vjs-default-skin"
          controls
          preload="auto"
          width="1024"
          v-for="(item, index) in videoList"
          :key="index"
          style="width: 200px"
        >
          <source :src="item.sources[0].src" type="video/mp4" />
        </video>
      </div>
      <div v-else>暂无视频</div>
    </a-descriptions-item>
  </a-descriptions>
</template>
<script lang="ts" setup>
  import { watch, ref } from 'vue';
  import { ImagePreview } from '@/components/Preview';
  import { caseHandleInfoObj, infoObj } from '../model';

  const labelStyle = ref({
    width: '100px',
  });
  const caseHandleInfo = ref<caseHandleInfoObj>({});
  const caseConductInfo = ref<infoObj>({});
  const videoList = ref<any>([]);
  const threadAfterImage: any = ref([]);
  const props = defineProps({
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    videoOptions: {
      type: Object,
      default: () => {
        return {};
      },
    },
    threadAfterImageList: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  console.log(props.videoOptions);
  caseHandleInfo.value = props.data;
  caseConductInfo.value = props.data.info;
  videoList.value = props.videoOptions;
  threadAfterImage.value = props.threadAfterImageList;

  watch(
    () => props.data,
    (newVal) => {
      caseHandleInfo.value = newVal;
      caseConductInfo.value = props.data.info;
      threadAfterImage.value = props.threadAfterImageList;
      videoList.value = props.videoOptions;
    },
  );
</script>
<style lang="less" scoped>
  ::v-deep .ant-image .ant-image-img {
    width: 100px;
    margin-bottom: 10px;
  }
</style>
