<template>
  <div>
    <a-space direction="vertical">
    <div>
      <a-button type="primary" @click="batchFp">批量分配</a-button>
    </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 #action="{ record }">
          <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
        </template>
        <!-- update-end-author:taoyan date:2022-5-25 for: VUEN-1112一对多 用户选择 未显示选择条数，及清空 -->
    </BasicTable>
    <StProjectDutyModal  @register="registerModal" @success="handleSuccess"/>
  </div>
</template>
<script setup>
import { message } from 'ant-design-vue';
import { ref } from 'vue';
import { checklist, queryNoDutyCount } from '../../StProjectConfig.api';
import StProjectDutyModal from './StProjectDutyModal.vue';
import { JTreeSelectDomain } from '/@/components/Form';
import { useModal } from '/@/components/Modal';
import { BasicTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
const [registerModal, {openModal}] = useModal();
const nConfigCount = ref(0)
const domainCode = ref('')
const props = defineProps({
  projectCreId: '',
});
const size = ref('large')
const columns = [
 {
  title: '检查内容',
  align:"left",
  dataIndex: 'checkContent'
 },
 {
  title: '责任人',
  align:"left",
  dataIndex: 'dutyName'
 },
 {
  title: '分配状态',
  align:"left",
  dataIndex: 'dutyStatus',
  customRender:({text}) =>{
      return '1'==text?"已分配":'未分配'
    },
 }
];
const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
    tableProps:{
         title: '',
         api: checklist,
         columns,
         canResize:false,
         useSearchForm: false,
         showIndexColumn: false,
         scroll: { x: false,y:250 },
         actionColumn: {
             width: 160
          },
          showTableSetting: false,
          beforeFetch(params) {
              params = Object.assign(params,{ column: 'caNo', order: 'desc',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,projectCreId:props.projectCreId},
       isBatch: true,
       isUpdate: true,
       showFooter: true,
     });
  }else{
    message.warning("请选择检查内容！")
  }
}
function handleEdit(record) {
     openModal(true, {
       record,
       isBatch: false,
       isUpdate: true,
       showFooter: true,
     });
}
function fetchCallBack(data){
  queryNoDutyCount({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),
         },
      ]
}
function getDropDownAction(record){
       return [
         
       ]
   }
   function searchByProjectCreId(data){
    // console.log('-调用-')
    // console.log(ids)
    setProps({searchInfo:data});
    reload()
  }
  defineExpose({searchByProjectCreId})
</script>