<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit">
    <div>
      <a-form
      ref="formRef"
      name="advanced_search"
      :model="formState"
      :labelCol="{xs: {span: 24},sm: {span: 3},}"
      :wrapperCol="{xs: {span: 24},sm: {span: 21},}"
    >
    <a-row :gutter="24">
      <a-col :span="21">
        <a-form-item label="项目名称" :labelCol="{xs: {span: 24},sm: {span: 3},}" :wrapperCol="{xs: {span: 24},sm: {span: 21},}">
          <JInput v-model:value="formState.projectName" placeholder="请输入关键字" :allowClear="true" @keyup.enter="searchQuery" ></JInput>
        </a-form-item>
      </a-col>
      <a-col :span="3">
        <a-button type="primary" @click="searchQuery">查询</a-button>
      </a-col>
    </a-row>
    </a-form>
      <BasicTable @register="registerTable" :rowSelection="rowSelection" @selection-change="handlerRowClick">
          <!-- update-begin-author:taoyan date:2022-5-25 for: VUEN-1112一对多 用户选择 未显示选择条数，及清空 -->
          <template #tableTitle></template>
          <!-- update-end-author:taoyan date:2022-5-25 for: VUEN-1112一对多 用户选择 未显示选择条数，及清空 -->
      </BasicTable>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
import { message } from 'ant-design-vue';
import { computed, ref, toRaw, unref } from 'vue';
import { projectImport } from '../StProjectConfig.api';
import { listPrepar } from '../StProjectCre.api';
import { JInput } from '/@/components/Form';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicTable } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';

// Emits声明
const emit = defineEmits(['register','success']);
const isUpdate = ref(true);
const formState = ref({
  projectName:''
})
const orgData = ref({})
//表单赋值
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
    setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
    isUpdate.value = !!data?.isUpdate;
    if (unref(isUpdate)) {
      orgData.value = data.record
    }
});
// table
const actinfo = ref({
  id:'',
  projectName:''
})
const columns = [
{
   title: '项目名称',
   align:"left",
   dataIndex: 'projectName'
  },
   {
    title: '项目描述',
    align:"left",
    dataIndex: 'projectDesc'
   },
];
const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
      tableProps:{
           title: '控制活动',
           api: listPrepar,
           columns,
           canResize:false,
           useSearchForm: false,
           scroll: { x: false },
           actionColumn: {ifShow: false},
           clickToRowSelect: true,
           rowSelection: { 
                hideSelectAll: true,
                onSelect: handlerChecked,
                onChange: handlerChange,
            },
        //    actionColumn: {
        //        width: 160
        //     },
            showTableSetting: false,
            beforeFetch(params) {
              params = Object.assign(params,{ column: 'updatedTime', order: 'desc',submitStatus:'1'})
            },
      },
  })
  function handlerChange(selectedRowKeys, selectedRows){
    //console.log(selectedRowKeys)
    if(selectedRowKeys.length==0){
      actinfo.value = Object.assign(actinfo.value,{id:'',projectName:''})
    }
  }
  function handlerChecked(record, selected, selectedRows, nativeEvent){
    // console.log(record)
    // console.log(selected)
    // console.log(selectedRows)
    // console.log(nativeEvent)
    if(selected){
        selectedRowKeys.value = [record.id]
        actinfo.value = Object.assign(actinfo.value,record)
    }else{
      actinfo.value = Object.assign(actinfo.value,{id:'',projectName:''})
    }
  }
  function handlerRowClick({keys,rows}){
    if(keys.length>1){
        let index = keys.length -1
        selectedRowKeys.value = [rows[index].id]
        actinfo.value = Object.assign(actinfo.value,rows[index])
    }else{
      actinfo.value = Object.assign(actinfo.value,rows[0])
    }
  }
  const [registerTable, {setProps,reload},{ rowSelection, selectedRowKeys }] = tableContext
  function searchQuery(){
      setProps({searchInfo:toRaw(formState)});
      reload()
  }
    //设置标题
    const title = computed(() => (!unref(isUpdate) ? '新增' : '导入项目配置'));
    //表单提交事件
    async function handleSubmit(v) {
        try {
            if(!actinfo.value.id){
              message.warning("请选择项目")
              return
            }
            setModalProps({confirmLoading: true});
            //提交表单
            let saveData = {}
            saveData.id = orgData.value.id
            saveData.copyId = actinfo.value.id
            console.log(saveData)
            await projectImport(saveData)
            //关闭弹窗
            closeModal();
            //刷新列表
            emit('success');
        } finally {
            setModalProps({confirmLoading: false});
        }
    }
</script>

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

	:deep(.ant-calendar-picker){
		width: 100%
	}
</style>