<!-- 分包方档案详情 -->
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { ref } from 'vue'
import type { IRecordDetail } from '../subpackage-interface'
import outsourcerUser from './components/outsourcerUser.vue'
import outsourcerAbility from './components/outsourcerAbility.vue'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { detail } from '@/api/business/subpackage/record'
import { fetchApproval, submitApproval } from '@/api/approval'
import showPhoto from '@/views/system/tool/showPhoto.vue'
import type { IMenu } from '@/components/buttonBox/buttonBox'
import ButtonBox from '@/components/buttonBox/buttonBox.vue'
const $route = useRoute()
const $router = useRouter()
const query = $route.query
const menu = ref<IMenu[]>([
  {
    name: '基本信息',
    id: '0',
  },
  {
    name: '分包方人员',
    id: '1',
  },
  {
    name: '业务能力',
    id: '2',
  },
  {
    name: '项目记录',
    id: '3',
  },
  {
    name: '合同记录',
    id: '4',
  },
  {
    name: '检定证书',
    id: '5',
  },
]) // 详情按钮组合
const active = ref('')
const detailForm = ref<IRecordDetail>({
  addressArea: '', // 公司地址-区编码
  addressAreaName: '', // 公司地址-区
  addressCity: '', // 公司地址-市编码
  addressCityName: '', // 公司地址-市
  addressCountry: '', // 公司地址-国家编码
  addressCountryName: '', // 公司地址-国家
  addressProvince: '', // 公司地址-省编码
  addressProvinceName: '', // 公司地址-省
  bankAccount: '', // 银行账户名
  bankAccountNumber: '', // 银行账号
  bankName: '', // 银行名称
  businessContent: '', // 业务内容
  businessScope: '', // 公司业务范围
  businessSize: '', // 业务规模-字典code
  businessSizeName: '', // 业务规模-字典value
  createTime: '', // 创建时间（列表接口返回参数）
  director: '', // 负责人
  email: '', // 邮箱
  evaluation: '', // 整体评价-字典code
  evaluationName: '', // 整体评价-字典value
  fullAddress: '', // 公司地址-详细地址
  grade: '', // 履约评级-字典code
  gradeName: '', // 履约评级-字典value
  id: '', // 主键id（列表、更新、详情接口参数）
  invoiceArea: '', // 开票地址-区编码
  invoiceAreaName: '', // 开票地址-区
  invoiceCity: '', // 开票地址-市编码
  invoiceCityName: '', // 开票地址-市
  invoiceCountry: '', // 开票地址-国家编码
  invoiceCountryName: '', // 开票地址-国家
  invoiceFullAddress: '', // 开票地址-详细地址
  invoiceProvince: '', // 开票地址-省编码
  invoiceProvinceName: '', // 开票地址-省
  minioFileName: '', // minio存储文件名
  mobile: '', // 手机
  outsourcerBriefName: '', // 公司简称
  outsourcerName: '', // 公司名称
  outsourcerNo: '', // 分包方编号
  outsourcerSize: '', // 公司规模-字典code
  outsourcerSizeName: '', // 公司规模-字典value
  phone: '', // 电话
  postalCode: '', // 邮编
  processId: '', // 流程实例id（未通过编辑接口必传参数）
  remark: '', // 备注
  taxNumber: '', // 税号
  website: '', // 网址
})

// 校验规则
const formRules = ref({
  projectName: [{ required: true, message: '分包项目名称必填', trigger: 'blur' }],
  outsourcerId: [{ required: true, message: '分包方编号必填', trigger: ['blur', 'change'] }],
  outsourcerName: [{ required: true, message: '公司名称必填', trigger: ['blur', 'change'] }],
  website: [{ required: true, message: '分包原因必填', trigger: ['blur', 'change'] }],
  preCost: [{ required: true, message: '预计费用必填', trigger: ['blur', 'change'] }],
  preStartTime: [{ required: true, message: '预计开始时间必填', trigger: ['blur', 'change'] }],
  preEndTime: [{ required: true, message: '预计结束时间必填', trigger: ['blur', 'change'] }],
})

const getDetail = () => {
  detail({ id: $route.params.id }).then((res) => {
    // let interfaceStr = ''
    // for (const key in res.data.sampleList[0]) {
    //   const item = res.data[key]
    //   interfaceStr += `${key}:${typeof (item)}\n`
    // }
    // console.log(interfaceStr)
    detailForm.value = res.data
  })
}

