<!-- 测试、校准或检定合格分包方名录 基本信息 -->
<script name="SubpackageDirectoriesBasic" lang="ts" setup>
import type { Ref } from 'vue'
import type { IForm } from '../directories-interface'
import type { IAddress } from '@/components/AddressSelect/address-interface'
import { getInfo } from '@/api/business/subpackage/directories'
const props = defineProps({
  pageType: { // 页面类型 add新建 edit编辑 detail详情
    type: String,
    requre: true,
    default: 'detail',
  },
  id: {
    type: String,
    requre: true,
  },
  approvalStatusName: { // 审批状态名称
    type: String,
    requre: true,
  },
})
const emits = defineEmits(['addSuccess', 'submitSuccess'])
const form: Ref<IForm> = ref({ // 表单
  outsourcerNo: '', // 分包方编号
  outsourcerName: '', // 公司名称
  director: '', // 机构负责人
  fullAddress: '', // 公司地址-详细地址
  addressArea: '', // 公司地址-区编码
  addressCity: '', // 公司地址-市编码
  addressCountry: '', // 公司地址-国家编码
  addressProvince: '', // 公司地址-省编码
  addressAreaName: '', // 公司地址-区
  addressCityName: '', // 公司地址-市
  addressCountryName: '', // 公司地址-国家
  addressProvinceName: '', // 公司地址-省
  postalCode: '', // 邮编
  contacts: '', // 联系人
  mobile: '', // 联系电话
  fax: '', // 传真
  createUserName: '', // 创建人
  createTime: '', // 创建时间
  testMethod: '', // 测试方法
  techniqueAbility: '', // 技术能力
  remark: '', // 备注
})
const fullAddress = ref<string[]>([]) // 公司地址
const invoiceFullAddress = ref<string[]>([]) // 开票地址
const ruleFormRef = ref() // 表单ref
const loading = ref(false) // loading
const infoId = ref('') // id

// 获取详情
const fetchInfo = () => {
  loading.value = true
  getInfo({ id: infoId.value }).then((res) => {
    loading.value = false
    form.value = res.data
    form.value.fullAddress = res.data.addressCountryName + res.data.addressProvinceName + res.data.addressCityName + res.data.addressAreaName + res.data.fullAddress
    // if (props.pageType == 'detail') {
    //   fullAddress.value = [form.value.addressCountryName, form.value.addressProvinceName, form.value.addressCityName, form.value.addressAreaName, form.value.fullAddress]
    //   invoiceFullAddress.value = [form.value.invoiceCountryName, form.value.invoiceProvinceName, form.value.invoiceCityName, form.value.invoiceAreaName, form.value.invoiceFullAddress]
    // }
    // else {
    //   fullAddress.value = [form.value.addressCountry, form.value.addressProvince, form.value.addressCity, form.value.addressArea, form.value.fullAddress]
    //   invoiceFullAddress.value = [form.value.invoiceCountry, form.value.invoiceProvince, form.value.invoiceCity, form.value.invoiceArea, form.value.invoiceFullAddress]
    // }
  })
}

// 公司地址变化后给对象赋值
function fullAddressChange(addressObj: IAddress) {
  form.value.addressCountry = addressObj.country
  form.value.addressProvince = addressObj.province
  form.value.addressCity = addressObj.city
  form.value.addressArea = addressObj.area
  form.value.fullAddress = addressObj.address
  form.value.addressCountryName = addressObj.countryName
  form.value.addressProvinceName = addressObj.provinceName
  form.value.addressCityName = addressObj.cityName
  form.value.addressAreaName = addressObj.areaName
}

// ---------------------------------------------钩子----------------------------------------------
watch(() => props.id, (newValue) => {
  infoId.value = newValue!
  if (infoId.value) {
    fetchInfo() // 获取详情信息
  }
}, { immediate: true })
onMounted(async () => {
  if (infoId.value) {
    fetchInfo() // 获取详情信息
  }
})
</script>

<template>
  <detail-block v-loading="loading" title="">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :label-width="120"
      label-position="right"
    >
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="分包方编号:" prop="outsourcerNo">
            <el-input
              v-model="form.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="form.outsourcerName"
              :placeholder="pageType === 'detail' ? ' ' : '分包方名称'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="机构负责人:">
            <el-input
              v-model="form.director"
              :placeholder="pageType === 'detail' ? ' ' : '请输入机构负责人'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </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-col :span="12">
          <el-form-item label="地址:" prop="fullAddress">
            <el-input
              v-model="form.fullAddress"
              :placeholder="pageType === 'detail' ? '' : '地址'"
              :disabled="pageType === 'detail'"
              type="textarea"
              autosize
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="邮政编码:">
            <el-input
              v-model="form.postalCode"
              :placeholder="pageType === 'detail' ? ' ' : '邮政编码'"
              disabled
              :class="{ 'detail-input': pageType === 'detail' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系人:">
            <el-input
              v-model="form.contacts"
              :placeholder="pageType === 'detail' ? ' ' : '联系人'"
              disabled
              :class="{ 'detail-input': pageType === 'detail' }"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="联系电话:">
            <el-input
              v-model="form.mobile"
              :placeholder="pageType === 'detail' ? ' ' : '联系电话'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="传真:">
            <el-input
              v-model="form.fax"
              :placeholder="pageType === 'detail' ? ' ' : '传真'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </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="创建时间:">
            <el-date-picker
              v-model="form.createTime"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              disabled
              class="full-width-input"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="测试方法:">
            <el-input
              v-model="form.testMethod"
              :placeholder="pageType === 'detail' ? ' ' : '测试方法'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
              type="textarea"
              autosize
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="技术能力:">
            <el-input
              v-model="form.techniqueAbility"
              :placeholder="pageType === 'detail' ? ' ' : '技术能力'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
              type="textarea"
              autosize
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="备注:">
            <el-input
              v-model="form.remark"
              :placeholder="pageType === 'detail' ? '' : '请输入备注'"
              disabled
              :class="{ 'detail-input': pageType === 'detail' }"
              type="textarea"
              autosize
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </detail-block>
</template>