<!-- 分包方档案详情 -->
<script lang="ts" setup name="SubpackageRecordEdit">
import type { Ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { el } from 'element-plus/es/locale'
import type { IAbility, IMenu, IMenuDetail, Iperson } from './record-interface'
import TemplateTable from './components/templateTable.vue'
import { isNumber, validatePhone } from '@/utils/validate'
import type { CustomerPerson, ICustomer } from '@/views/customer/customerInfo/customer_interface'
import type { IForm, dictType } from '@/views/business/subpackage/approve/approve-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 { detail } from '@/api/business/subpackage/approval'
import { getListPage } from '@/api/business/subpackage/check'
import { getcertificateList } from '@/api/business/subpackage/certificate'
import { addAbilityList, addPersonList, delAbilityList, delPersonList, getAbilityList, getListApprovePass, getPersonList } from '@/api/business/subpackage/record'
const loading = ref(false) // 表单加载状态
const infoId = ref('') // id
const pageType = ref('detail') // 页面类型: add, edit, detail
const submitId = ref('') // 提交使用的id
const approvalStatusName = ref('') // 审批状态名字
const $route = useRoute()
const query = $route.query
const isshowSave = ref(true) // 显示编辑保存按钮 false编辑 true保存
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 字典

// 表单
const dataForm: Ref<IForm> = ref({
  id: '',
  businessContent: '', // 业务内容
  outsourcerName: '', // 公司名称
  outsourcerNo: '', // 分包方编号
  bankAccount: '', // 银行账户名
  bankAccountNumber: '', // 银行账号
  bankName: '', // 银行名称
  outsourcerBriefName: '', // 公司简称
  businessScope: '', // 公司业务范围
  grade: '', // 履约评级
  outsourcerSize: '', // 公司规模
  businessSize: '', // 业务规模-字典code
  evaluation: '', // 整体评价
  fullAddress: '', // 公司地址-详细地址
  addressArea: '', // 公司地址-区编码
  addressCity: '', // 公司地址-市编码
  addressCountry: '', // 公司地址-国家编码
  addressProvince: '', // 公司地址-省编码
  addressAreaName: '', // 公司地址-区
  addressCityName: '', // 公司地址-市
  addressCountryName: '', // 公司地址-国家
  addressProvinceName: '', // 公司地址-省
  director: '', // 负责人
  // fax: '', // 传真
  invoiceFullAddress: '', // 开票地址-详细地址
  invoiceArea: '', // 开票地址-区编码
  invoiceCity: '', // 开票地址-市编码
  invoiceCountry: '', // 开票地址-国家编码
  invoiceProvince: '', // 开票地址-省编码
  invoiceAreaName: '', // 开票地址-区
  invoiceCityName: '', // 开票地址-市
  invoiceCountryName: '', // 开票地址-国家
  invoiceProvinceName: '', // 开票地址-省
  email: '', // 邮箱
  minioFileName: '', // minio存储文件名
  mobile: '', // 手机
  phone: '', // phone
  postalCode: '', // postalCode
  processId: '', // 流程实例id
  remark: '', // 备注
  taxNumber: '', // 税号
  website: '', // 网址
})
const fullAddress = ref<string[]>([]) // 公司地址
const invoiceFullAddress = ref<string[]>([]) // 开票地址
const ruleFormRef = ref<FormInstance>()
// 初始化router
const $router = useRouter()

// -----------------------------------------路由参数--------------------------------
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 companySizeList = ref<dictType[]>([]) // 公司规模列表
const businessSizeList = ref<dictType[]>([]) // 业务规模列表
const gradeList = ref<dictType[]>([]) // 履约评级列表
const evaluationList = ref<dictType[]>([]) // 整体评价列表
function getDict() {
  // 获取公司规模
  getDictByCode('companySize').then((response) => {
    companySizeList.value = response.data
  })
  // 获取业务规模
  getDictByCode('businessSize').then((response) => {
    businessSizeList.value = response.data
  })
  // 获取履约评级
  getDictByCode('grade').then((response) => {
    gradeList.value = response.data
  })
  // 获取整体评价
  getDictByCode('evaluation').then((response) => {
    evaluationList.value = response.data
  })
}

// -----------------------------------------表格--------------------------------------
const SelectionList = ref([]) // 表格选中
const abilityList: Ref<IAbility[]> = ref([]) // 业务能力列表
const personList: Ref<Iperson[]> = ref([]) // 人员列表
const tableQuery = ref({
  outsourcerId: infoId.value,
  offset: 1,
  limit: 10,
})
const personTotal = ref(0) // 人员数据总数
const abilityTotal = ref(0) // 业务能力数据总数

// 其他关联数据列表
const dataList = ref({
  // personList: [] as Iperson[], // 人员列表
  abilityList: [] as IAbility[], // 业务能力列表
  projectRecords: [], // 项目记录
  contractRecords: [], // 合同记录
  certificationRecords: [], // 证书记录
})

const loadingTable = ref(false) // 表格loading
const checkTotal = ref(0) // 项目记录
const certificateTotal = ref(0) // 证书记录total
const checkListQuery = ref({
  formId: SCHEDULE.BUSINESS_SUBPACKAGE_CHECK, // 表单id
  outsourcerId: infoId.value || '', // 检测单位,分包方id
  projectName: '', // 分包项目名称
  projectNo: '', // 分包项目编号
  offset: 1,
  limit: 20,
})
const certificateListQuery = ref({
  certificateCode: '', // 证书号
  certificateName: '', // 证书名称
  outsourcerId: infoId.value || '', // 检测单位,分包方id
  printStatus: '', // 打印状态（1已打印、0未打印，不传为查询全部）
  sampleName: '', // 样品名称
  sampleNo: '', // 样品编号
  offset: 1,
  limit: 20,
})
// 获取项目记录(分包验收通过列表)
const fetchProjectRecords = function (isNowPage = false) {
  loadingTable.value = true
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    checkListQuery.value.offset = 1
  }
  // 模拟数据
  getListApprovePass(checkListQuery.value).then((response) => {
    dataList.value.projectRecords = response.data.rows
    checkTotal.value = parseInt(response.data.total)
    loadingTable.value = false
  })
}
// 获取合同记录
const fetchContractRecords = () => {

}
// 获取检定证书
const fetchCertifications = function (isNowPage = false) {
  loadingTable.value = true
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    certificateListQuery.value.offset = 1
  }
  getcertificateList(certificateListQuery.value).then((response) => {
    dataList.value.certificationRecords = response.data.rows.map((item: any) => {
      return {
        ...item,
        printStatusName: item.printStatus == 0 ? '未打印' : item.printStatus == 1 ? '已打印' : '',
      }
    })
    certificateTotal.value = parseInt(response.data.total)
    loadingTable.value = false
  })
}
// 获取人员列表
const fetchPersonList = () => {
  getPersonList(tableQuery.value).then((res) => {
    personList.value = res.data.rows
    personTotal.value = res.data.total
  })
}
// 获取业务能力列表
const fetchAbilityList = () => {
  getAbilityList(tableQuery.value).then((res) => {
    abilityList.value = res.data.rows
    abilityTotal.value = res.data.total
  })
}

