<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" >
    <a-tabs v-model:activeKey="activeKey" type="card">
      <a-tab-pane key="1" tab="检查范围">
        <BasicForm @register="registerForm"/>
      </a-tab-pane>
      <a-tab-pane key="2" tab="检查活动">
        <BasicTable @register="checkRegisterTable">
          <template #bodyCell="{ text, record, index, column }">
            <template v-if="column.key === 'index'">{{ index+1 }}</template>
            <template v-else-if="column.key === 'lableNameList'">
                <JTagsFormat :value="record.lableNameList" :length="4" :strLen="14" />
            </template>
            <!-- <template v-if="column.key === 'operation'"><a-button type="link" :disabled="record.projectRole == 'head'" @click="handlerUserDelete(record.id)">移除</a-button></template> -->
          </template>
        </BasicTable>
      </a-tab-pane>
      <a-tab-pane key="3" tab="实施人员">
        <BasicTable @register="prepareRegisterTable">
          <template #bodyCell="{ text, record, index, column }">
            <template v-if="column.key === 'index'">{{ index+1 }}</template>
            <!-- <template v-if="column.key === 'operation'"><a-button type="link" :disabled="record.projectRole == 'head'" @click="handlerUserDelete(record.id)">移除</a-button></template> -->
          </template>
        </BasicTable>
      </a-tab-pane>
      <a-tab-pane key="4" tab="责任分工">
        <BasicTable @register="dutyRegisterTable">
          <template #bodyCell="{ text, record, index, column }">
            <template v-if="column.key === 'index'">{{ index+1 }}</template>
            <!-- <template v-if="column.key === 'operation'"><a-button type="link" :disabled="record.projectRole == 'head'" @click="handlerUserDelete(record.id)">移除</a-button></template> -->
          </template>
        </BasicTable>
      </a-tab-pane>
      <a-tab-pane key="5" tab="检查方法">
        <BasicTable @register="cmRegisterTable">
          <template #bodyCell="{ text, record, index, column }">
            <template v-if="column.key === 'index'">{{ index+1 }}</template>
            <template v-if="column.key === 'operation'"><a-button type="link" @click="handlerCheckDetail(record)">详情</a-button></template>
          </template>
        </BasicTable>
        <StProjectPrepareViewCheckView @register="registerCmModal" ></StProjectPrepareViewCheckView>
      </a-tab-pane>
      <a-tab-pane key="6" tab="信息采集">
        <BasicTable @register="infoRegisterTable">
          <template #bodyCell="{ text, record, index, column }">
            <template v-if="column.key === 'index'">{{ index+1 }}</template>
            <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 v-if="column.key === 'operation'"><a-button type="link" :disabled="record.projectRole == 'head'" @click="handlerUserDelete(record.id)">移除</a-button></template> -->
          </template>
        </BasicTable>
      </a-tab-pane>
      <a-tab-pane key="7" tab="访谈计划">
        <BasicTable @register="ftRegisterTable">
          <template #bodyCell="{ text, record, index, column }">
            <template v-if="column.key === 'index'">{{ index+1 }}</template>
            <!-- <template v-if="column.key === 'operation'"><a-button type="link" :disabled="record.projectRole == 'head'" @click="handlerUserDelete(record.id)">移除</a-button></template> -->
          </template>
        </BasicTable>
      </a-tab-pane>
    </a-tabs>
  </BasicModal>
</template>

<script lang="ts" setup>
import { FileTextTwoTone } from '@ant-design/icons-vue';
import { computed, h, ref, unref } from 'vue';
import { checklist, gatherlist, interviewlist } from '../StProjectConfig.api';
import { checkViewFormSchema } from '../StProjectCre.data';
import { perpetratePageList, queryViewAct, viewPrepareConfig } from '../StProjectView.api';
import StProjectPrepareViewCheckView from './StProjectPrepareViewCheckView.vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
import { BasicTable } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { downloadFile } from '/@/utils/common/renderUtils';
import JTagsFormat from '/@/views/standardlib/components/JTagsFormat.vue';


const [registerCmModal, {openModal:openCmModal}] = useModal();



const activeKey = ref('1')
// Emits声明
const emit = defineEmits(['register','success']);
const isUpdate = ref(true);
const viewData = ref({})
// 1、检查范围
const [registerForm, {setFieldsValue}] = useForm({
        //labelWidth: 150,
        schemas: checkViewFormSchema,
        showActionButtonGroup: false,
        baseColProps: {span: 24}
    });
