<!-- 分包方资格审批详情 -->
<script lang="ts" setup name="SubpackageApproveEdit">
import type { Ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import type { IForm, IPaymentList, dictType } from './contract-interface'
import showPhoto from '@/views/system/tool/showPhoto.vue'
import { UploadFile } from '@/api/measure/file'
import type { IAddress } from '@/components/AddressSelect/address-interface'
import { getDictByCode } from '@/api/system/dict'
import { SCHEDULE } from '@/utils/scheduleDict'
import { cancelApproval, fetchApproval, submitApproval } from '@/api/approval'
import selectCustomer from '@/views/customer/sample/list/selectCustomer.vue'
import type { IOrderList } from '@/views/business/schedule/order/orderList_interface'
import type { ICustomer } from '@/views/customer/customerInfo/customer_interface'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import selectOrder from '@/views/business/schedule/interchangeReceipt/selectOrder.vue'
import { validateMoney } from '@/utils/validate'
import { addContractList, failUpdateContractList, getContractDetail, submitContractList, updateContractList } from '@/api/finance/contract'
import { calc } from '@/utils/useCalc'
import useUserStore from '@/store/modules/user'
import { getUid } from '@/utils/getUid'
import ApprovalDialog from '@/components/Approval/ApprovalDialog.vue'
const approvalDialog = ref() // 审批对话ref
const user = useUserStore() // 用户信息
const customerVisible = ref(false) // 控制选择客户（甲方单位）对话框显隐
const orderVisible = ref(false) // 控制委托单对话框显隐
const loading = ref(false) // 表单加载状态
const infoId = ref('') // id
const pageType = ref('add') // 页面类型: add, edit, detail
const submitId = ref('') // 提交使用的id
const approvalStatusName = ref('') // 审批状态名字
const decisionItem = ref('') // 同意、驳回、拒绝按钮权限
const taskId = ref('') // 任务id，用于同意、驳回、拒绝审批
const $route = useRoute()
const query = $route.query
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 字典
// 从路由中获取页面类型参数
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
// 表单
const form: Ref<IForm> = ref({
  agreementNo: '', // 合同编号
  agreementName: '', // 合同名称
  createUser: '', // 创建人、申请人
  createUserName: '', // 创建人名字、申请人名字
  agreementType: '', // 合同类型
  agreementTypeName: '', // 合同类型名称
  deptId: '', // 创建人所在部门
  deptName: '', // 创建人所在部门名称
  estimateSignDate: '', // 预计签订日期
  agreementAmount: '', // 合同金额
  agreementSourceName: '', // 合同采购来源-字典value
  agreementSource: '', // 合同采购来源-字典code
  agreementStartDate: '', // 合同开始日期
  agreementEndDate: '', // 合同结束日期
  customerId: '', // 甲方单位id-客户id
  firstParty: '', // 甲方单位
  director: '', // 甲方负责人
  secondParty: '', // 乙方单位
  secondDirector: '', // 乙方负责人
  agreementImportantContent: '', // 合同重要内容
  remark: '', // 备注
  minioFileName: '', // 附件
  processId: '', // 流程实例id
})
const orderList = ref<IOrderList[]>([]) // 委托单信息
const checkoutOrderList = ref<string[]>([]) // 多选委托单信息
const orderColumn = ref<TableColumn[]>([
  { text: '委托单编号', value: 'orderCode', align: 'center', width: '160px' },
  { text: '委托方代码', value: 'customerNo', align: 'center', width: '160px' },
  { text: '委托方名称', value: 'customerName', align: 'center' },
  { text: '联系人', value: 'deliverer', align: 'center' },
  { text: '联系方式', value: 'customerPhone', align: 'center' },
  { text: '样品数量', value: 'sampleCount', align: 'center' },
  { text: '是否加急', value: 'isUrgentName', align: 'center', width: '80px', styleFilter: (row: IOrderList) => { return row.isUrgent == 1 ? 'color: red' : '' } },
  { text: '接收状态', value: 'statusName', align: 'center', width: '100px' },
  { text: '完成状态', value: 'finishStatusName', align: 'center', width: '100px' },
])
const ruleFormRef = ref<FormInstance>() // 表单ref
const paymentList = ref<IPaymentList[]>([]) // 收款信息
const checkoutPaymentList = ref<string[]>([]) // 多选收款信息
const paymentColumn = ref([
  { text: '收款次数', value: 'paymentNum', align: 'center', width: '100' },
  { text: '预计收款金额(元)', value: 'estimatePaymentAmount', align: 'center', reg: validateMoney, required: true },
  { text: '预计收款时间', value: 'estimatePaymentDate', align: 'center', required: true },
  { text: '实际收款金额(元)', value: 'actualPaymentAmount', align: 'center', reg: validateMoney },
  { text: '实际收款时间', value: 'actualPaymentDate', align: 'center' },
])
// 自定义校验规则--要求预计结束时间大于预计开始时间
const requireOverTimeValid = (rule: any, value: any, callback: any) => {
  // if (!value) {
  //   return callback(new Error('合同结束日期必填'))
  // }
  if (form.value.agreementEndDate && form.value.agreementStartDate) {
    if (new Date(form.value.agreementEndDate).getTime() <= new Date(form.value.agreementStartDate).getTime()) {
      return callback(new Error('不能小于合同开始日期'))
    }
  }

  callback()
}
// 校验规则
const rules = ref<FormRules>({
  agreementName: [{ required: true, message: '合同名称必填', trigger: 'blur' }],
  agreementType: [{ required: true, message: '合同类型必填', trigger: 'blur' }],
  estimateSignDate: [{ required: true, message: '预计签订日期必填', trigger: 'blur' }],
  // agreementStartDate: [{ required: true, message: '合同开始日期', trigger: 'blur' }],
  agreementEndDate: [{ required: false, type: 'date', validator: requireOverTimeValid, trigger: 'change' }],
  agreementAmount: [{ required: true, message: '合同金额必填', trigger: ['blur', 'change'] },
    { pattern: /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/, message: '要求为正数，且最多保留两位小数', trigger: ['blur', 'change'] }],
  agreementSource: [{ required: true, message: '合同采购来源必填', trigger: 'blur' }],
  firstParty: [{ required: true, message: '甲方单位必填', trigger: 'blur' }],
  director: [{ required: true, message: '甲方负责人必填', trigger: 'blur' }],
  secondParty: [{ required: true, message: '乙方负责人必填', trigger: 'blur' }],
  secondDirector: [{ required: true, message: '乙方负责人必填', trigger: 'blur' }],

}) // 表单验证规则
// 初始化router
const $router = useRouter()
// 关闭新增页面的回调
const close = () => {
  $router.back()
}
// ---------------------------------------字典-----------------------------------------
const contractTypeMap = ref<dictType[]>([]) // 合同类型
const contractStatusMap = ref<dictType[]>([]) // 合同完成状态
const contractKindMap = ref<dictType[]>([]) // 合同种类
const contractSourceMap = ref<dictType[]>([]) // 合同采购来源

// 查询字典
const getDict = async () => {
  // 合同类型
  getDictByCode('agreementType').then((response) => {
    contractTypeMap.value = response.data
  })
  // 合同完成状态
  getDictByCode('agreementStatus').then((response) => {
    contractStatusMap.value = response.data
  })
  // 合同种类
  getDictByCode('agreementKind').then((response) => {
    contractKindMap.value = response.data
  })
  // 合同采购来源
  getDictByCode('agreementSource').then((response) => {
    contractSourceMap.value = response.data
  })
}
// ---------------------------------------选择委托单--------------------------------------------
// 点击批量添加
const multiAdd = () => {
  orderVisible.value = true
}
// 修改委托单对话框显隐
const changeOrderVisible = (val: boolean) => {
  orderVisible.value = val
}
// 选好委托单
const confirmCheckoutOrder = (val: Array<IOrderList>) => {
  if (val && val.length) {
    val.forEach((item: any) => {
    // 只添加列表里不存在的
      const index = orderList.value.findIndex((i: IOrderList) => item.orderCode === i.orderCode)
      if (index === -1) {
        orderList.value.push({
          ...item,
          isUrgentName: item.isUrgent == 1 ? '是' : '否',
          finishStatusName: item.statusName === '检测完成' ? '已完成' : '未完成',
        })
      }
    })
  }
}
// 多选发生改变时
const handleOrderSelectionChange = (e: any) => {
  checkoutOrderList.value = e
}
// 点击删除行
const delOrderRow = () => {
  if (checkoutOrderList.value.length <= 0) {
    ElMessage({
      message: '请选中要删除的行',
      type: 'warning',
    })
  }
  else {
    checkoutOrderList.value.forEach((item: any) => {
      orderList.value.forEach((element, index) => {
        if (element.orderCode === item.orderCode) {
          orderList.value.splice(index, 1)
        }
      })
    })
  }
}
// -------------------------------------------收款信息-------------------------------------------------
// 检查收款信息行
function checkPaymentList() {
  for (let index = 0; index < paymentList.value.length; index++) {
    const item = paymentList.value[index]
    for (const prop of paymentColumn.value) {
      // 检查必填
      if (prop.required && !item[prop.value]) {
        ElMessage({
          type: 'warning',
          message: `请先完善第${index + 1}行中${prop.text}`,
          duration: 4000,
        })
        return false
      }
      // 验证正则
      if (prop.reg && typeof prop.reg === 'function') {
        if (item[prop.value] && !prop.reg(item[prop.value])) {
          // ElMessage.warning(`第${index + 1}行中${prop.text}输入不合法`)
          ElMessage({
            type: 'warning',
            message: `第${index + 1}行: 要求${prop.text}为正数，且最多保留两位小数`,
            duration: 4000,
          })
          return false
        }
      }
    }
  }
  return true
}
// 点击增加行
const addPaymentListRow = () => {
  if (!checkPaymentList()) { // 检查收款信息表格
    return false
  }
  paymentList.value.push({
    estimatePaymentAmount: '', // 预计收款金额（单位分）
    estimatePaymentDate: '', // 预计收款时间
    actualPaymentAmount: '', // 实际收款金额（单位分）
    actualPaymentDate: '', 	// 实际收款时间
    paymentNum: '',
    idFront: getUid(), // 生成唯一id
    isEdit: true,
  })
}
// 点击删除行
const delPaymentListRow = () => {
  if (checkoutPaymentList.value.length <= 0) {
    ElMessage({
      message: '请选中要删除的行',
      type: 'warning',
    })
  }
  else {
    checkoutPaymentList.value.forEach((item: any) => {
      paymentList.value.forEach((element, index) => {
        if (element.idFront === item.idFront) {
          paymentList.value.splice(index, 1)
        }
      })
    })
  }
}
// 多选选中
const handlePaymentSelectionChange = (e: any) => {
  checkoutPaymentList.value = e
}
// ----------------------------------------------选择客户（甲方单位）-----------------------------------
// 甲方单位获取焦点
const customerNoFocus = () => {
  customerVisible.value = true
}

// 选好客户
const confirmCheckout = (val: Array<ICustomer>) => {
  if (val && val.length) {
    form.value.customerId = val[0].id // 委托方id
    form.value.firstParty = val[0].customerName // 委托方名称
    form.value.director = val[0].director // 负责人
  }
}

// 控制选择委托方对话框显隐
const changeVisible = (val: boolean) => {
  customerVisible.value = val
}
// -----------------------------------------文件上传-----------------------------------
const fileRef = ref() // 文件上传input
const onFileChange = (event: any) => {
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    UploadFile(fd).then((res) => {
      loading.close()
      if (res.code === 200) {
        form.value.minioFileName = res.data[0]
        // 重置当前验证
        ElMessage.success('文件上传成功')
      }
      else {
        loading.close()
        ElMessage.error(res.message)
      }
    }).catch(() => {
      loading.close()
    })
  }
}
const upload = () => {
  fileRef.value.click()
}
// -------------------------------------------审批----------------------------------------
const approvalRecordData = ref([]) // 审批流程数据
// 查询审批记录
function getApprovalRecord(processId: string) {
  if (pageType.value !== 'add') {
    if (processId) {
      fetchApproval(processId).then((res) => {
        approvalRecordData.value = res.data
      })
    }
    else {
      ElMessage.warning('流程实例id为空')
    }
  }
}
// 审批结束回调
const approvalSuccess = () => {
  close() // 返回上一页
}
// 审批
const handleApprove = (val: string, title = '') => {
  if (val === '取消') {
    const params = {
      processInstanceId: form.value.processId!,
      comments: '',
    }
    ElMessageBox.confirm(
      '确认取消该审批吗？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      },
    )
      .then(() => {
        cancelApproval(params).then((res) => {
          ElMessage({
            type: 'success',
            message: '取消成功',
          })
          close()
        })
      })
  }
  else if (val === '同意') {
    approvalDialog.value.initDialog('agree', taskId.value)
  }
  else if (val === '驳回') {
    approvalDialog.value.initDialog('reject', taskId.value)
  }
  else if (val === '拒绝') {
    approvalDialog.value.initDialog('refuse', taskId.value)
  }
}
// -------------------------------------------------------------------------------------
// 获取详情
const getInfo = () => {
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  getContractDetail({ id: infoId.value }).then((res) => {
    form.value = res.data
    form.value.agreementAmount = calc(res.data.agreementAmount, 100, '/')
    // 委托单
    orderList.value = res.data.orderList.map((item: { isUrgent: number | string; statusName: string }) => {
      return {
        ...item,
        isUrgentName: item.isUrgent == 1 ? '是' : '否',
        finishStatusName: item.statusName === '检测完成' ? '已完成' : '未完成',
      }
    })
    // 收款信息
    paymentList.value = res.data.paymentList.map((item: { estimatePaymentAmount: number; actualPaymentAmount: number }) => {
      return {
        ...item,
        estimatePaymentAmount: `${item.estimatePaymentAmount}` ? calc(item.estimatePaymentAmount, 100, '/') : item.estimatePaymentAmount,
        actualPaymentAmount: `${item.actualPaymentAmount}` ? calc(item.actualPaymentAmount, 100, '/') : item.actualPaymentAmount,
      }
    })
    loading.close()
  })
}

