<script lang="ts" setup name="ListSourceAdd">
/**
 * 添加/编辑/详情溯源供方
 */
import type { Ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, UploadUserFile } from 'element-plus'
import baseInfoDetail from './components/baseInfoDetail.vue'
import type { ISupplier, traceSupplierPerson } from './list_interface'
import showPhoto from '@/views/system/tool/showPhoto.vue'
import { UploadFile } from '@/api/measure/file'
import { getSoucreListDetail, getSoucreListlevelType, sourceDraftUpdate, sourceSave, sourceSubmit } from '@/api/measure/source'
import { validatePhone } from '@/utils/validate'
import { SCHEDULE } from '@/utils/scheduleDict'
import type { IAddress } from '@/components/AddressSelect/address-interface'
const loading = ref(false) // 表单加载状态
const curFormId = SCHEDULE.SUPPLIER_APPROVAL
const infoId = ref('') // id
const pageType = ref('add') // 页面类型: add,edit, detail
const buttonLoading = ref(false) // 按钮加载状态
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 字典
// 从路由中获取页面类型参数
const $route = useRoute()
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 formInline: Ref<ISupplier> = ref({
  id: '',
  businessContent: '',
  supplierName: '',
  supplierNo: '',
  bankAccount: '',
  bankAccountNumber: '',
  bankName: '',
  briefName: '',
  businessScope: '',
  companyAddress: '',
  companyArea: '',
  companyCity: '',
  companyCountry: '',
  companyProvince: '',
  companyAreaName: '',
  companyCityName: '',
  companyCountryName: '',
  companyProvinceName: '',
  director: '',
  fax: '',
  invoiceAddress: '',
  invoiceArea: '',
  invoiceCity: '',
  invoiceCountry: '',
  invoiceProvince: '',
  invoiceAreaName: '',
  invoiceCityName: '',
  invoiceCountryName: '',
  invoiceProvinceName: '',
  mailbox: '',
  minioFileName: '',
  mobile: '',
  phone: '',
  postalCode: '',
  remark: '',
  taxNumber: '',
  website: '',
  traceSupplierPersonList: [],
})
const isChanged = ref(false)
const companyAddress = ref<string[]>([]) // 公司地址
const invoiceAddress = ref<string[]>([]) // 开票地址
const traceSupplierPersonList: Ref<traceSupplierPerson[]> = ref([]) // 人员列表
const columns = ref([
  { text: '人员编号', value: 'personNo', required: false },
  { text: '姓名', value: 'name', required: true },
  { text: '工作部门', value: 'department', required: false },
  { text: '职务', value: 'job', required: false },
  { text: '联系方式', value: 'phone', required: true, reg: validatePhone },
])
const ruleFormRef = ref<FormInstance>()
// 人员对象
const addPersonObj: traceSupplierPerson = {
  id: '',
  personNo: '',
  name: '',
  department: '',
  job: '',
  phone: '',
  editable: true,
}
const SelectionList: Ref<traceSupplierPerson[]> = ref([])
// 校验规则
const rules = ref({
  supplierName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
  businessContent: [{ required: true, message: '业务内容不能为空', trigger: 'blur' }],
  taxNumber: [{ required: true, message: '税号不能为空', trigger: 'blur' }],
}) // 表单验证规则
// 初始化router
const $router = useRouter()
// 关闭新增页面的回调
const close = () => {
  $router.back()
}
const getInfo = () => {
  getSoucreListDetail({ id: infoId.value }).then((res) => {
    formInline.value = res.data
    // for (const key in formInline.value) {
    //   formInline.value[key] = res.data[key]
    // }
    formInline.value.id = infoId.value
    if (pageType.value !== 'detail') {
      companyAddress.value = [formInline.value.companyCountry, formInline.value.companyProvince, formInline.value.companyCity, formInline.value.companyArea, formInline.value.companyAddress]
      invoiceAddress.value = [formInline.value.invoiceCountry, formInline.value.invoiceProvince, formInline.value.invoiceCity, formInline.value.invoiceArea, formInline.value.invoiceAddress]
    }
    else {
      companyAddress.value = [formInline.value.companyCountryName, formInline.value.companyProvinceName, formInline.value.companyCityName, formInline.value.companyAreaName, formInline.value.companyAddress]
      invoiceAddress.value = [formInline.value.invoiceCountryName, formInline.value.invoiceProvinceName, formInline.value.invoiceCityName, formInline.value.invoiceAreaName, formInline.value.invoiceAddress]
    }
  })
}
// 表格选中
const handleSelectionChange = (e: traceSupplierPerson[]) => {
  SelectionList.value = e
}

// 公司地址变化后给对象赋值
function companyAddressChange(addressObj: IAddress) {
  formInline.value.companyCountry = addressObj.country
  formInline.value.companyProvince = addressObj.province
  formInline.value.companyCity = addressObj.city
  formInline.value.companyArea = addressObj.area
  formInline.value.companyAddress = addressObj.address
  formInline.value.companyCountryName = addressObj.countryName
  formInline.value.companyProvinceName = addressObj.provinceName
  formInline.value.companyCityName = addressObj.cityName
  formInline.value.companyAreaName = addressObj.areaName
}