const menuEdit = ref<IMenu[]>([
  {
    name: '分包方人员',
    columns: [
      { text: '编号', value: 'userNo', required: true },
      { text: '姓名', value: 'name', required: true },
      { text: '工作部门', value: 'department' },
      { text: '职务', value: 'job' },
      { text: '联系方式', value: 'phone', required: true, reg: validatePhone },
    ],
    pagination: false,
    list: 'personList',
    searchFunc: fetchPersonList,
  },
  {
    name: '业务能力',
    columns: [
      { text: '能力名称', value: 'abilityName', required: true },
      { text: '能力描述', value: 'abilityDesc', required: true },
      { text: '报价', value: 'price', required: true, reg: isNumber },
    ],
    pagination: false,
    list: 'abilityList',
    searchFunc: fetchAbilityList,
  },
]) // 分包方人员和业务能力

const menuDetail = ref<IMenuDetail[]>([
  {
    name: '项目记录',
    columns: [
      { text: '分包项目编号', value: 'projectNo', align: 'center' },
      { text: '分包项目名称', value: 'projectName', align: 'center' },
      { text: '申请人', value: 'applicantName', align: 'center' },
      { text: '申请时间', value: 'applicantTime', align: 'center' },
      { text: '验收状况', value: 'checkConclusion', align: 'center' },
      { text: '验收时间', value: 'checkTime', align: 'center' },
    ],
    pagination: true,
    list: 'projectRecords',
    searchFunc: fetchProjectRecords,
  },
  {
    name: '合同记录',
    columns: [
      { text: '合同编号', value: 'contractCode', align: 'center' },
      { text: '合同名称', value: 'contractName', align: 'center' },
      { text: '合同金额', value: 'contractPrice', align: 'center' },
      { text: '合同状态', value: 'contractStatus', align: 'center' },
      { text: '合同时间', value: 'contractTime', align: 'center' },
      { text: '负责人', value: 'aCompanyDutyman', align: 'center' },
    ],
    query: {
      id: '',
      limit: 10,
      offset: 1,
    },
    list: 'contractRecords',
    pagination: true,
    searchFunc: fetchContractRecords,
  },
  {
    name: '检定证书',
    query: {
      id: '',
      limit: 10,
      offset: 1,
    },
    columns: [
      { text: '证书编号', value: 'certificateCode', align: 'center', width: '160px' },
      { text: '证书名称', value: 'certificateName', align: 'center' },
      { text: '样品编号', value: 'sampleNo', align: 'center', width: '160px' },
      { text: '样品名称', value: 'sampleName', align: 'center' },
      { text: '型号', value: 'sampleModel', align: 'center' },
      { text: '出厂编号', value: 'manufacturingNo', align: 'center' },
      { text: '检测单位', value: 'outsourcerName', align: 'center' },
      { text: '打印状态', value: 'printStatusName', align: 'center' },
    ],
    list: 'certificationRecords',
    pagination: true,
    searchFunc: fetchCertifications,
  },
])

