<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: 240px;margin-left: 10px;display: inline-block;">
     <JSelectDept v-model:value="depId" :multiple='false' :allowClear='false' @change="changeJSelectDept"></JSelectDept>
    </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>
    <StPlanModal  @register="registerModal" @success="handleSuccess"/>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { getExportInterviewXls, interviewlist, queryNoInterviewCount } from '../../StProjectConfig.api';
import StPlanModal from './StPlanModal.vue';
import { JSelectDept } 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';
const { handleExportXls } = useMethods();
const [registerModal, {openModal}] = useModal();
const depId = ref(null)
const nConfigCount = ref(0)
const props = defineProps({
  projectCreId: '',
  projectName: ''
});
const size = ref('large')
const columns = [
 {
  title: '部门',
  align:"left",
  dataIndex: 'interviewDepName',
  customRender:({text}) =>{
      return !text?"-":text
  },
 },
 {
  title: '岗位',
  align:"left",
  dataIndex: 'postName',
  customRender:({text}) =>{
      return !text?"-":text
  },
 },
 {
  title: '人员',
  align:"left",
  dataIndex: 'userName',
  customRender:({text}) =>{
      return !text?"-":text
  },
 },
 {
  title: '访谈内容',
  align:"left",
  dataIndex: 'interviewContent',
  customRender:({text}) =>{
      return !text?"-":text
  },
 },
 {
  title: '访谈日期',
  align:"left",
  dataIndex: 'interviewDate'
 },
 {
  title: '分配状态',
  align:"left",
  dataIndex: 'dutyStatus',
  customRender:({text}) =>{
      return '1'==text?"已分配":'未分配'
    },
 }
];
const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
    tableProps:{
         title: '',
         api: interviewlist,
         columns,
         canResize:false,
         useSearchForm: false,
         showIndexColumn: false,
         scroll: { x: false,y:250 },
         actionColumn: {
             width: 160
          },
          showTableSetting: false,
          beforeFetch(params) {
              params = Object.assign(params,{projectCreId:props.projectCreId})
            },
    },
    exportConfig: {
        name: '项目访谈清单',
        url: getExportInterviewXls,
        params: {projectCreId:props.projectCreId}
      },
})
function onDefHandlerExportXls(){
  let name = !!props.projectName?props.projectName:''
  return handleExportXls(name+'项目访谈清单', getExportInterviewXls, {projectCreId:props.projectCreId});
}
const [registerTable, {setProps,reload},{ rowSelection, selectedRowKeys }] = tableContext
function changeJSelectDept(nval){
  console.log(nval)
  if(nval.length >0){
    setProps({searchInfo:{interviewDepId:nval[0]}});
    reload()
  }else{
    depId.value = ''
    setProps({searchInfo:{interviewDepId:''}});
    reload()
  }
}
function handleEdit(record) {
     openModal(true, {
       record,
       isBatch: false,
       isUpdate: true,
       showFooter: true,
     });
}
function handleView(record){
  openModal(true, {
       record,
       isUpdate: true,
       showFooter: false,
     });
}
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 handleSuccess(){
  (selectedRowKeys.value = []) && reload();
}
function fetchCallBack(data){
  queryNoInterviewCount({projectCreId:props.projectCreId}).then(rep=>{
    console.log("计算为配置项")
    console.log(rep)
    nConfigCount.value = rep
  })
}
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: handleView.bind(null, record),
      },
  ]
}
function getDropDownAction(record){
  return [
  ]
}
function searchByProjectCreId(data){
  setProps({searchInfo:data});
  reload()
}
defineExpose({searchByProjectCreId})
</script>