<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="立案号">
        {{ caseHandleInfo.info.registr_number }}
      </a-descriptions-item>
      <a-descriptions-item label="当事人姓名">
        {{ caseHandleInfo.info.illegal_contact }}
      </a-descriptions-item>
      <a-descriptions-item label="身份证号码">
        {{ caseHandleInfo.info.illegal_contact_idcard }}
      </a-descriptions-item>
      <a-descriptions-item label="违法类型">
        {{ caseHandleInfo.info.illegal_type }}
      </a-descriptions-item>
  
      <a-descriptions-item label="处罚通知书">
        <div>
          <ImagePreview :imageList="punishImageList" />
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="交款通知单">
        <div>
          <ImagePreview :imageList="paymentImageList" />
        </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 paymentImageList: any = ref([]);
    const punishImageList: any = ref([]);
    const props = defineProps({
      data: {
        type: Object,
        default: () => {
          return {};
        },
      },
      playerOptions: {
        type: Object,
        default: () => {
          return {};
        },
      },
      paymentImageList: {
        type: Object,
        default: () => {
          return {};
        },
      },
      punishImageList: {
        type: Object,
        default: () => {
          return {};
        },
      },
    });
    caseHandleInfo.value = props.data;
    playerOptions.value = props.playerOptions;
    paymentImageList.value = props.paymentImageList;
    punishImageList.value = props.paymentImageList;
    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;
        paymentImageList.value = props.paymentImageList;
        punishImageList.value = props.paymentImageList;
      },
    );
  </script>
  <style lang="less" scoped>
    ::v-deep .ant-image .ant-image-img {
      width: 85px;
      margin-bottom: 10px;
    }
  </style>
  