const currentMenuEdit = ref('分包方人员')
const currentMenuEditObj = computed(() => {
  return menuEdit.value.find(item => item.name === currentMenuEdit.value)
})
const currentMenuDetail = ref('项目记录')
const currentMenuDetailObj = computed(() => {
  return menuDetail.value.find(item => item.name === currentMenuDetail.value)
})

// 人员对象
const addPersonObj: Iperson = {
  department: '', // 部门
  job: '', // 职务
  name: '', // 名字
  outsourcerId: infoId.value, // 分包方id
  phone: '', // 手机
  userNo: '', // 人员编号
  createTime: '', // 创建时间
  id: '',
  editable: true,
}
// 业务能力对象
const addAbilityObj: IAbility = {
  abilityDesc: '', // 能力描述
  abilityName: '', // 能力名称
  outsourcerId: infoId.value,
  price: '', // 报价
  createTime: '', // 创建时间
  id: '',
  editable: true,
}

// 改变页容量
function handleSizeChange(val: number) {
  tableQuery.value.offset = 1
  tableQuery.value.limit = val
  if (currentMenuEdit.value === '分包方人员') {
    fetchPersonList()
  }
  if (currentMenuEdit.value === '业务能力') {
    fetchAbilityList()
  }
}
// 改变当前页
function handleCurrentChange(val: number) {
  tableQuery.value.offset = val
  if (currentMenuEdit.value === '分包方人员') {
    fetchPersonList()
  }
  if (currentMenuEdit.value === '业务能力') {
    fetchAbilityList()
  }
}

// 检查列表
function checkPersonList(list: any, columns: any, title?: string) {
  for (let index = 0; index < list.length; index++) {
    const item = list[index]
    for (const prop of columns) {
      // 检查必填
      if (prop.required && !item[prop.value]) {
        ElMessage.warning(`请先完善${title}第${index + 1}行中${prop.text}`)
        return false
      }
      // 验证正则
      if (prop.reg && typeof prop.reg === 'function') {
        if (!prop.reg(item[prop.value])) {
          ElMessage.warning(`第${index + 1}行中${prop.text}输入不合法`)
          return false
        }
      }
    }
  }
  return true
}

