<!-- 委托方名录 基本信息 -->
<script name="ResourceCustomerBasic" lang="ts" setup>
import type { Ref } from 'vue'
import dayjs from 'dayjs'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { mobileValidator, phoneValidator, postalCodeValidator } from './customer-info'
import { getDictByCode } from '@/api/system/dict'
import { UploadFile } from '@/api/file'
import showPhoto from '@/components/showPhoto/index.vue'
import useUserStore from '@/store/modules/user'
import { addCustomer, getCustomerDetail, updateCustomer } from '@/api/resource/customer'
const props = defineProps({
  pageType: { // 页面类型 add新建 edit编辑 detail详情
    type: String,
    require: true,
    default: 'detail',
  },
  id: {
    type: String,
    require: true,
  },
})
const emits = defineEmits(['submitSuccess', 'addSuccess', 'saveSuccess', 'giveEquipmentNo'])
const user = useUserStore() // 用户信息
const $route = useRoute()
const $router = useRouter() // 路由实例
const infoId = ref('') // id
const detailOriginData = ref() as any
const deptList = ref([]) as any
const form = ref({ // 基本信息表单
  id: '',
  customerNo: '', //	委托方编号
  customerName: '', //	委托方名称
  contacts: '', //	联系人
  mobile: '', // 座机电话
  phone: '', // 手机电话
  postalCode: '', //	邮编
  address: '', //	地址
  remark: '', //	备注
  file: '', //	文件(minio存储文件名)
  zsdw: '', // 证书单位
  zsdz: '', // 证书地址
  fileList: [] as any,
  createTime: '', // 创建时间
  createUserId: '', // 创建用户id
  createUserName: '', // 创建用户名
})
const rules = reactive({ // 表单验证规则
  customerName: [{ required: true, message: '委托方名称不能为空', trigger: ['blur', 'change'] }],
  // postalCode: [{ required: true, message: '邮政编码不能为空', trigger: ['blur', 'change'] }],
  mobile: [{ required: true, message: '座机电话不能为空', trigger: 'blur' }, { validator: mobileValidator, trigger: 'blur' }],
  phone: [{ message: '请输入符合规范的手机号码', trigger: 'blur', validator: phoneValidator }],
  postalCode: [{ message: '邮政编码为6位数字', trigger: 'blur', validator: postalCodeValidator }],
  contacts: [{ required: true, message: '联系人不能为空', trigger: ['blur', 'change'] }],
  address: [{ required: true, message: '通信地址不能为空', trigger: ['blur', 'change'] }],
  zsdw: [{ required: true, message: '证书单位不能为空', trigger: ['blur', 'change'] }],
  zsdz: [{ required: true, message: '证书地址不能为空', trigger: ['blur', 'change'] }],
})
// -------------------------------------------文件上传--------------------------------------
const fileRef = ref() // 文件上传input
/**
 * 删除附件
 * @param index 索引
 */
const delFile = (index: number) => {
  form.value.fileList.splice(index, 1)
}

const onFileChange = (event: any) => {
  // 原生上传
  const files = event.target.files // 上传的文件列表
  if (event.target.files[0].type !== 'application/pdf') {
    ElMessage.warning('请上传pdf文件')
    return false
  }
  if (files.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    for (var i = 0; i < files.length; i++) {
      fd.append('multipartFile', files[i])
    }
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        // form.value.fileList = res.data[0]
        form.value.fileList.push(res.data[0])
        ElMessage.success('文件上传成功')
        event.target.value = null
        loading.close()
      }
      else {
        loading.close()
        ElMessage.error(res.message)
      }
    })
  }
}
const upload = () => {
  fileRef.value.click()
}
// ----------------------------------------------- 保存---------------------------------------
const ruleFormRef = ref() // 基本信息表单ref
/**
 * 点击保存
 * @param ruleFormRef 基本信息表单ref
 */
function saveForm() {
  ruleFormRef.value.validate((valid: boolean) => {
    if (valid) { // 基本信息表单通过校验
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then(() => {
        const params = {
          ...form.value,
          id: form.value.id || infoId.value,
          file: form.value.fileList.join(','),
        }
        detailOriginData.value = params
        const loading = ElLoading.service({
          lock: true,
          text: '加载中...',
          background: 'rgba(255, 255, 255, 0.6)',
        })
        if (props.pageType === 'add') { // 新建
          addCustomer(params).then((res) => {
            loading.close()
            form.value.customerNo = res.data.customerNo // 设备编号
            infoId.value = res.data.id // id
            emits('addSuccess', form.value.customerNo, infoId.value)
            ElMessage.success('已保存')
          }).catch(() => {
            loading.close()
          })
        }
        else if (props.pageType === 'edit') { // 编辑
          updateCustomer(params).then((res) => {
            loading.close()
            ElMessage.success('已保存')
            emits('saveSuccess')
          }).catch(() => {
            loading.close()
          })
        }
      })
    }
  })
}