function invoiceAddressChange(addressObj: IAddress) {
  formInline.value.invoiceCountry = addressObj.country
  formInline.value.invoiceProvince = addressObj.province
  formInline.value.invoiceCity = addressObj.city
  formInline.value.invoiceArea = addressObj.area
  formInline.value.invoiceAddress = addressObj.address
  formInline.value.invoiceCountryName = addressObj.countryName
  formInline.value.invoiceProvinceName = addressObj.provinceName
  formInline.value.invoiceCityName = addressObj.cityName
  formInline.value.invoiceAreaName = addressObj.areaName
}
// 点击增加行
const addRow = () => {
  // 检查上一行必填项
  if (checkPersonList()) {
    setAllRowReadable()
    traceSupplierPersonList.value.push({ ...addPersonObj })
  }
}
// 检查人员列表
function checkPersonList() {
  for (let index = 0; index < traceSupplierPersonList.value.length; index++) {
    const item = traceSupplierPersonList.value[index]
    for (const prop of columns.value) {
      // 检查必填
      if (prop.required && !item[prop.value]) {
        ElMessage.warning(`请先完善第${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
}

// 删除行
const deleteList = () => {
  traceSupplierPersonList.value = traceSupplierPersonList.value.filter((item: traceSupplierPerson) => {
    return !SelectionList.value.includes(item)
  })
}
// 打印表单
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: '',
})

// 保存至草稿箱
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (formInline.value.supplierNo) {
        sourceDraftUpdate(formInline.value).then((res) => {
          if (res.code === 200) {
            ElMessage.success('已保存')
            isChanged.value = false
          }
        })
      }
      else {
        sourceSave(formInline.value).then((res) => {
          if (res.code === 200) {
            formInline.value.id = res.data.id
            formInline.value.supplierNo = res.data.supplierNo
            ElMessage.success('已保存')
            isChanged.value = false
          }
        })
      }
    }
  })
}

// 提交表单
const submitFunc = () => {
// 再提交
  const params = {
    id: formInline.value.id,
    formId: curFormId, // 表单id
  }
  sourceSubmit(params).then((res) => {
    ElMessage.success('提交成功')
    close()
  })
}

// 点击提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm('确认提交吗？', '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then(() => {
        // 如果id存在, 调用更新接口
        if (formInline.value.id) {
          // 如果表单变更过,先保存，再提交
          if (isChanged.value) {
            sourceDraftUpdate(formInline.value).then((res) => {
              if (res.code === 200) {
                submitFunc()
              }
              else {
                ElMessage.error('保存失败，请重新保存后提交')
              }
            })
          }
          else { // 表单未变更过，直接提交
            submitFunc()
          }
        }
        else {
          // id不存在，调用新建接口
          sourceSave(formInline.value).then((res) => {
            if (res.code === 200) {
              formInline.value.id = res.data.id
              formInline.value.supplierNo = res.data.supplierNo
              submitFunc()
            }
          })
        }
      })
    }
  })
}

const isShow = ref(false)
const testForm = ref({
  fileList: [],
  fileContent: '',
})
const fileRef = ref() // 文件上传input
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])
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        formInline.value.minioFileName = res.data[0]
        // 重置当前验证
        ElMessage.success('文件上传成功')
      }
      else {
        ElMessage.error(res.message)
      }
    })
  }
}
const upload = () => {
  fileRef.value.click()
}
// 双击行显示输入框
const dblclickRow = (row: traceSupplierPerson) => {
  setAllRowReadable()
  row.editable = true
}
// 将所有人员信息列表置为不可编辑状态
function setAllRowReadable() {
  for (const item of traceSupplierPersonList.value) {
    item.editable = false
  }
}
// 非添加页面获取详情
if (pageType.value !== 'add') {
  getInfo()
}
</script>

<template>
  <app-container>
    <detail-page :title="`溯源供方-${textMap[pageType]}`">
      <template #btns>
        <el-button v-if="pageType === 'detail'" v-print="printObj" type="primary">
          打印
        </el-button>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="submitForm(ruleFormRef)">
          提交
        </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 v-if="pageType !== 'detail'" id="form">
        <el-form
          ref="ruleFormRef"
          :model="formInline"
          :label-width="120"
          label-position="right"
          :rules="rules"
        >
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="溯源供方编号:" prop="supplierNo">
                <el-input
                  v-model="formInline.supplierNo"
                  :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="税号:" prop="taxNumber">
                <el-input
                  v-model="formInline.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="formInline.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="formInline.mobile"
                  :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="6">
              <el-form-item label="公司名称:" prop="supplierName">
                <el-input
                  v-model="formInline.supplierName"
                  :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="formInline.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="formInline.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="formInline.mailbox"
                  :placeholder="pageType === 'detail' ? '' : '请输入邮箱'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="公司简称:">
                <el-input
                  v-model="formInline.briefName"
                  :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="formInline.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="formInline.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="formInline.website"
                  :placeholder="pageType === 'detail' ? '' : '请输入网址'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="业务内容:" prop="businessContent">
                <el-input
                  v-model="formInline.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="银行账号:">
                <el-input
                  v-model="formInline.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="formInline.fax"
                  :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="companyAddress" @on-change="companyAddressChange" />
            </el-form-item>
          </el-row>
          <el-row :gutter="5">
            <el-form-item label="开票地址:">
              <address-select :data="invoiceAddress" @on-change="invoiceAddressChange" />
            </el-form-item>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="14">
              <el-form-item label="公司业务范围:">
                <el-input
                  v-model="formInline.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="formInline.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="formInline.minioFileName" :minio-file-name="formInline.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': formInline.minioFileName === '' ? '0px' : '20px' }" @click="upload">
                  {{ formInline.minioFileName === '' ? '上传' : '更换附件' }}
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <base-info-detail v-else :form-data="formInline" />
    </detail-page>
    <detail-block title="人员信息">
      <template v-if="pageType !== 'detail'" #btns>
        <el-button type="info" @click="deleteList">
          删除行
        </el-button>
        <el-button type="primary" @click="addRow">
          增加行
        </el-button>
      </template>
      <el-table
        :data="traceSupplierPersonList"
        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 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="scope.row[item.value]" :autofocus="true" :placeholder="`${item.text}`" class="input" />
          </template>
        </el-table-column>
      </el-table>
    </detail-block>
  </app-container>
</template>

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