<template>
  <a-form :model="actModel" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-row :gutter="24">
          <a-col :lg="18">
              <a-row :gutter="24">
                  <a-col>
                      <a-form-item label="控制活动名称">
                          <JInput placeholder="请输入" v-model:value="actModel.caName"></JInput>
                      </a-form-item>
                  </a-col>
              </a-row>
              <a-row :gutter="24">
                  <a-col>
                      <a-form-item label="标签">
                          <!-- <a-input placeholder="请输入" v-model:value="actModel.lableName" ></a-input> -->
                          <StSelectLable :value="actModel.lableCodes" :allowClear="true" @change="updateSelectLable" />
                      </a-form-item>
                  </a-col>
              </a-row>
          </a-col>
          <a-col :span="3">
              <a-button style="width: 100%;height: 80%;line-height: 50%;" type="primary" @click="searchQuery">查询</a-button>
          </a-col>
          <a-col :span="3">
            <a-button style="width: 100%;height: 80%;line-height: 50%;" type="primary" @click="handleAdd"> 新建</a-button>
          </a-col>
      </a-row>
      <a-row :gutter="24">
          <a-col :span="24" :pull="1">
              <a-form-item label="查询结果">
                <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>
                    <!--改为table实现-->
                  <!--<a-list size="small" bordered :data-source="resultData" :pagination="pagination" style="height:200px;overflow-x: auto;">
                      <template #renderItem="{ item }">
                          <a-list-item>
                              <a-row :gutter="24" style="width:100%">
                                  <a-col :span="4"><a-button type="link">{{ item.caNo }}</a-button></a-col>
                                  <a-col :span="18"><a-button type="text">{{ item.caName }}</a-button></a-col>
                                  <a-col :span="2">
                                    <a-button type="text">
                                      <a-checkbox v-model:checked="checkBox[item.caNo]" @change="handlerChecked(item)"></a-checkbox>
                                    </a-button>
                                  </a-col>
                              </a-row>
                          </a-list-item>
                      </template>
                  </a-list>-->
              </a-form-item>
          </a-col>
      </a-row>
      <StCaMainModal @register="registerModal" @success="handleSuccess"></StCaMainModal>
  </a-form>
</template>
<script setup name="StActSelect">
import { reactive, ref, toRaw } from 'vue';
import { JInput, StSelectLable } from '/@/components/Form';
import { useModal } from '/@/components/Modal';
import { BasicTable } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { list } from '/@/views/standardlib/controlactivity/StCaMain.api';
import StCaMainModal from '/@/views/standardlib/controlactivity/components/StCaMainModal.vue';
const [registerModal, {openModal}] = useModal();
const props = defineProps({
  actinfo: Map,
  isFilte: false,
  bizType: '',
  bizNo:'',
});
const columns = [
   {
    title: '活动编号',
    align:"left",
    dataIndex: 'caNo'
   },
   {
    title: '控制活动名称',
    align:"left",
    dataIndex: 'caName'
   },
];
const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
      tableProps:{
           title: '控制活动',
           api: list,
           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) {
              console.log("==props==")
              console.log(props.isFilte)
              console.log(props.bizType)
              console.log(props.bizNo)
              console.log("props")
              params = Object.assign(params,{ column: 'updatedTime', order: 'desc',
                isFilte:props.isFilte,bizType:props.bizType,bizNo:props.bizNo})
            },
      },
  })
  const [registerTable, {setProps,reload},{ rowSelection, selectedRowKeys }] = tableContext
  function handleAdd() {
    openModal(true, {
        isUpdate: false,
        showFooter: true,
    });
  }
  function handleSuccess() {
    reload();
  }
  //const checkBox = ref({})
  function handlerChange(selectedRowKeys, selectedRows){
    //console.log(selectedRowKeys)
    if(selectedRowKeys.length==0){
        Object.assign(props.actinfo,{caNo:'',caName:''})
    }
  }
  function handlerChecked(record, selected, selectedRows, nativeEvent){
    // console.log(record)
    // console.log(selected)
    // console.log(selectedRows)
    // console.log(nativeEvent)
    if(selected){
        selectedRowKeys.value = [record.id]
        Object.assign(props.actinfo,record)
    }else{
        Object.assign(props.actinfo,{caNo:'',caName:''})
    }
  }
  function handlerRowClick({keys,rows}){
    if(keys.length>1){
        let index = keys.length -1
        selectedRowKeys.value = [rows[index].id]
        Object.assign(props.actinfo,rows[index])
    }else{
        Object.assign(props.actinfo,rows[0])
    }
  }
const actModel = ref({
    caName:'',
    lableCodes:''
})
const labelCol = reactive({
      xs: {span: 24},
      sm: {span: 4},
  })
const wrapperCol = reactive({
    xs: {span: 24},
    sm: {span: 20},
})
function updateSelectLable(val){
  actModel.value.lableCodes = val
}
// const pagination = reactive({
//     current: 1,
//     pageSize: 10,
//     total: 0,
//     showTotal: total => `共 ${total} 条数据`
// })
function searchQuery(){
    setProps({searchInfo:toRaw(actModel)});
    reload()
}
</script>