// -------------------------------------------获取详情信息----------------------------------------

/**
 * 获取详情
 */
function fetchInfo() {
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })

  getCustomerDetail({ id: infoId.value }).then((res) => {
    form.value = res.data
    form.value.fileList = res.data.file.split(',') // 附件
    // checkHasChanged()
    loading.close()
  }).catch(() => {
    loading.close()
  })
}
// ---------------------------------------------钩子----------------------------------------------
watch(() => props.id, (newValue) => {
  infoId.value = newValue!
}, { immediate: true })

onMounted(async () => {
  form.value.createUserId = user.id// 创建人id
  form.value.createUserName = user.name // 创建人
  form.value.createTime = dayjs().format('YYYY-MM-DD HH-mm:ss')// 申请时间
  if (props.pageType !== 'add') {
    fetchInfo() // 获取详情信息
  }
})

defineExpose({ saveForm, fetchInfo })
</script>

<template>
  <div class="equipment-book-basic">
    <detail-block title="">
      <el-form
        ref="ruleFormRef"
        :model="form"
        :label-width="120"
        label-position="right"
        :rules="rules"
      >
        <el-row :gutter="24" class="marg">
          <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" class="marg">
          <el-col :span="6">
            <el-form-item label="委托方代码">
              <el-input v-model="form.customerNo" disabled :placeholder="pageType === 'detail' ? '' : '系统自动生成'" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="委托方名称" prop="customerName">
              <el-input v-model="form.customerName" :placeholder="pageType === 'detail' ? '' : '请输入委托方名称'" :disabled="pageType === 'detail'" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系人" prop="contacts">
              <el-input v-model="form.contacts" :placeholder="pageType === 'detail' ? '' : '请输入联系人'" :disabled="pageType === 'detail'" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="座机电话" prop="mobile">
              <el-input v-model="form.mobile" :placeholder="pageType === 'detail' ? '' : '请输入座机电话'" :disabled="pageType === 'detail'" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="form.phone" :placeholder="pageType === 'detail' ? '' : '请输入手机号码'" :disabled="pageType === 'detail'" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邮政编码" prop="postalCode">
              <el-input v-model="form.postalCode" :placeholder="pageType === 'detail' ? '' : '请输入邮政编码'" :disabled="pageType === 'detail'" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="通信地址" prop="address">
              <el-input v-model="form.address" :placeholder="pageType === 'detail' ? '' : '请输入通信地址'" :disabled="pageType === 'detail'" type="textarea" autosize />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="证书单位" prop="zsdw">
              <el-input v-model="form.zsdw" :placeholder="pageType === 'detail' ? '' : '请输入证书单位'" :disabled="pageType === 'detail'" type="textarea" autosize />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证书地址" prop="zsdz">
              <el-input v-model="form.zsdz" :placeholder="pageType === 'detail' ? '' : '请输入证书地址'" :disabled="pageType === 'detail'" type="textarea" autosize />
            </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' }"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <el-form-item label="附件:">
              <!-- <show-photo :minio-file-name="form.fileList" width="100%" height="125px" />
            <el-button v-if="pageType !== 'detail'" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': form.fileList === '' ? '0px' : '20px' }" @click="upload">
              {{ form.fileList === '' ? '上传' : '更换附件' }}
            </el-button>
            <input v-show="pageType === ''" ref="fileRef" type="file" name="upload" multiple @change="onFileChange"> -->
              <el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-right': '20px' }" @click="upload">
                {{ !form.fileList.length ? '上传' : '上传' }}
              </el-button>
              <div v-for="(item, index) in form.fileList" :key="index" style="display: flex;">
                <show-photo :minio-file-name="item">
                  <span v-if="pageType !== 'detail' && item" class="photo-close" @click="delFile(index)">×</span>
                </show-photo>
              </div>
              <span v-if="pageType === 'detail' && !form.fileList.length">无</span>
              <input v-show="pageType === ''" ref="fileRef" type="file" name="upload" multiple @change="onFileChange">
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block>
  </div>
</template>

<style lang="scss" scoped>
::v-deep .changedLabel .el-form-item__label {
  color: #f56c6c;
}

.link {
  text-decoration: underline;
  color: #3d7eff;
  cursor: pointer;
}

.file-area {
  // display: flex;
  // align-items: center;
  font-size: 14px;
  color: #60627f;
  margin-bottom: 10px;
  margin-left: 40px;
  width: 100%;
  flex-wrap: wrap;

  .tech-file {
    display: flex;
    align-items: center;
    // margin-left: 20px;
    flex-wrap: wrap;
    white-space: nowrap;

    .file-text {
      margin-right: 10px;
    }
  }
}
</style>

<style lang="scss">
.equipment-book-basic {
  .el-radio__label {
    display: block !important;
  }
}
</style>