<template>
  <a-form :model="actModel" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-row :gutter="12">
        <a-col :span="6">
            <a-form-item label="领域:">
              <JTreeSelectDomain  placeholder="请选择" :allowClear="true" 
                            v-model:value="actModel.domainCodeMore" 
                            dict="st_domain,domain_name,domain_code" 
                            pidField="upper_domain_code"
                            pidValue="0"
                            hasChildField="has_child"
                            ></JTreeSelectDomain>
            </a-form-item>
        </a-col>
      
        <a-col :span="6">
            <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-col :span="8">
            <a-form-item label="控制活动:">
                <JInput placeholder="请输入" v-model:value="actModel.caName"></JInput>
            </a-form-item>
        </a-col>
        
        <a-col :span="4">
          <a-button  type="primary" @click="searchQuery">查询</a-button>
          <a-button  @click="handleAdd" style="margin-left:10px"> 新建</a-button>
        </a-col>
      </a-row>
      <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一对多 用户选择 未显示选择条数，及清空 -->
          <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'lableNameList'">
                  <JTagsFormat :value="record.lableNameList"  :code="record.lableCodeList" :length="3" :strLen="14"  @searchByLable="searchByLable"/>
              </template>
          </template>
      </BasicTable>
      <StCaMainModal @register="registerModal" @success="handleSuccess"></StCaMainModal>
  </a-form>
</template>
<script setup>
import { reactive, ref, toRaw } from 'vue';
import { JInput, JTreeSelectDomain, StSelectLable } from '/@/components/Form';
import { useModal } from '/@/components/Modal';
import { BasicTable } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import JTagsFormat from '../components/JTagsFormat.vue';
import { list } from '/@/views/standardlib/controlactivity/StCaMain.api';
import StCaMainModal from '/@/views/standardlib/controlactivity/components/StCaMainModal.vue';

const [registerModal, {openModal}] = useModal();
const props = defineProps({
    actCheckbox: {},
});
const columns = [
   {
    title: '活动编号',
    align:"left",
    dataIndex: 'caNo',
    width:100
   },
   {
    title: '所属领域名称',
    align:"left",
    dataIndex: 'domainName',
    width:200,
   },
   {
    title: '控制活动名称',
    align:"left",
    dataIndex: 'caName',
    width:150
   },
   {
    title: '标签',
    align: "left",
    dataIndex: 'lableNameList',
    width:150,
   },
];
const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
      tableProps:{
           title: '控制活动',
           api: list,
           columns,
           canResize:false,
           useSearchForm: false,
           scroll: { x: false,y:200 },
           actionColumn: {ifShow: false},
           clickToRowSelect: true,
           rowSelection: { 
                onSelect: handlerChecked,
            },

            showTableSetting: false,
            beforeFetch(params) {
              params = Object.assign(params,{ column: 'updatedTime', order: 'desc' })
            },
      },
  })

  const [registerTable, {setProps,reload},{ rowSelection, selectedRowKeys }] = tableContext

  function handleAdd() {
    openModal(true, {
        isUpdate: false,
        showFooter: true,
    });
  }
  function handleSuccess() {
    reload();
  }

  function handlerChecked(record, selected, selectedRows, nativeEvent){
    if(selected){
        let item = {}
        item[record.caNo] = true
        Object.assign(props.actCheckbox,item)
    }else{
        let item = {}
        item[record.caNo] = false
        Object.assign(props.actCheckbox,item)
    }
  }
  function initActCheckbox(){
    console.log("initActCheckbox")
    let actInfo = toRaw(props.actCheckbox)
    let item = {}
    for(let k in actInfo){
        console.log(k)
        item[k] = false
    }
    Object.assign(props.actCheckbox,item)
  }
  function handlerRowClick({keys,rows}){
    initActCheckbox()
    if(keys.length>0){
        let item = {}
        for(var i=0;i<keys.length;i++){
            item[rows[i].caNo] = true
        }
        Object.assign(props.actCheckbox,item)
    }
  }
const actModel = ref({
    caName:'',
    lableName:'',
    domainCodeMore:"",
    lableCodes:[]
})
const labelCol = reactive({
      xs: {span: 24},
      sm: {span: 6},
  })
const wrapperCol = reactive({
    xs: {span: 24},
    sm: {span: 18},
})

function searchQuery(){
    setProps({searchInfo:toRaw(actModel)});
    reload()
}

function searchByLable(lableCode,lableName) {
  actModel.value.lableName = lableName
  searchQuery()
}

function updateSelectLable(val){
  actModel.value.lableCodes = val
}
</script>