<template>
  <div>
    <Des :list="desList"
         @onClick="imgClick" />
    <a-modal :visible="previewVisible"
             :footer="null"
             @cancel="cancelImg">
      <img alt="预览附件"
           style="width: 100%"
           :src="previewImage" />
    </a-modal>
  </div>

</template>

<script lang="ts">
import { defineComponent, PropType, watchEffect } from 'vue';
import { formatValue } from '@/common/methods';
import { Des, DescriptionsList, handleDesList } from '@/common/components/commonDes';
import { QhjAccountOutInApply } from '@/services/go/ermcp/qhj/interface';
import { handlePreviewImg } from '@/common/setup/upload';

export default defineComponent({
    name: 'custom-detail-desc',
    components: { Des },
    props: {
        selectedRow: {
            type: Object as PropType<QhjAccountOutInApply>,
            default: {},
        },
    },
    setup(props) {
        const { desList, getDesList } = handleDesList();
        // 预览附件
        const { previewVisible, previewImage, cancelImg, previewImg, getImgName } = handlePreviewImg();
        function imgClick({ label }: DescriptionsList) {
            switch (label) {
                case '凭证':
                    previewImg(props.selectedRow.certificatephotourl);
                    break;
            }
        }
        watchEffect(() => {
            if (props.selectedRow.exchticket) {
                const data = props.selectedRow;
                const list = [
                    { label: '账号', value: formatValue(data.logincode) },
                    { label: '名称', value: formatValue(data.accountname) },
                    { label: '账户类型', value: data.userinfotype === 1 ? '个人' : '企业' },
                    { label: '充值金额', value: formatValue(data.amount) },
                    { label: '凭证', value: '查看', className: 'blue' },
                    { label: '申请时间', value: formatValue(data.updatetime) },
                ];
                getDesList(list);
            }
        });
        return {
            desList,
            previewVisible,
            previewImage,
            cancelImg,
            imgClick,
        };
    },
});
</script>

<style lang="less">
.custom-detail {
    .ant-form.inlineForm {
        margin-top: 20px;
    }
    .upload {
        .look {
            margin-left: 0;
        }
    }
}
</style>;