// 关闭新增页面的回调
const close = () => {
  $router.back()
}
// 文件上传
const fileRef = ref()
const onFileChange = (event: any) => {
  // 原生上传
  console.log(event.target.files)
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    detailForm.value.minioFileName = event.target.files[0].name
    // UploadFile(fd).then((res) => {
    //   if (res.code === 200) {
    //     sampleForm.value.minioFileName = res.data[0]
    //     // 重置当前验证
    //     ElMessage.success('文件上传成功')
    //   }
    //   else {
    //     ElMessage.error(res.message)
    //   }
    // })
  }
}
const upload = () => {
  fileRef.value.click()
}

// 切换tab状态
const changeCurrentButton = (val: string) => {
  console.log(val)
  active.value = val
}

onMounted(() => {
  if (query.title !== '新建') {
    getDetail()
  }
  active.value = '0'
})
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page title="分包方档案">
      <button-box :active="active" :menu="menu" @change-current-button="changeCurrentButton" />
      <template #btns>
        <el-button type="primary">
          打印
        </el-button>
        <el-button type="primary">
          编辑/保存
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <!-- 基本信息 -->
      <el-form
        v-if="active === '0'"
        ref="ruleFormRef"
        :model="detailForm"
        label-width="140"
        label-position="right"
        :rules="formRules"
      >
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="分包方编号:" prop="outsourcerNo">
              <el-input
                v-model="detailForm.outsourcerNo" disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="公司名称:" prop="outsourcerName">
              <el-input
                v-model="detailForm.outsourcerName"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="公司简称:" prop="outsourcerBriefName">
              <el-input
                v-model="detailForm.outsourcerBriefName" disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务内容:" prop="businessContent">
              <el-input
                v-model="detailForm.businessContent" disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="公司规模:" prop="outsourcerSize">
              <el-input
                v-model="detailForm.outsourcerSize"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务规模:" prop="businessSize">
              <el-input
                v-model="detailForm.businessSize"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="履约评级:" prop="grade">
              <el-input
                v-model="detailForm.grade"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="整体评价:" prop="evaluation">
              <el-input
                v-model="detailForm.evaluation"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="税号:" prop="taxNumber">
              <el-input
                v-model="detailForm.taxNumber"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="银行账户名:" prop="bankAccount">
              <el-input
                v-model="detailForm.bankAccount"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="银行名称:" prop="bankName">
              <el-input
                v-model="detailForm.bankName"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="银行账号:" prop="bankAccountNumber">
              <el-input
                v-model="detailForm.bankAccountNumber"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邮编:" prop="postalCode">
              <el-input
                v-model="detailForm.postalCode"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="负责人:" prop="director">
              <el-input
                v-model="detailForm.director"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电话:" prop="phone">
              <el-input
                v-model="detailForm.phone"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="传真:" prop="website">
              <el-input
                v-model="detailForm.website"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机:" prop="mobile">
              <el-input
                v-model="detailForm.mobile"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邮箱:" prop="email">
              <el-input
                v-model="detailForm.email"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="网址:" prop="website">
              <el-input
                v-model="detailForm.website"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司地址:" prop="website">
              <!-- todo -->
              <el-input
                v-model="detailForm.website"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" />
          <el-col :span="12">
            <el-form-item label="开票用地址:" prop="website">
              <!-- todo -->
              <el-input
                v-model="detailForm.website"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" />
          <el-col :span="12">
            <el-form-item label="公司业务范围:" prop="businessScope">
              <el-input
                v-model="detailForm.businessScope"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" />
          <el-col :span="12">
            <el-form-item label="备注:" prop="remark">
              <el-input
                v-model="detailForm.remark"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" />
          <el-col :span="6">
            <el-form-item label="附件:" prop="minioFileName">
              <input v-show="query.title === ''" ref="fileRef" multiple type="file" @change="onFileChange">
              <span v-if="query.title === '详情' && !detailForm.minioFileName">无</span>
              <div v-else style="display: flex;">
                <show-photo :minio-file-name="detailForm.minioFileName || ''" style="display: inline-block;margin: 10px;" />
              </div>
              <el-button v-if="query.title !== '详情'" type="primary" :disabled="query.title === '详情'" @click="upload">
                {{ detailForm.minioFileName ? '更换' : '上传' }}
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="18" />
        </el-row>
      </el-form>
    </detail-page>
    <template
      #btns
    >
      <el-button type="primary">
        增加行
      </el-button>
      <el-button type="info">
        删除行
      </el-button>
    </template>
    <outsourcer-user v-if="active === '1'" />
    <outsourcer-ability v-if="active === '2'" />
    <!-- 分包方人员 -->
    <!-- 业务能力 -->
    <!-- 项目记录 -->
    <!-- 合同记录 -->
    <!-- 检定证书 -->
  </app-container>
</template>

<style lang="scss" scoped>
// 样式
::v-deep.container .btns {
  position: static !important;
  padding-bottom: 20px !important;
}
</style>