// 将所有信息列表置为不可编辑状态
function setAllRowReadable(list: any) {
  for (const item of list) {
    item.editable = false
  }
}

// 监听页数变化
const changePage = (val: any) => {
  if (currentMenuDetail.value === '项目记录') {
    if (val.value && currentMenuDetailObj) {
      checkListQuery.value.offset = val.value.offset
      checkListQuery.value.limit = val.value.limit
      currentMenuDetailObj.value!.searchFunc!()
    }
  }
  else if (currentMenuDetail.value === '检定证书') {
    if (val.value && currentMenuDetailObj) {
      certificateListQuery.value.offset = val.value.offset
      certificateListQuery.value.limit = val.value.limit
      currentMenuDetailObj.value!.searchFunc!()
    }
  }
}

// 监听上面表格按钮切换
watch(currentMenuEdit, (newVal) => {
  tableQuery.value.offset = 1 // 切换按钮从第一页开始
})

// 监听下面按钮切换
watch(currentMenuDetailObj, () => {
  checkListQuery.value.offset = 1
  currentMenuDetailObj.value!.searchFunc!()
},
{
  deep: true,
  immediate: true,
})

// -----------------------------------------人员信息------------------------------------------

// 双击行显示输入框
const dblclickRow = (row: any) => {
  if (currentMenuEdit.value === '分包方人员') {
    setAllRowReadable(personList.value)
    row.editable = true
  }
  if (currentMenuEdit.value === '业务能力') {
    setAllRowReadable(abilityList.value)
    row.editable = true
  }
}

// 点击增加行
const addRow = () => {
  if (currentMenuEdit.value === '分包方人员') {
    console.log('分包方人员增加')

    // 检查上一行必填项
    if (checkPersonList(personList.value, currentMenuEditObj.value!.columns, '分包方人员')) {
      setAllRowReadable(personList.value)
      personList.value.unshift({ ...addPersonObj })
    }
  }
  if (currentMenuEdit.value === '业务能力') {
    console.log('业务能力增加')

    // 检查上一行必填项
    if (checkPersonList(abilityList.value, currentMenuEditObj.value!.columns, '业务能力')) {
      setAllRowReadable(abilityList.value)
      abilityList.value.unshift({ ...addAbilityObj })
    }
  }
}

// 删除行
const deleteList = () => {
  // 没有id的数据
  const delListNoId = SelectionList.value.filter((item: Iperson) => !item.id)
  // 含有id的数据
  const delListhaveId = SelectionList.value.filter((item: Iperson) => item.id)
  const ids = delListhaveId.map((item: any) => item.id)
  // 前端删除数据
  if (delListNoId.length) { // 全是没有id的
    if (currentMenuEdit.value === '分包方人员') {
      personList.value.shift()
    }
    if (currentMenuEdit.value === '业务能力') {
      abilityList.value.shift()
    }
    if (delListNoId.length === SelectionList.value.length) { // 全是没有id的数据，前端删除
      return
    }
  }
  // 删除数据库的数据
  if (ids.length) {
    ElMessageBox.confirm(
      '确认删除吗？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      },
    ).then(() => {
      if (currentMenuEdit.value === '分包方人员') {
        delPersonList({ ids }).then((res) => {
          if (res.code === 200) {
            ElMessage.success('删除成功')
            fetchPersonList()
          }
        })
      }
      if (currentMenuEdit.value === '业务能力') {
        delAbilityList({ ids }).then((res) => {
          if (res.code === 200) {
            ElMessage.success('删除成功')
            fetchAbilityList()
          }
        })
      }
    })
  }
}
// 表格选中
const handleSelectionChange = (e: any) => {
  console.log(e)

  SelectionList.value = e
}

