<template>
    <!-- 套保品种详情 -->
    <a-modal
        class="commonModal hedgingDetail"
        title="详情"
        v-if="visible"
        v-model:visible="visible"
        centered
        :maskClosable="false"
        @cancel="cancel"
        width="890px"
    >
        <template #footer>
            <a-button key="submit" type="primary" :loading="loading" @click="submit">完成</a-button>
        </template>
        <a-form class="inlineForm" ref="formRef">
            <fieldset class="formFieldSet">
                <legend>基本信息</legend>
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-form-item label="套保品种名称" name="deliverygoodsname">
                            <span class="white">{{selctedMG.mg.middlegoodsname}}</span>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="套保品种单位" name="deliverygoodscode">
                            <span class="white">{{selctedMG.mg.enumdicname}}</span>
                        </a-form-item>
                    </a-col>
                </a-row>
            </fieldset>
            <fieldset class="formFieldSet">
                <legend>修改套保比例列表</legend>
                <a-row :gutter="24" class="dialogRowTitle">
                    <a-col :span="5">
                        <span>修改时间</span>
                    </a-col>
                    <a-col :span="5">
                        <span>修改前比例</span>
                    </a-col>
                    <a-col :span="5">
                        <span>修改后比例</span>
                    </a-col>
                    <a-col :span="5">
                        <span>备注</span>
                    </a-col>
                    <a-col :span="4" class="tc">
                        <span>修改人</span>
                    </a-col>
                </a-row>
                <a-row
                    :gutter="24"
                    class="dialogRowTitle"
                    v-for="(item, index) in list"
                    :key="index"
                >
                    <a-col :span="5" class="nowrap">
                        <span class="white">{{item.updatetime}}</span>
                    </a-col>
                    <a-col :span="5">
                        <span class="white">{{item.beforevalue}}</span>
                    </a-col>
                    <a-col :span="5">
                        <span class="white">{{item.aftervalue}}</span>
                    </a-col>
                    <a-col :span="5" class="ellipse">
                        <span class="white">{{item.logremark}}</span>
                    </a-col>
                    <a-col :span="4" class="tc">
                        <span class="white">{{item.applyname}}</span>
                    </a-col>
                </a-row>
            </fieldset>
        </a-form>
    </a-modal>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watchEffect } from 'vue';
import { closeModal } from '@/common/setup/modal/index';
import { initMG } from '../../list/hedging-variety/setup';
import { Ermcp3MiddleGoodsDetail2, ErmcpMiddleGoodsChangeLog } from '@/services/go/ermcp/goodsInfo/interface';
import { QueryMiddleGoodsChange } from '@/services/go/ermcp/goodsInfo';
import { message } from 'ant-design-vue';

export default defineComponent({
    name: 'hedging-detail',
    components: {},
    props: {
        selctedMG: {
            default: initMG,
            type: Object as PropType<Ermcp3MiddleGoodsDetail2>,
        },
    },
    setup(props) {
        const { visible, cancel } = closeModal('detail');
        const list = ref<ErmcpMiddleGoodsChangeLog[]>([]);
        const loading = ref<boolean>(false);
        function submit() {
            cancel();
        }
        watchEffect(() => {
            if (props.selctedMG.mg.middlegoodsid && visible.value) {
                QueryMiddleGoodsChange(props.selctedMG.mg.middlegoodsid)
                    .then((res) => {
                        list.value = res;
                    })
                    .catch((err) => message.error(err));
            }
        });
        return {
            visible,
            cancel,
            submit,
            loading,
            maskClosableFlag: false,
            list,
        };
    },
});
</script>

<style lang="less">
.hedgingDetail {
    .ellipse {
        white-space: nowrap;
        overflow: hidden;
        width: 20%;
        text-overflow: ellipsis;
    }
}
</style
>;
