<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="900" @ok="handleSubmit" class="custom-modal">
    <template #footer>
        <a-button  key="back" @click="handleCancel">取消</a-button>
        <a-button  key="submit" type="primary" @click="handleSubmit">确定</a-button>
      </template>  
    <ActSelectMul :actinfo="actinfo" @setReturnVals="setReturnVals"/>
  </BasicModal>
</template>

<script lang="ts" setup>
import { computed, ref, unref } from 'vue';
import ActSelectMul from '../components/ActSelectMul.vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';

    const { createMessage, createConfirm } = useMessage();
    const actinfo = ref({})
    const ids = ref([])
    const emit = defineEmits(['register','success','setModifyAct']);
    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
        ids.value = data.ids;
        setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
    });

    //设置标题
    const title = "修改活动"
    const selActList = ref([])
   
    function handleCancel() {
        closeModal()
    }


    function setReturnVals(data) {
        selActList.value = data
    }
    
    //表单提交事件
    async function handleSubmit(v) {
        try {
            if(selActList.value.length==0){
              createMessage.warning('请选择记录!');
              return false
            }
            emit('setModifyAct',selActList.value,ids.value);
            setModalProps({confirmLoading: true});
            closeModal();
        } finally {
            setModalProps({confirmLoading: false});
        }
    }
</script>

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

	:deep(.ant-calendar-picker){
		width: 100%
	}
  :deep .custom-modal {
    position: fixed;
    top: -150px;
  }

  .custom-modal /deep/ {
  position: fixed;
  top: -350px;
}
</style>