<template>
  <a-form class="inlineForm">
    <fieldset class="formFieldSet">
      <legend>基本信息</legend>
      <Des :list="baseInfo"
           @onClick="baseInfoClick" />
    </fieldset>
    <fieldset class="formFieldSet">
      <legend>现货信息</legend>
      <Des :list="spotInfo" />
    </fieldset>
    <fieldset class="formFieldSet">
      <legend>现货信息</legend>
      <Des :list="priceInfo" />
    </fieldset>
    <slot></slot>
    <a-modal :visible="previewVisible"
             :footer="null"
             @cancel="cancelImg">
      <img alt="预览附件"
           style="width: 100%"
           :src="previewImage" />
    </a-modal>
  </a-form>

</template>

<script lang="ts">
import { defineComponent, PropType, watchEffect } from 'vue';
import { getBizTypeName, getContractStatusName, getContractTypeName, getPriceTypeName } from '@/common/constants/enumsName';
import { formatTime, formatValue } from '@/common/methods';
import { Des, DescriptionsList, handleDesList } from '@/common/components/commonDes';
import { handlePreviewImg } from '@/common/setup/upload';
import { Ermcp3ContractRsp } from '@/services/go/ermcp/spot-contract/interface';

export default defineComponent({
    name: 'custom-detail-desc',
    components: { Des },
    props: {
        selectedRow: {
            type: Object as PropType<Ermcp3ContractRsp>,
            default: {},
        },
    },
    setup(props) {
        // 基本信息
        const { desList: baseInfo, getDesList: getBaseInfo } = handleDesList();
        // 现货信息
        const { desList: spotInfo, getDesList: getSpotInfo } = handleDesList();
        // 价格信息
        const { desList: priceInfo, getDesList: getPriceInfo } = handleDesList();
        // 预览附件
        const { previewVisible, previewImage, cancelImg, previewImg, getImgName } = handlePreviewImg();
        //
        function baseInfoClick({ label }: DescriptionsList) {
            const { attachment } = props.selectedRow;
            switch (label) {
                case '合同附件':
                    previewImg(attachment);
                    break;
            }
        }
        watchEffect(() => {
            if (props.selectedRow.contractno) {
                console.log('props.selectedRow', props.selectedRow);

                const data = props.selectedRow;
                // 基本信息
                const base = [
                    { label: '合同编号', value: formatValue(data.contractno) },
                    { label: '合同类型', value: getContractTypeName(data.contracttype) },
                    { label: '业务类型', value: getBizTypeName(data.biztype) },
                    { label: '采购方', value: formatValue(data.buyusername) },
                    { label: '销售方', value: formatValue(data.sellusername) },
                    { label: '合同附件', value: formatValue(getImgName(data.attachment)) },
                    { label: '状态', value: getContractStatusName(data.contracctstatus), className: 'green' },
                ];
                getBaseInfo(base);
                // 现货信息
                const spot = [
                    { label: '现货品种', value: formatValue(data.deliverygoodsname) },
                    { label: '商品', value: formatValue(data.wrstandardname) },
                    { label: '品牌', value: formatValue(data.brandname) },
                    { label: '标仓系数', value: formatValue(data.convertfactor) },
                    { label: '商品规格', value: formatValue(data.spotgoodsdesc) },
                ];
                getSpotInfo(spot);
                // 价格信息
                const price = [
                    { label: '定价类型', value: getPriceTypeName(data.pricetype) },
                    { label: '数量', value: formatValue(data.qty) + data.enumdicname },
                    { label: data.pricetype === 2 ? '点价合约' : '价格', value: data.pricetype === 2 ? formatValue(data.goodscode) : formatValue(data.price) },
                    { label: '升贴水', value: formatValue(data.pricemove) },
                    { label: '点价期', value: formatValue(formatTime(data.startdate, 'd') + '--' + formatTime(data.enddate, 'd')) },
                    { label: '交收期', value: formatValue(formatTime(data.deliverystartdate, 'd') + '--' + formatTime(data.deliveryenddate, 'd')) },
                ];
                getPriceInfo(price);
            }
        });
        return {
            baseInfo,
            spotInfo,
            priceInfo,
            previewVisible,
            previewImage,
            cancelImg,
            baseInfoClick,
        };
    },
});
</script>

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