<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 v-if="agreeImage.length > 0">
        <ImagePreview :imageList="agreeImage" />
      </div>
      <div v-else>暂无政府统一完善手续证明</div>
    </a-descriptions-item>
    <a-descriptions-item label="办理手续照片">
      <div v-if="checkoutImage.length > 0">
        <ImagePreview :imageList="checkoutImage" />
      </div>
      <div v-else>暂无办理手续照片</div>
    </a-descriptions-item>

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

    <a-descriptions-item label="勘测定界图">
      <div v-if="boundaryImage.length > 0">
        <ImagePreview :imageList="boundaryImage" />
      </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>({
    info: {},
  });
  const caseConductInfo = ref<infoObj>({});
  const checkoutImage: any = ref([]);
  const boundaryImage: any = ref([]);
  const agreeImage: any = ref([]);
  const props = defineProps({
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    checkoutImageList: {
      type: Object,
      default: () => {
        return {};
      },
    },
    boundaryImageList: {
      type: Object,
      default: () => {
        return {};
      },
    },
    agreeImageList: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  caseHandleInfo.value = props.data;
  caseConductInfo.value = props.data.info;
  boundaryImage.value = props.boundaryImageList;
  checkoutImage.value = props.checkoutImageList;
  agreeImage.value = props.agreeImageList;

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