<template>
  <a-descriptions bordered :column="2" size="small" :labelStyle="labelStyle">
    <a-descriptions-item label="办理人">{{
      caseHandleInfo.info.transactor_name
    }}</a-descriptions-item>
    <a-descriptions-item label="办理时间">
      {{ caseHandleInfo.info.transact_time }}
    </a-descriptions-item>

    <a-descriptions-item label="政府统一完善手续证明">
      <div>
        <ImagePreview :imageList="agreeImageList" />
      </div>
    </a-descriptions-item>
    <a-descriptions-item label="办理手续照片">
      <div>
        <ImagePreview :imageList="checkoutImageList" />
      </div>
    </a-descriptions-item>

    <a-descriptions-item label="手续有效期">
      {{ caseHandleInfo.info.procedure_indate }}
    </a-descriptions-item>
    <a-descriptions-item label="批准文件编号">
      {{ caseHandleInfo.info.evidence_file_number }}
    </a-descriptions-item>
    <a-descriptions-item label="批文有效日期">
      {{ caseHandleInfo.info.evidence_file_indate }}
    </a-descriptions-item>

    <a-descriptions-item label="勘测定界图">
      <div>
        <ImagePreview :imageList="boundaryImageList" />
      </div>
    </a-descriptions-item>
  </a-descriptions>
</template>
<script lang="ts" setup>
  import { watch, ref } from 'vue';
  import { ImagePreview } from '@/components/Preview';
  import { caseHandleInfoObj } from '../model';
  const labelStyle = ref({
    width: '100px',
  });
  const caseHandleInfo = ref<caseHandleInfoObj>({
    info: {},
  });
  const playerOptions: any = ref([]);
  const checkoutImageList: any = ref([]);
  const boundaryImageList: any = ref([]);
  const agreeImageList: any = ref([]);
  const props = defineProps({
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    playerOptions: {
      type: Object,
      default: () => {
        return {};
      },
    },
    checkoutImageList: {
      type: Object,
      default: () => {
        return {};
      },
    },
    boundaryImageList: {
      type: Object,
      default: () => {
        return {};
      },
    },
    agreeImageList: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  caseHandleInfo.value = props.data;
  playerOptions.value = props.playerOptions;
  boundaryImageList.value = props.checkoutImageList;
  checkoutImageList.value = props.checkoutImageList;
  agreeImageList.value = props.checkoutImageList;
  const imgList = ref([
    'https://picsum.photos/id/66/346/216',
    'https://picsum.photos/id/67/346/216',
    'https://picsum.photos/id/68/346/216',
  ]);

  watch(
    () => props.data,
    (newVal, oldVal) => {
      caseHandleInfo.value = newVal;
      playerOptions.value = props.playerOptions;
      boundaryImageList.value = props.checkoutImageList;
      checkoutImageList.value = props.checkoutImageList;
      agreeImageList.value = props.checkoutImageList;
    },
  );
</script>
<style lang="less" scoped>
  ::v-deep .ant-image .ant-image-img {
    width: 85px;
    margin-bottom: 10px;
  }
</style>