// ---------------------------------------------------------------------------------------------------
// 获取详情表单
const getInfo = () => {
  loading.value = true
  detail({ id: infoId.value }).then((res) => {
    loading.value = false
    dataForm.value = res.data
    if (pageType.value == 'detail') {
      fullAddress.value = [dataForm.value.addressCountryName, dataForm.value.addressProvinceName, dataForm.value.addressCityName, dataForm.value.addressAreaName, dataForm.value.fullAddress]
      invoiceFullAddress.value = [dataForm.value.invoiceCountryName, dataForm.value.invoiceProvinceName, dataForm.value.invoiceCityName, dataForm.value.invoiceAreaName, dataForm.value.invoiceFullAddress]
    }
    else {
      fullAddress.value = [dataForm.value.addressCountry, dataForm.value.addressProvince, dataForm.value.addressCity, dataForm.value.addressArea, dataForm.value.fullAddress]
      invoiceFullAddress.value = [dataForm.value.invoiceCountry, dataForm.value.invoiceProvince, dataForm.value.invoiceCity, dataForm.value.invoiceArea, dataForm.value.invoiceFullAddress]
    }
  })
}
// 关闭
const close = () => {
  $router.back()
}
// 公司地址变化后给对象赋值
function fullAddressChange(addressObj: IAddress) {
  dataForm.value.addressCountry = addressObj.country
  dataForm.value.addressProvince = addressObj.province
  dataForm.value.addressCity = addressObj.city
  dataForm.value.addressArea = addressObj.area
  dataForm.value.fullAddress = addressObj.address
  dataForm.value.addressCountryName = addressObj.countryName
  dataForm.value.addressProvinceName = addressObj.provinceName
  dataForm.value.addressCityName = addressObj.cityName
  dataForm.value.addressAreaName = addressObj.areaName
}
// 开票地址发生变化
function invoiceFullAddressChange(addressObj: IAddress) {
  dataForm.value.invoiceCountry = addressObj.country
  dataForm.value.invoiceProvince = addressObj.province
  dataForm.value.invoiceCity = addressObj.city
  dataForm.value.invoiceArea = addressObj.area
  dataForm.value.invoiceFullAddress = addressObj.address
  dataForm.value.invoiceCountryName = addressObj.countryName
  dataForm.value.invoiceProvinceName = addressObj.provinceName
  dataForm.value.invoiceCityName = addressObj.cityName
  dataForm.value.invoiceAreaName = addressObj.areaName
}

// 打印表单
const printObj = ref({
  id: 'form', // 需要打印元素的id
  popTitle: '客户详情', // 打印配置页上方的标题
  extraHead: '<div style="display: flex;flex-direction: column;text-align: center"><h3>分包方档案详情</h3></div>', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  standard: '',
  extarCss: '',
})

// 保存表格
function saveTable() {
  if (!personList.value.length) {
    ElMessage.warning('人员列表不能为空')
    return
  }
  if (!abilityList.value.length) {
    ElMessage.warning('业务能力列表不能为空')
    return
  }
  if (checkPersonList(personList.value, menuEdit.value[0].columns, '分包方人员') && checkPersonList(abilityList.value, menuEdit.value[1].columns, '业务能力')) {
    ElMessageBox.confirm(
      '确认保存吗？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      },
    ).then(() => {
      const personParams = personList.value.filter(item => !item.id)
      const abilityParams = abilityList.value.filter(item => !item.id)
      if (!personParams.length && !abilityParams.length) {
        ElMessage.warning('人员和业务能力列表均无新增的数据')
        return
      }
      if (personParams.length) {
        addPersonList(personParams).then((res) => {
          if (res.code === 200) {
            ElMessage.success('人员列表保存成功')
            setAllRowReadable(personList.value) // 将表格退出编辑模式
            fetchPersonList() // 获取人员列表
          }
        })
      }
      if (abilityParams.length) {
        addAbilityList(abilityParams).then((res) => {
          if (res.code === 200) {
            ElMessage.success('业务能力列表保存成功')
            setAllRowReadable(abilityList.value)
            fetchAbilityList() // 获取业务能力列表
          }
        })
      }
    })
  }
}

