<template>
    <!-- 现货品种详情 -->
    <a-modal
        class="commonModal spot-detail"
        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" :model="formState" :rules="rules">
            <fieldset class="formFieldSet">
                <legend>基本信息</legend>
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-form-item label="现货品种名称" name="deliverygoodsname">
                            <span
                                class="white"
                            >{{ formatValue(selectedRow.data.deliverygoodsname) }}</span>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="现货品种代码" name="deliverygoodscode">
                            <span
                                class="white"
                            >{{ formatValue(selectedRow.data.deliverygoodscode) }}</span>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-form-item label="单位" name="unitid">
                            <span class="white">{{ formatValue(selectedRow.data.enumdicname) }}</span>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="状态" name="unitid">
                            <span class="green">{{ getValidName(selectedRow.data.isvalid) }}</span>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :span="24">
                        <a-form-item label="备注" name="remark">
                            <span class="white">{{ formatValue(selectedRow.data.remark) }}</span>
                        </a-form-item>
                    </a-col>
                </a-row>
            </fieldset>
            <fieldset class="formFieldSet">
                <legend>商品信息</legend>
                <a-row :gutter="24" class="dialogRowTitle">
                    <a-col :span="8">
                        <span>商品</span>
                    </a-col>
                    <a-col :span="8">
                        <span>单位</span>
                    </a-col>
                    <a-col :span="8">
                        <span>标仓系数</span>
                    </a-col>
                    <template v-for="item in selectedRow.gmlist" :key="item.wrstandardid">
                        <a-col :span="8" class="bt1">
                            <div class="white">{{ item.wrstandardname }}</div>
                        </a-col>
                        <a-col :span="8">
                            <div class="white">{{ item.enumdicname }}</div>
                        </a-col>
                        <a-col :span="8">
                            <div class="white">{{ item.convertfactor }}</div>
                        </a-col>
                    </template>
                </a-row>
            </fieldset>
            <fieldset class="formFieldSet">
                <legend>品牌信息</legend>
                <a-row :gutter="24" class="dialogRowTitle dialogRowTitle2">
                    <a-col :span="24">
                        <span>品牌</span>
                    </a-col>
                    <template v-for="item in selectedRow.gblist" :key="item.brandid">
                        <a-col :span="24" class="bt1">
                            <div class="white">{{ item.brandname }}</div>
                        </a-col>
                    </template>
                </a-row>
            </fieldset>
            <fieldset class="formFieldSet">
                <legend>套保品种信息</legend>
                <a-row :gutter="24" class="dialogRowTitle">
                    <a-col :span="8">
                        <span>套保品种</span>
                    </a-col>
                    <a-col :span="8">
                        <span>单位</span>
                    </a-col>
                    <a-col :span="8">
                        <span>套保系数</span>
                    </a-col>
                    <template v-for="item in selectedRow.mgList" :key="item.mg.middlegoodsid">
                        <a-col :span="8" class="bt1">
                            <div class="white">{{ item.mg.middlegoodsname }}</div>
                        </a-col>
                        <a-col :span="8">
                            <div class="white">{{ item.mg.enumdicname }}</div>
                        </a-col>
                        <a-col :span="8">
                            <div class="white">{{ item.mg.needhedgeratio }}</div>
                        </a-col>
                    </template>
                </a-row>
            </fieldset>
        </a-form>
    </a-modal>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';
import { closeModal } from '@/common/setup/modal/index';
import { formatValue, initData } from '@/common/methods/index';
import { ErmcpDeliveryGoodsDetailEx } from '@/services/go/ermcp/goodsInfo/interface';
import { getValidName } from '@/common/constants/enumsName';

export default defineComponent({
    name: 'spot-detail',
    components: {},
    props: {
        selectedRow: {
            type: Object as PropType<ErmcpDeliveryGoodsDetailEx>,
            default: {},
        },
    },
    setup() {
        const { visible, cancel } = closeModal('detail');

        const loading = ref<boolean>(false);

        function submit() {
            cancel();
        }

        initData(() => {});
        return {
            visible,
            cancel,
            submit,
            loading,
            maskClosableFlag: false,
            formatValue,
            getValidName,
        };
    },
});
</script>

<style lang="less">
.spot-detail {
    fieldset {
        padding-right: 170px;
    }

    .upload {
        display: inline-flex;

        .ant-btn.uploadBtn {
            width: 60px;
            height: 30px;
            background: @m-blue0;
            border: 0;
            padding: 0;
            text-align: center;
            font-size: 14px;
            color: @m-white0;
            .rounded-corners(3px);

            &:hover {
                background: @m-blue0-hover;
                color: @m-white0-hover;
            }
        }

        .look {
            color: @m-blue0;
            font-size: 14px;
            margin-left: 10px;
            cursor: pointer;
        }
    }

    div.white {
        width: 100%;
        text-align: center;
    }
}
</style
>;