// 保存
function saveForm(formEl: FormInstance | undefined) {
  if (!orderList.value.length) {
    ElMessage.warning('委托单信息不能为空')
    return false
  }
  if (!paymentList.value.length) {
    ElMessage.warning('收款信息不能为空')
    return false
  }
  if (!checkPaymentList()) { // 检查收款信息表格
    return false
  }
  if (!formEl) { return }
  formEl.validate((valid, fields) => {
    if (valid) {
      const loading = ElLoading.service({
        lock: true,
        background: 'rgba(255, 255, 255, 0.8)',
      })
      const param = {
        ...form.value,
        agreementAmount: calc(Number(form.value.agreementAmount), 100, '*'),
        orderIdList: orderList.value.map(item => item.id),
        paymentList: paymentList.value.map((item) => {
          return {
            ...item,
            estimatePaymentAmount: `${item.estimatePaymentAmount}` ? calc(Number(item.estimatePaymentAmount), 100, '*') : item.estimatePaymentAmount,
            actualPaymentAmount: `${item.actualPaymentAmount}` ? calc(Number(item.actualPaymentAmount), 100, '*') : item.actualPaymentAmount,
            paymentNum: item.xh,
          }
        }),
        agreementKind: '1', // 合同种类，1收入合同
      }
      if (pageType.value === 'add') { // 新建
        addContractList(param).then((res) => {
          if (res.code === 200) {
            submitId.value = res.data.id
            loading.close()
            ElMessage.success('保存成功')
          }
        }).catch(() => {
          loading.close()
        })
      }
      else if (pageType.value === 'edit') { // 编辑
        if (approvalStatusName.value === '未通过-驳回') {
          failUpdateContractList(param).then((res) => {
            if (res.code === 200) {
              loading.close()
              ElMessage.success('保存成功')
              close()
            }
          }).catch(() => {
            loading.close()
          })
        }
        else { // 草稿箱和已取消
          updateContractList(param).then((res) => {
            if (res.code === 200) {
              loading.close()
              ElMessage.success('保存成功')
              close()
            }
          }).catch(() => {
            loading.close()
          })
        }
      }
    }
  })
}
// 提交
const handleSubmit = () => {
  if (submitId.value) {
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    const params = {
      id: submitId.value,
      formId: SCHEDULE.BUSINESS_FINANCE_CONTRACT_APPROVE, // 表单id
      processId: form.value.processId, // 流程实例id
    }
    submitContractList(params).then(() => {
      ElMessage.success('已提交')
      loading.close()
      close()
    })
  }
  else {
    ElMessage.warning('请先保存！')
  }
}
onMounted(async () => {
  await getDict()
  approvalStatusName.value = query.approvalStatusName as string // 审批状态名字
  form.value.processId = query.processId as string // 流程实例id
  decisionItem.value = query.decisionItem as string // 同意、驳回、拒绝按钮权限
  taskId.value = query.taskId as string // 流程实例id
  form.value.deptId = user.deptId // 申请单位
  form.value.deptName = user.deptName // 申请单位名称
  form.value.createUser = user.id // 申请人
  form.value.createUserName = user.name // 申请人名称
  // 非添加页面获取详情
  if (pageType.value !== 'add') {
    getInfo()
    if (query.approvalStatusName !== '草稿箱') {
      getApprovalRecord(form.value.processId) // 获取审批流程
    }
  }
})
</script>