// -----------------------------------------文件上传-----------------------------------
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])
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        dataForm.value.minioFileName = res.data[0]
        // 重置当前验证
        ElMessage.success('文件上传成功')
      }
      else {
        ElMessage.error(res.message)
      }
    })
  }
}
const upload = () => {
  fileRef.value.click()
}
// -------------------------------------------审批流程----------------------------------------

onMounted(() => {
  approvalStatusName.value = query.approvalStatusName as string // 审批状态名字
  dataForm.value.processId = query.processId as string // 流程实例id
  // 非添加页面获取详情
  if (pageType.value !== 'add') {
    getInfo()
  }
  getDict()
  fetchPersonList() // 获取人员列表
  fetchAbilityList() // 获取业务能力列表
})
</script>

<template>
  <app-container>
    <detail-page v-loading="loading" :title="`分包方档案-${textMap[pageType]}`">
      <template #btns>
        <!-- <el-button v-if="pageType === 'detail'" v-print="printObj" type="primary">
          打印
        </el-button> -->
        <!-- <el-button v-if="!isshowSave" type="primary" @click="editTable">
          编辑
        </el-button> -->
        <el-button v-if="isshowSave" type="primary" @click="saveTable">
          保存
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <div id="form">
        <el-form
          ref="ruleFormRef"
          :model="dataForm"
          :label-width="120"
          label-position="right"
        >
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="分包方编号:" prop="outsourcerNo">
                <el-input
                  v-model="dataForm.outsourcerNo"
                  :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="公司名称:" prop="outsourcerName">
                <el-input
                  v-model.trim="dataForm.outsourcerName"
                  :placeholder="pageType === 'detail' ? '' : '请输入公司名称'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col><el-col :span="6">
              <el-form-item label="公司简称:">
                <el-input
                  v-model="dataForm.outsourcerBriefName"
                  :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="businessContent">
                <el-input
                  v-model.trim="dataForm.businessContent"
                  :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="outsourcerSize">
                <el-select v-model="dataForm.outsourcerSize" :placeholder="pageType === 'detail' ? ' ' : '请选择公司规模'" :disabled="pageType === 'detail'" class="full-width-input">
                  <el-option v-for="item in companySizeList" :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="businessSize">
                <el-select v-model="dataForm.businessSize" :placeholder="pageType === 'detail' ? ' ' : '请选择业务规模'" :disabled="pageType === 'detail'" class="full-width-input">
                  <el-option v-for="item in businessSizeList" :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="grade">
                <el-select v-model="dataForm.grade" :placeholder="pageType === 'detail' ? ' ' : '请选择履约评级'" :disabled="pageType === 'detail'" class="full-width-input">
                  <el-option v-for="item in gradeList" :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="evaluation">
                <el-select v-model="dataForm.evaluation" :placeholder="pageType === 'detail' ? ' ' : '请选择整体评价'" :disabled="pageType === 'detail'" class="full-width-input">
                  <el-option v-for="item in evaluationList" :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="taxNumber">
                <el-input
                  v-model="dataForm.taxNumber"
                  :placeholder="pageType === 'detail' ? '' : '请输入税号'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="银行账户名:">
                <el-input
                  v-model="dataForm.bankAccount"
                  :placeholder="pageType === 'detail' ? '' : '请输入银行账户名'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="银行名称:">
                <el-input
                  v-model="dataForm.bankName"
                  :placeholder="pageType === 'detail' ? '' : '请输入银行名称'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="银行账号:">
                <el-input
                  v-model="dataForm.bankAccountNumber"
                  :placeholder="pageType === 'detail' ? '' : '请输入银行账号'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="邮编:">
                <el-input
                  v-model="dataForm.postalCode"
                  :placeholder="pageType === 'detail' ? '' : '请输入邮编'"
                  :disabled="pageType === 'detail'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="负责人:">
                <el-input
                  v-model="dataForm.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="电话:">
                <el-input
                  v-model="dataForm.phone"
                  :placeholder="pageType === 'detail' ? '' : '请输入电话'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
              <el-form-item label="传真:">
                <el-input
                  v-model="dataForm.fax"
                  :placeholder="pageType === 'detail' ? '' : '请输入传真'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col> -->
            <el-col :span="6">
              <el-form-item label="手机:">
                <el-input
                  v-model="dataForm.mobile"
                  :placeholder="pageType === 'detail' ? '' : '请输入手机'"
                  :disabled="pageType === 'detail'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="邮箱:">
                <el-input
                  v-model="dataForm.email"
                  :placeholder="pageType === 'detail' ? '' : '请输入邮箱'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="网址:">
                <el-input
                  v-model="dataForm.website"
                  :placeholder="pageType === 'detail' ? '' : '请输入网址'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-form-item label="公司地址:">
              <address-select :data="fullAddress" :detail="pageType === 'detail'" @on-change="fullAddressChange" />
            </el-form-item>
          </el-row>
          <el-row :gutter="5">
            <el-form-item label="开票地址:">
              <address-select :data="invoiceFullAddress" :detail="pageType === 'detail'" @on-change="invoiceFullAddressChange" />
            </el-form-item>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="14">
              <el-form-item label="公司业务范围:">
                <el-input
                  v-model="dataForm.businessScope"
                  :placeholder="pageType === 'detail' ? '' : '请输入公司业务范围'"
                  :disabled="pageType === 'detail'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="14">
              <el-form-item label="备注:">
                <el-input
                  v-model="dataForm.remark"
                  :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="14">
              <el-form-item label="附件:">
                <show-photo v-if="dataForm.minioFileName" :minio-file-name="dataForm.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': dataForm.minioFileName === '' ? '0px' : '20px' }" @click="upload">
                  {{ dataForm.minioFileName === '' ? '上传' : '更换附件' }}
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </detail-page>

    <detail-block-switch :title="currentMenuEdit">
      <template #menu>
        <el-radio-group v-model="currentMenuEdit">
          <el-radio-button v-for="item in menuEdit" :key="item.name" :label="item.name">
            {{ item.name }}
          </el-radio-button>
        </el-radio-group>
      </template>
      <template #btns>
        <el-button type="primary" @click="addRow">
          增加行
        </el-button>
        <el-button type="info" @click="deleteList">
          删除行
        </el-button>
      </template>
      <el-table
        v-loading="loading"
        :data="currentMenuEdit === '分包方人员' ? personList : abilityList"
        border
        style="width: 100%;"
        @selection-change="handleSelectionChange"
        @row-dblclick="dblclickRow"
      >
        <el-table-column type="selection" width="38" />
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in currentMenuEditObj!.columns"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          align="center"
        >
          <template #header>
            <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
          </template>
          <template #default="scope">
            <span v-if="!scope.row.editable">{{ scope.row[item.value] }}</span>
            <el-input v-else v-model.trim="scope.row[item.value]" :autofocus="true" :placeholder="`${item.text}`" class="input" />
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="90"
        >
          <template #default="{ row }">
            <el-button
              size="small"
              type="primary"
              link
              @click="saveRow(row)"
            >
              <span v-if="!row.editable">编辑</span>
              <span v-if="row.editable">保存</span>
            </el-button>
            <el-button
              size="small"
              type="danger"
              link
              @click="deleteRow(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <div style="width: 100%;margin-top: 10px;">
        <el-pagination
          :current-page="tableQuery.offset"
          :page-sizes="[10, 20, 30]"
          :page-size="tableQuery.limit"
          :total="currentMenuEdit === '分包方人员' ? personTotal : abilityTotal"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </detail-block-switch>
    <detail-block-switch :title="currentMenuDetail">
      <template #menu>
        <el-radio-group v-model="currentMenuDetail">
          <el-radio-button v-for="item in menuDetail" :key="item.name" :label="item.name">
            {{ item.name }}
          </el-radio-button>
        </el-radio-group>
      </template>
      <template-table v-if="currentMenuDetailObj" :total="currentMenuDetail === '项目记录' ? checkTotal : currentMenuDetail === '检定证书' ? certificateTotal : 0" :columns="currentMenuDetailObj.columns" :list="dataList[currentMenuDetailObj.list]" :loading="false" :pagination="currentMenuDetailObj.pagination" @change-page="changePage" />
    </detail-block-switch>
  </app-container>
</template>

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