<template>
    <!-- 自定义表单 -->
    <el-divider content-position="left">项目入库详情</el-divider>
    <BasicForm @register="registerProjectForm" />
    <el-divider content-position="left">项目审批详情</el-divider>
    <BasicTable @register="registerTable"/>
    <div>
      <el-divider content-position="left">项目审批</el-divider>
      <BasicForm @register="registerApprovalForm" @submit="handleSubmit"/>
    </div>

</template>
<script lang="ts" name="complectedDetail" setup>
import { defineProps,watchEffect} from 'vue'
import { useForm, BasicForm } from '/@/components/Form';
import { formSchemas,approveStartProcessColumns} from '../../projectLib/projectInfo/projectInfo.data';
import {queryProjectInfoById,queryProcessInfo} from '../../projectLib/projectInfo/projectInfo.api'
import {BasicTable } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import {approvalformSchemas} from '../inComplete/inComplete.data'

import {submitTask} from '../inComplete/inComplete.api';
let proid = defineProps(["dataTo","taskid"])
const emit = defineEmits(['close']);

watchEffect(async ()=>{
  console.log("dataTo",proid.dataTo)
  let param:any = {
    projectid:proid.dataTo   
  }
  let res =await queryProjectInfoById(param)
  console.log("结果是",res)
  setFieldsValue(res)
  reload()
})

  /**
   * BasicForm绑定注册;
   * useForm 是整个框架的核心用于表单渲染，里边封装了很多公共方法;
   * 支持（schemas: 渲染表单列，autoSubmitOnEnter：回车提交,submitButtonOptions：自定义按钮文本和图标等方法）；
   * 平台通过此封装，简化了代码，支持自定义扩展;
   */
  const [registerProjectForm,{setFieldsValue}] = useForm({
    //注册表单列
    schemas: formSchemas,
    showActionButtonGroup: false,
    //回车提交
    // autoSubmitOnEnter: true,
    // //不显示重置按钮
    // showResetButton: false,
    //自定义提交按钮文本和图标
    // submitButtonOptions: { text: '提交', preIcon: '' },
    //查询列占比 24代表一行 取值范围 0-24
    // actionColOptions: { span: 17 },
    labelCol: { style: { width: '120px' } },
    wrapperCol:{ style: { width: 'auto' } },
    disabled:true
  });



  const { tableContext } = useListPage({
    tableProps: {
      size:'small',//紧凑型表格
      title: '流程审批情况',  
      api:queryProcessInfo,
      columns: approveStartProcessColumns,
      showActionColumn:false,
      useSearchForm:false,
      beforeFetch(params) {
        params.status = "1",
        params.projectid=proid.dataTo  
      },
    },
  });
    // BasicTable绑定注册
    const [registerTable,{reload}] = tableContext;

    const[registerApprovalForm,{validate,getFieldsValue}] = useForm({
     //注册表单列
     schemas: approvalformSchemas,
         //自定义查询按钮的文本和图标
    // submitButtonOptions: { text: '提交', preIcon: '' },
    //自定义重置按钮的文本和图标
    resetButtonOptions: { text: '取消', preIcon: '' },
    // showActionButtonGroup: false,
    //回车提交
    // autoSubmitOnEnter: true,
    // //不显示重置按钮
    // showResetButton: false,
    //自定义提交按钮文本和图标
    submitButtonOptions: { text: '提交', preIcon: '' },
    //查询列占比 24代表一行 取值范围 0-24
    actionColOptions: { span: 14 },
        //提交按钮的自定义事件
    // submitFunc: customSubmitFunc,
    //重置按钮的自定义时间
    resetFunc: customResetFunc,
    labelCol: { style: { width: '120px' } },
    wrapperCol:{ style: { width: 'auto' } },
    // disabled:true
  })
  async function handleSubmit(){
    let approvalform = await getFieldsValue();
     let param = {
       flag:approvalform.flag,
       projectid:proid.dataTo,
       comment:approvalform.comment,
       taskId:proid.taskid
     }
     console.log("aaaaaaaaaaa",proid)
     console.log("param",param,"approvalform",approvalform)
    if(await validate()){
    
      let res = await submitTask(param)
      console.log("提交成功！",res)
      await emit("close");
    }
}
async  function customResetFunc(){
      emit("close");
    }
</script>
<style></style>