<template>
  <div>
    <a-space direction="vertical">
    <div>
      <a-space>
      <a-button type="primary" @click="batchFp">批量分配</a-button>
      <a-button @click="onDefHandlerExportXls">导出资料清单</a-button>
      </a-space>
    </div>
    <div>
    <a-radio-group v-model:value="size"  @change="redioChange">
      <a-radio-button value="large">全部</a-radio-button>
      <a-radio-button value="middle">未配置</a-radio-button>
      <a-radio-button value="small">已配置</a-radio-button>
    </a-radio-group>
    <lable style="margin-left: 20px;">所属领域:</lable>
    <div style="width: 200px;margin-left: 10px;display: inline-block;">
     <!--<a-select v-model:value="domainCode"  style="width: 100%;!important" ></a-select>-->
     <JTreeSelectDomain  placeholder="请选择" :allowClear="true" 
                            v-model:value="domainCode" 
                            dict="st_domain,domain_name,domain_code" 
                            pidField="upper_domain_code"
                            pidValue="0"
                            hasChildField="has_child"
                            @change="domainChange"
                            ></JTreeSelectDomain>
    </div>
    <span style="position: absolute;right: 26px;">还有{{ nConfigCount }}项未配置</span>
    </div>
    </a-space>
    <BasicTable @register="registerTable" :rowSelection="rowSelection" @fetch-success="fetchCallBack">
        <!-- update-begin-author:taoyan date:2022-5-25 for: VUEN-1112一对多 用户选择 未显示选择条数，及清空 -->
        <template #tableTitle></template>
        <template #bodyCell="{ text, record, index, column }">
            <template v-if="column.key === 'checkDocText'">{{ record.checkDocText }}
              <template v-if="record.hasFile === '1'">
                <a-button shape="circle" :icon="h(FileTextTwoTone)" @click="downloadFile(record.fileUploadPath)"/>
              </template>
            </template>
        </template>
        <template #action="{ record }">
          <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
        </template>
        <!-- update-end-author:taoyan date:2022-5-25 for: VUEN-1112一对多 用户选择 未显示选择条数，及清空 -->
    </BasicTable>
    <StProjectCollectionModal  @register="registerModal" @success="handleSuccess"/>
    <StProjectCollectionUpFileMpdal @register="registerModalUpFile" @success="handleSuccess" />
  </div>
</template>
<script setup>
import { FileTextTwoTone } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { h, ref } from 'vue';
import { gatherlist, getExportGatherXls, queryNoGatherCount } from '../../StProjectConfig.api';
import StProjectCollectionModal from './StProjectCollectionModal.vue';
import StProjectCollectionUpFileMpdal from './StProjectCollectionUpFileMpdal.vue';
import { JTreeSelectDomain } from '/@/components/Form';
import { useModal } from '/@/components/Modal';
import { BasicTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { useMethods } from '/@/hooks/system/useMethods';
import { downloadFile } from '/@/utils/common/renderUtils';
const { handleExportXls } = useMethods();

const [registerModal, {openModal}] = useModal();
const [registerModalUpFile, {openModal:openModalUpFile}] = useModal();
const nConfigCount = ref(0)
const domainCode = ref('')
const props = defineProps({
  projectCreId: '',
  projectName:''
});
const size = ref('large')
const columns = [
 {
  title: '检查资料',
  align:"left",
  dataIndex: 'checkDocText',
  key: 'checkDocText',
  width: '120px'
 },
 {
  title: '所属领域',
  align:"left",
  dataIndex: 'domainName'
 },
 {
  title: '部门',
  align:"left",
  dataIndex: 'depName',
  customRender:({text}) =>{
      return !text?"-":text
    },
 },
 {
  title: '责任人',
  align:"left",
  dataIndex: 'dutyName'
 },
 {
  title: '分配状态',
  align:"left",
  dataIndex: 'dutyStatus',
  customRender:({text}) =>{
      return '1'==text?"已分配":'未分配'
    },
 }
];
const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
    tableProps:{
         title: '',
         api: gatherlist,
         columns,
         canResize:false,
         useSearchForm: false,
         showIndexColumn: false,
         scroll: { x: false },
         actionColumn: {
             width: 160
          },
          showTableSetting: false,
          beforeFetch(params) {
              params = Object.assign(params,{projectCreId:props.projectCreId})
            },
    },
    exportConfig: {
        name:"项目资料清单",
        url: getExportGatherXls,
        params: {projectCreId:props.projectCreId}
      },
})
function onDefHandlerExportXls(){
    let name = !!props.projectName?props.projectName:''
    return handleExportXls(name+'项目资料清单', getExportGatherXls, {projectCreId:props.projectCreId});
}
const [registerTable, {setProps,reload},{ rowSelection, selectedRowKeys }] = tableContext
function domainChange(val,text){
  if(!!val){
    setProps({searchInfo:{domainCode:val}});
    reload()
  }else{
    setProps({searchInfo:{domainCode:val}});
    reload()
  }
}
function batchFp(){
  if(!!selectedRowKeys.value && selectedRowKeys.value.length>0){
    openModal(true, {
       record:{ids:selectedRowKeys.value.join(","),projectCreId:props.projectCreId},
       isBatch: true,
       isUpdate: true,
       showFooter: true,
     });
  }else{
    message.warning("请选择检查资料！")
  }
}
function handleEdit(record) {
     openModal(true, {
       record:{id:record.id,projectCreId:props.projectCreId},
       isBatch: false,
       isUpdate: true,
       showFooter: true,
     });
}
function handleUpFile(record){
  openModalUpFile(true, {
       record:{id:record.id,projectCreId:props.projectCreId},
       isBatch: false,
       isUpdate: true,
       showFooter: true,
     });
}
function fetchCallBack(data){
  queryNoGatherCount({projectCreId:props.projectCreId}).then(rep=>{
    console.log("计算为配置项")
    console.log(rep)
    nConfigCount.value = rep
  })
}
function handleSuccess(){
  (selectedRowKeys.value = []) && reload();
}
function redioChange(e){
  let key = e.target.value
  if(key == 'large'){
    setProps({searchInfo:{dutyStatus:''}});
  }else if(key == 'middle'){
    setProps({searchInfo:{dutyStatus:'0'}});
  }else if(key == 'small'){
    setProps({searchInfo:{dutyStatus:'1'}});
  }
  reload()
}
function getTableAction(record){
       return [
        {
           label: '分配',
           onClick: handleEdit.bind(null, record),
         },
         {
           label: '上传模板',
           onClick: handleUpFile.bind(null, record),
         },
      ]
}
function getDropDownAction(record){
       return [
         
       ]
   }

   function searchByProjectCreId(data){
    // console.log('-调用-')
    // console.log(ids)
    setProps({searchInfo:data});
    reload()
  }
  defineExpose({searchByProjectCreId})
</script>