<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit" :centered="true">
    <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" @click="handleSubmit">确定</a-button>
    </template> 
    <blockquote class="info">
        请选择一个控制项，作为合并后的控制项
    </blockquote>
    
    <vxe-table
        ref="tableRef"
        show-overflow
        max-height="400"
        :data="dataList"
        :row-config="{isCurrent: true, isHover: true}"
        @current-change="currentChangeEvent"
        :columnConfig = {resizable:true}
        :scroll-y="{enabled: true, gt: 50}"
        :radio-config="{labelField: 'name', highlight: true}"
    > 
        <vxe-column type="radio" width="70"></vxe-column>
        <vxe-column field="caNo" type="html" title="编号" :visible="false"   width="1"></vxe-column>
        <vxe-column field="caName" type="html" title="控制项名称"></vxe-column>
        <vxe-column field="domainNames" type="html" title="领域" sortable width="200"></vxe-column>
        <vxe-column field="id" title="" :visible="false"></vxe-column>
    </vxe-table>
  </BasicModal>
</template>

<script lang="ts" setup>
    import { ref, unref,reactive } from 'vue';
    import { mergeAct } from '../../index.api';
    import { BasicModal, useModalInner } from '/@/components/Modal';

    const title = "合并控制项";
    const dataList = ref([])
    const tableRef = ref();
    const ids = ref([])
    const emit = defineEmits(['register','success']);
    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
        dataList.value = data.records;
        setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
        dataList.value.forEach((item) => {  
            ids.value.push(item.id)
        });  
    });
    //设置标题

    function handleCancel() {
        closeModal()
    }

    //表单提交事件
    async function handleSubmit(v) {
        const $table = tableRef.value
        const selRecords = $table.getRadioRecord()
        const tId = selRecords.id
        const newArray = ids.value.filter(item => item !== tId); 
        let params = {
            tId:tId,
            ids:newArray.join(",")
        } 
        try {
            setModalProps({confirmLoading: true});
            await mergeAct(params)
            closeModal();
            emit('success');
        } finally {
            setModalProps({confirmLoading: false});
        }
    }

    const curSelRowIndex = ref();
    const currentChangeEvent = ({ rowIndex }) => {
        const $table = tableRef.value
        $table.setRadioRow(dataList.value[rowIndex])
        curSelRowIndex.value = rowIndex
        
    }

</script>

<style lang="less" scoped>
    /** 时间和数字输入框样式 */
    :deep(.ant-input-number){
        width: 100%
    }

    :deep(.ant-calendar-picker){
        width: 100%
    }

</style>