<template>
    <!-- 套期交易-执行中-新增 -->
    <a-modal class="commonModal add-spot-contract" title="新增套期项目" v-model:visible="visible" centered
        :maskClosable="false" @cancel="cancel(false)" width="890px">
        <a-form class="inlineForm" ref="formElement" :model="formData" :rules="rules">
            <a-row :gutter="24">
                <a-col :span="12">
                    <a-form-item label="项目编号" name="HedgedItemNum">
                        <a-input class="dialogInput" style="width: 200px" placeholder="请输入项目编号"
                            v-model:value="formData.HedgedItemNum" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="项目名称" name="HedgedItemName">
                        <a-input class="dialogInput" style="width: 200px" placeholder="请输入项目名称"
                            v-model:value="formData.HedgedItemName" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="套期类型" name="HedgedType">
                        <a-select class="inlineFormSelect" style="width: 200px" placeholder="请选择套期类型"
                            v-model:value="formData.HedgedType">
                            <a-select-option v-for="item in getHedgedTypeList()" :key="item.enumdicid"
                                :value="item.enumitemname">
                                {{ item.enumdicname }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="套期主体" name="TradeUserID">
                        <a-select class="inlineFormSelect" style="width: 200px" placeholder="请选择套期主体"
                            v-model:value="formData.TradeUserID">
                            <a-select-option v-for="item in traderList" :key="item.roleid" :value="item.roleid">
                                {{ item.rolename }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="计划开始" name="PlanStartDate">
                        <a-date-picker class="commonDatePicker" style="width: 200px" placeholder="请选择开始时间"
                            value-format="YYYY-MM-DD" :disabled-date="disabledStartDate"
                            v-model:value="formData.PlanStartDate" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="计划结束" name="PlanEndDate">
                        <a-date-picker class="commonDatePicker" style="width: 200px" placeholder="请选择结束时间"
                            value-format="YYYY-MM-DD" :disabled-date="disabledEndDate"
                            v-model:value="formData.PlanEndDate" />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <template #footer>
            <a-button key="submit" class="cancelBtn" :loading="loading" @click="cancel(false)">取消</a-button>
            <a-button key="submit" type="primary" :loading="loading" @click="formSubmit(() => cancel(true))">确认
            </a-button>
        </template>
    </a-modal>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { _closeModal } from '@/common/setup/modal/modal'
import { getHedgedTypeList } from '@/@next/constants/enum/hedgedType'
import { handlerManagerList } from '@/common/setup/user'
import { useForm } from './form'

export default defineComponent({
    emits: ['cancel', 'update'],
    setup(props, context) {
        const { visible, cancel } = _closeModal(context);
        const { formElement, loading, formData, rules, disabledStartDate, disabledEndDate, formSubmit } = useForm();

        const { tableList: traderList, queryTable } = handlerManagerList(loading, 2, true);
        queryTable();

        return {
            visible,
            loading,
            formElement,
            getHedgedTypeList,
            formData,
            rules,
            traderList,
            disabledStartDate,
            disabledEndDate,
            cancel,
            formSubmit,
        }
    }
})
</script>