<template>
  <app-container>
    <detail-page v-loading="loading" :title="`收入合同管理-${textMap[pageType]}`">
      <template #btns>
        <el-button v-if="pageType === 'detail' && approvalStatusName === '待审批'" type="primary" @click="handleApprove('同意')">
          同意
        </el-button>
        <el-button v-if="pageType === 'detail' && approvalStatusName === '待审批' && decisionItem !== '3'" type="primary" @click="handleApprove('驳回')">
          驳回
        </el-button>
        <el-button v-if="pageType === 'detail' && approvalStatusName === '待审批' && decisionItem !== '2'" type="danger" @click="handleApprove('拒绝')">
          拒绝
        </el-button>
        <el-button v-if="pageType === 'detail' && approvalStatusName === '审批中'" type="info" @click="handleApprove('取消')">
          取消
        </el-button>
        <el-button v-if="pageType === 'add'" type="primary" @click="handleSubmit">
          提交
        </el-button>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="saveForm(ruleFormRef)">
          保存
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <div id="form">
        <el-form
          ref="ruleFormRef"
          :model="form"
          :label-width="120"
          label-position="right"
          :rules="rules"
        >
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="合同编号:" prop="id">
                <el-input v-model="form.agreementNo" disabled placeholder="系统自动生成" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同名称:" prop="agreementName">
                <el-input
                  v-model="form.agreementName"
                  :placeholder="pageType === 'detail' ? '' : '请输入合同名称'"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建人:">
                <el-input
                  v-model="form.createUserName" disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="部门:" prop="deptName">
                <el-input
                  v-model="form.deptName" disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同类型" prop="agreementType">
                <el-select v-model="form.agreementType" :placeholder="pageType === 'detail' ? '' : '请选择'" :disabled="pageType === 'detail'" clearable style="width: 100%;">
                  <el-option v-for="item in contractTypeMap" :key="item.id" :label="item.name" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预计签订日期:" prop="estimateSignDate">
                <el-date-picker
                  v-model="form.estimateSignDate"
                  type="date"
                  placeholder="请选择"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同金额(元)" prop="agreementAmount">
                <el-input
                  v-model="form.agreementAmount"
                  :placeholder="pageType === 'detail' ? '' : '请输入合同金额'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同采购来源" prop="agreementSource">
                <el-select v-model="form.agreementSource" :placeholder="pageType === 'detail' ? '' : '请选择'" :disabled="pageType === 'detail'" clearable style="width: 100%;">
                  <el-option v-for="item in contractSourceMap" :key="item.id" :label="item.name" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同开始日期:" prop="agreementStartDate">
                <el-date-picker
                  v-model="form.agreementStartDate"
                  type="date"
                  :placeholder="pageType === 'detail' ? '' : '请选择'"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同结束日期:" prop="agreementEndDate">
                <el-date-picker
                  v-model="form.agreementEndDate"
                  type="date"
                  :placeholder="pageType === 'detail' ? '' : '请选择'"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="甲方单位" prop="firstParty">
                <el-input
                  v-model="form.firstParty"
                  :placeholder="pageType === 'detail' ? '' : '请选择甲方单位'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                >
                  <template v-if="pageType === 'add'" #append>
                    <el-button size="small" @click="customerNoFocus">
                      选择
                    </el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="甲方负责人:" prop="director">
                <el-input
                  v-model="form.director"
                  :placeholder="pageType === 'detail' ? '' : '请输入负责人'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="乙方单位:" prop="secondParty">
                <el-input
                  v-model="form.secondParty"
                  :placeholder="pageType === 'detail' ? '' : '请输入乙方单位'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="乙方负责人:" prop="secondDirector">
                <el-input
                  v-model="form.secondDirector"
                  :placeholder="pageType === 'detail' ? '' : '请输入负责人'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24" class="marg">
            <el-col :span="12">
              <el-form-item label="合同重要内容:">
                <el-input
                  v-model="form.agreementImportantContent"
                  type="textarea"
                  autosize
                  :placeholder="pageType === 'detail' ? '' : '请输入合同重要内容'"
                  :disabled="pageType === 'detail'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="12">
              <el-form-item label="备注:">
                <el-input
                  v-model="form.remark"
                  type="textarea"
                  autosize
                  :placeholder="pageType === 'detail' ? '' : '请输入备注'"
                  :disabled="pageType === 'detail'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="12">
              <el-form-item label="附件:">
                <show-photo v-if="form.minioFileName" :minio-file-name="form.minioFileName" />
                <span v-else-if="pageType === 'detail'">无</span>
                <input v-show="pageType === ''" ref="fileRef" type="file" @change="onFileChange">
                <el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': form.minioFileName === '' ? '0px' : '20px' }" @click="upload">
                  {{ form.minioFileName === '' ? '上传' : '更换附件' }}
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </detail-page>
    <!-- 表格 -->
    <detail-block title="委托单信息">
      <template #btns>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="multiAdd">
          批量添加
        </el-button>
        <el-button v-if="pageType !== 'detail'" type="info" @click="delOrderRow">
          删除行
        </el-button>
      </template>
      <el-table
        :data="orderList"
        border
        style="width: 100%;"
        max-height="600"
        @selection-change="handleOrderSelectionChange"
      >
        <el-table-column v-if="pageType !== 'detail'" type="selection" width="38" />
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in orderColumn"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          :width="item.width"
          show-overflow-tooltip
          align="center"
        />
      </el-table>
    </detail-block>
    <!-- 表格 -->
    <detail-block title="收款信息">
      <template #btns>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="addPaymentListRow">
          增加行
        </el-button>
        <el-button v-if="pageType !== 'detail'" type="info" @click="delPaymentListRow">
          删除行
        </el-button>
      </template>
      <el-table
        :data="paymentList"
        border
        style="width: 100%;"
        max-height="600"
        @selection-change="handlePaymentSelectionChange"
      >
        <el-table-column v-if="pageType !== 'detail'" type="selection" width="38" />
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in paymentColumn"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          :width="item.width"
          show-overflow-tooltip
          align="center"
        >
          <template #header>
            <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
          </template>
          <template #default="scope">
            <span v-if="item.value === 'paymentNum'">第{{ scope.$index + 1 }}次</span>
            <!-- 预计收款金额、实际收款金额 -->
            <el-input
              v-if="item.value === 'estimatePaymentAmount' || item.value === 'actualPaymentAmount'"
              v-model="scope.row[item.value]"
              :placeholder="pageType === 'detail' ? '' : `请输入${item.text}`"
              :disabled="pageType === 'detail'"
              class="input"
            />
            <!-- 预计收款时间、实际收款时间 -->
            <el-date-picker
              v-if="item.value === 'estimatePaymentDate' || item.value === 'actualPaymentDate'"
              v-model="scope.row[item.value]"
              type="datetime"
              :placeholder="pageType === 'detail' ? '' : '请选择'"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              :disabled="pageType === 'detail'"
            />
          </template>
        </el-table-column>
      </el-table>
    </detail-block>
    <detail-block v-if="query.approvalStatusName !== '草稿箱' && pageType !== 'add'" title="审批流程">
      <!-- 审批流程 -->
      <approval-record ref="approvalRecord" :approval-record-data="approvalRecordData" />
    </detail-block>
    <!-- 选择客户组件 -->
    <select-customer v-model:visible="customerVisible" @confirmCheckout="confirmCheckout" @changeVisible="changeVisible" />
    <!-- 选择委托单组件 -->
    <select-order v-model:visible="orderVisible" :is-multi="true" @confirmCheckout="confirmCheckoutOrder" @changeVisible="changeOrderVisible" />
    <!-- 审批弹窗 -->
    <approval-dialog ref="approvalDialog" @on-success="approvalSuccess" />
  </app-container>
</template>

<style lang="scss" scoped>
// 样式
</style>