// 2、检查活动
const checkColumns = [
  {
    title: '序号',
    align:"left",
    key: 'index',
    dataIndex: 'index',
  },
  {
    title: '控制活动名称',
    align:"left",
    dataIndex: 'caName'
   },
   {
    title: '所属领域名称',
    align:"left",
    dataIndex: 'domainName'
   },
   {
    title: '标签',
    align: "left",
    dataIndex: 'lableNameList'
   },
];
const {tableContext:checkTableContext} = useListPage({
    tableProps:{
         title: '',
         api: queryViewAct,
         columns:checkColumns,
         canResize:false,
         useSearchForm: false,
         showIndexColumn: false,
         scroll: { x: false },
         showActionColumn:false,
         actionColumn: {
             width: 160
          },
          showTableSetting: false,
          beforeFetch(params) {
              params = Object.assign(params,{projectCreId:viewData.value.id})
            },
    },
})
const [checkRegisterTable] = checkTableContext
// 3、实施人员
const prepareColumns = [
{
    title: '序号',
    align:"left",
    key: 'index',
    dataIndex: 'index',
  },
  {
    title: '人员姓名',
    align:"left",
    dataIndex: 'userName',
  },
  {
    title: '所属部门',
    align:"left",
    dataIndex: 'depName'
   },
   {
    title: '岗位',
    align:"left",
    dataIndex: 'postName'
   },
   {
    title: '项目角色',
    align:"left",
    dataIndex: 'projectRoleName'
   },
];
const {tableContext:prepareTableContext} = useListPage({
    tableProps:{
         title: '',
         api: perpetratePageList,
         columns:prepareColumns,
         canResize:false,
         useSearchForm: false,
         showIndexColumn: false,
         scroll: { x: false },
         showActionColumn:false,
         actionColumn: {
             width: 160
          },
          showTableSetting: false,
          beforeFetch(params) {
              params = Object.assign(params,{projectCreId:viewData.value.id})
            },
    },
})
const [prepareRegisterTable] = prepareTableContext
// 4、责任分工
const dutyColumns = [
{
    title: '序号',
    align:"left",
    key: 'index',
    dataIndex: 'index',
  },
 {
  title: '检查内容',
  align:"left",
  dataIndex: 'checkContent'
 },
 {
  title: '所属领域',
  align:"left",
  dataIndex: 'domainName'
 },
 {
  title: '责任人',
  align:"left",
  dataIndex: 'dutyName'
 },
];
const {tableContext:dutyTableContext} = useListPage({
    tableProps:{
         title: '',
         api: checklist,
         columns:dutyColumns,
         canResize:false,
         useSearchForm: false,
         showIndexColumn: false,
         scroll: { x: false },
         showActionColumn:false,
         actionColumn: {
             width: 160
          },
          showTableSetting: false,
          beforeFetch(params) {
              params = Object.assign(params,{projectCreId:viewData.value.id})
            },
    },
})
const [dutyRegisterTable] = dutyTableContext
// 5、检查方法
const cmColumns = [
{
    title: '序号',
    align:"left",
    key: 'index',
    dataIndex: 'index',
    width: 50,
  },
  {
  title: '控制活动名称',
  align:"left",
  dataIndex: 'caName'
 },
 {
  title: '检查内容',
  align:"left",
  dataIndex: 'checkContent'
 },
 {
  title: '操作',
  align:"left",
  dataIndex: 'operation',
  key: 'operation',
  width: 100,
 },
];
const {tableContext:cmTableContext} = useListPage({
    tableProps:{
         title: '',
         api: checklist,
         columns:cmColumns,
         canResize:false,
         useSearchForm: false,
         showIndexColumn: false,
         scroll: { x: false },
         showActionColumn:false,
         actionColumn: {
             width: 160
          },
          showTableSetting: false,
          beforeFetch(params) {
              params = Object.assign(params,{projectCreId:viewData.value.id})
            },
    },
})
const [cmRegisterTable] = cmTableContext
function handlerCheckDetail(record: Recordable) {
     openCmModal(true, {
       record,
       isUpdate: true,
       showFooter: false,
     });
   }
// 6、信息采集
const infoColumns = [
{
    title: '序号',
    align:"left",
    key: 'index',
    dataIndex: 'index',
    width: 50,
  },
  {
  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'
 },
];
const {tableContext:infoTableContext} = useListPage({
    tableProps:{
         title: '',
         api: gatherlist,
         columns:infoColumns,
         canResize:false,
         useSearchForm: false,
         showIndexColumn: false,
         scroll: { x: false },
         showActionColumn:false,
         actionColumn: {
             width: 160
          },
          showTableSetting: false,
          beforeFetch(params) {
              params = Object.assign(params,{projectCreId:viewData.value.id})
            },
    },
})
const [infoRegisterTable] = infoTableContext
// 7、访谈信息
const ftColumns = [
{
    title: '序号',
    align:"left",
    key: 'index',
    dataIndex: 'index',
  },
  {
  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: 'des'
 },
];
const {tableContext:ftTableContext} = useListPage({
    tableProps:{
         title: '',
         api: interviewlist,
         columns:ftColumns,
         canResize:false,
         useSearchForm: false,
         showIndexColumn: false,
         scroll: { x: false },
         showActionColumn:false,
         actionColumn: {
             width: 160
          },
          showTableSetting: false,
          beforeFetch(params) {
              params = Object.assign(params,{projectCreId:viewData.value.id})
            },
    },
})
const [ftRegisterTable] = ftTableContext
//
//表单赋值
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
    setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
    isUpdate.value = !!data?.isUpdate;
    if (unref(isUpdate)) {
      viewData.value = data.record
      activeKey.value = '1'
      getViewPrepareConfig(data.record.id)
    }
});
//设置标题
const title = computed(() => (!unref(isUpdate) ? '新增' : '查看配置'));
function getViewPrepareConfig(projectCreId) {
  viewPrepareConfig({projectCreId:projectCreId}).then(rep=>{
     setFieldsValue({
        ...rep,
      });
  })
}
</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number){
		width: 100%
	}

	:deep(.ant-calendar-picker){
		width: 100%
	}
</style>