<template>
  <a-form :model="searchModal" :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="searchModal.projectName" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="项目类型" :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }" :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }">
              <!-- <a-input placeholder="请输入" v-model:value="actModel.lableName" ></a-input> -->
              <JSearchSelect placeholder="请输入" v-model:value="searchModal.projectType" dict="projecttype" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="执行部门" :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }" :wrapperCol="{ xs: { span: 24 }, sm: { span: 18 } }">
              <JSelectDept placeholder="请输入" v-model:value="jSelectDeptVal" :multiple="false" @change="updateJSelectDept" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="4">
        <a-button style="width: 100%; height: 80%; line-height: 50%" type="primary" @click="searchQuery">查询</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>
  </a-form>
</template>
<script setup name="PlanSelect">
  import { reactive, ref, toRaw } from 'vue';
  import { JInput, JSearchSelect, JSelectDept } from '/@/components/Form';
  import { useModal } from '/@/components/Modal';
  import { BasicTable } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { list } from '/@/views/project/plan/StPlanMan.api.ts';
  const [registerModal, { openModal }] = useModal();
  const jSelectDeptVal = ref([]);
  const props = defineProps({
    selectData: Map,
  });
  const columns = [
    {
      title: '项目名称',
      align: 'left',
      dataIndex: 'projectName',
    },
    {
      title: '项目类型',
      align: 'left',
      dataIndex: 'projectTypeName',
    },
    {
      title: '执行部门',
      align: 'center',
      dataIndex: 'execDepName',
    },
    {
      title: '负责人',
      align: 'center',
      dataIndex: 'headName',
    },
  ];
  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) {
        params = Object.assign(params, { column: 'updatedTime', order: 'desc', planFlag: ['3', '6'], planSelect: '1' });
      },
    },
  });
  const [registerTable, { setProps, reload }, { rowSelection, selectedRowKeys }] = tableContext;

  function handleSuccess() {
    reload();
  }
  //const checkBox = ref({})
  function handlerChange(selectedRowKeys, selectedRows) {
    if (selectedRowKeys.length == 0) {
      // Object.assign(props.selectData,{caNo:'',caName:''})
      props.selectData.value = {};
    }
  }
  function handlerChecked(record, selected, selectedRows, nativeEvent) {
    if (selected) {
      selectedRowKeys.value = [record.id];
      Object.assign(props.selectData, record);
    } else {
      // Object.assign(props.selectData,{caNo:'',caName:''})
      props.selectData.value = {};
    }
  }
  function handlerRowClick({ keys, rows }) {
    if (keys.length > 1) {
      let index = keys.length - 1;
      selectedRowKeys.value = [rows[index].id];
      Object.assign(props.selectData, rows[index]);
    } else {
      Object.assign(props.selectData, rows[0]);
    }
  }
  const searchModal = ref({
    projectName: '',
    projectType: '',
    execDepCode: '',
  });
  const labelCol = reactive({
    xs: { span: 24 },
    sm: { span: 4 },
  });
  const wrapperCol = reactive({
    xs: { span: 24 },
    sm: { span: 20 },
  });
  function updateJSelectDept(val) {
    if (val.length > 0) {
      let d = val[0];
      searchModal.value.execDepCode = d;
    } else {
      jSelectDeptVal.value = [];
      searchModal.value.execDepCode = '';
    }
  }
  // const pagination = reactive({
  //     current: 1,
  //     pageSize: 10,
  //     total: 0,
  //     showTotal: total => `共 ${total} 条数据`
  // })
  function searchQuery() {
    setProps({ searchInfo: toRaw(searchModal) });
    reload();
  }
</script>
