<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="立案号">
      {{ caseConductInfo.registr_number }}
    </a-descriptions-item>
    <a-descriptions-item label="当事人姓名">
      {{ caseConductInfo.illegal_contact }}
    </a-descriptions-item>
    <a-descriptions-item label="身份证号码">
      {{ caseConductInfo.illegal_contact_idcard }}
    </a-descriptions-item>
    <a-descriptions-item label="违法类型">
      {{ caseConductInfo.illegal_type }}
    </a-descriptions-item>

    <a-descriptions-item label="处罚通知书">
      <div v-if="punishImage.length > 0">
        <ImagePreview :imageList="punishImage" />
      </div>
      <div v-else>暂无处罚通知书</div>
    </a-descriptions-item>
    <a-descriptions-item label="交款通知单">
      <div v-if="paymentImage.length > 0">
        <ImagePreview :imageList="paymentImage" />
      </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 paymentImage: any = ref([]);
  const punishImage: any = ref([]);
  const props = defineProps({
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    paymentImageList: {
      type: Object,
      default: () => {
        return {};
      },
    },
    punishImageList: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  caseHandleInfo.value = props.data;
  caseConductInfo.value = props.data.info;
  paymentImage.value = props.paymentImageList;
  punishImage.value = props.punishImageList;

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