<template>
    <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" width="70%">
        <a-form ref="formRef" :model="orderMainModel" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="validatorRules">
            <a-row class="form-row" :gutter="16">
                <a-col :lg="8">
                    <a-form-item label="订单号" name="orderCode">
                        <a-input v-model:value="orderMainModel.orderCode" placeholder="请输入订单号"/>
                    </a-form-item>
                </a-col>
                <a-col :lg="8">
                    <a-form-item label="订单类型" name="ctype">
                        <a-select placeholder="请选择订单类型" v-model:value="orderMainModel.ctype">
                            <a-select-option value="1">国内订单</a-select-option>
                            <a-select-option value="2">国际订单</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8">
                    <a-form-item label="订单日期"  name="orderDate">
                        <a-date-picker showTime valueFormat="YYYY-MM-DD HH:mm:ss" v-model:value="orderMainModel.orderDate"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row class="form-row" :gutter="16">
                <a-col :lg="8">
                    <a-form-item label="订单金额" name="orderMoney">
                        <a-input v-model:value="orderMainModel.orderMoney" placeholder="请输入订单金额"/>
                    </a-form-item>
                </a-col>
                <a-col :lg="8">
                    <a-form-item label="订单备注"  name="content">
                        <a-input v-model:value="orderMainModel.content" placeholder="请输入订单备注"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <!-- 子表单区域 -->
            <a-tabs v-model:activeKey="activeKey" @change="handleChangeTabs">
                <a-tab-pane tab="客户信息" key="tableRef1">
                    <JVxeTable
                            ref="tableRef1"
                            stripe
                            toolbar
                            rowNumber
                            rowSelection
                            resizable
                            keepSource
                            :maxHeight="300"
                            :checkbox-config="{range: true}"
                            :loading="table1.loading"
                            :columns="table1.columns"
                            :dataSource="table1.dataSource"
                    ></JVxeTable>
                </a-tab-pane>

                <a-tab-pane tab="机票信息" key="tableRef2" forceRender>
                    <JVxeTable
                            ref="tableRef2"
                            stripe
                            toolbar
                            rowNumber
                            rowSelection
                            resizable
                            keepSource
                            :maxHeight="300"
                            :checkbox-config="{range: true}"
                            :loading="table2.loading"
                            :columns="table2.columns"
                            :dataSource="table2.dataSource"
                    ></JVxeTable>
                </a-tab-pane>
            </a-tabs>
        </a-form>
    </BasicModal>
</template>
<script lang="ts">
    import {defineComponent, ref, reactive, computed, unref} from 'vue';
    import {BasicModal, useModalInner} from '/src/components/Modal';
    import { JVxeTable } from '/src/components/jeecg/JVxeTable'
    import { columns,columns1 } from './jvxetable.data'
    import { orderCustomerList,orderTicketList,saveOrUpdate } from './jvxetable.api'
    import { useJvxeMethod } from '/@/hooks/system/useJvxeMethods.ts'
    export default defineComponent({
        name: 'JVexTableModal',
        components: {BasicModal,JVxeTable},
        emits: ['success', 'register'],
        setup(props, {emit}) {
            const isUpdate = ref(true);
            const tableRef1 = ref();
            const tableRef2 = ref();
            const refKeys = ref(['tableRef1','tableRef2']);
            const activeKey = ref('tableRef1');
            const tableRefs = {tableRef1,tableRef2};
            const labelCol = reactive({
                xs: {span: 24},
                sm: {span: 5},
            });
            const wrapperCol = reactive({
                xs: {span: 24},
                sm: {span: 16},
            });
            // 客户信息
            const table1= reactive({
                loading: false,
                dataSource: [],
                columns
            });
            // 机票信息
            const table2 = reactive({
                loading: false,
                dataSource: [],
                columns: columns1
            });
            const orderMainModel = reactive({
                id: null,
                orderCode: "",
                orderMoney: "",
                ctype: "",
                content: "",
                jeecgOrderCustomerList: [],
                jeecgOrderTicketList: []
            });
            const [handleChangeTabs,handleSubmit,requestSubTableData,formRef] = useJvxeMethod(requestAddOrEdit,classifyIntoFormData,tableRefs,activeKey,refKeys);
            const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
                setModalProps({confirmLoading: false});
                reset()
                isUpdate.value = !!data?.isUpdate;
                if (unref(isUpdate)) {
                     Object.assign(orderMainModel, data.record);
                    //加载子表数据
                    let params = { id: orderMainModel.id }
                    requestSubTableData(orderCustomerList, params, table1)
                    requestSubTableData(orderTicketList, params, table2)
                }
            });
            
            const validatorRules = {orderCode: [{required: true, message: '订单号不能为空', trigger: 'blur'}] };
            const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
          
            
            function classifyIntoFormData(allValues){
                let orderMain = Object.assign(orderMainModel, allValues.formValue)
                return {
                    ...orderMain, // 展开
                    jeecgOrderCustomerList: allValues.tablesValue[0].tableData,
                    jeecgOrderTicketList: allValues.tablesValue[1].tableData
                }
            }
            function reset(){
                orderMainModel.id = null;
                orderMainModel.orderCode = "";
                orderMainModel.orderMoney = "";
                orderMainModel.orderDate = null;
                orderMainModel.ctype = "";
                orderMainModel.content = "";
                orderMainModel.jeecgOrderCustomerList = [];
                orderMainModel.jeecgOrderTicketList = []
            }
            async function requestAddOrEdit(values){
                setModalProps({confirmLoading: true});
                //提交表单
                await saveOrUpdate(values,unref(isUpdate));
                //关闭弹窗
                closeModal();
                //刷新列表
                emit('success');
            }
            return { formRef,activeKey,table1,table2,tableRef1,tableRef2,getTitle, labelCol, wrapperCol, validatorRules, orderMainModel, registerModal,handleChangeTabs, handleSubmit};
        },
    });
</script>
<style scoped>
  
</style>
