""" @author: yy @desc： 厂商 新增 / 编辑 / 详情 @date: 2025-07-21 21:47:17 """
<template>
  <MOSTY.Modal v-if="visible" v-model:visible="visible" v-model:loading="loading" :title="title" width="80%" footer
    @ok="handleClick">
    <el-form :model="form" :rules="rules" label-width="auto" ref="formRef">
      <div style="width: 100%">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="厂商名称" prop="csmc">
              <el-input v-model="form.csmc" placeholder="请输入厂商名称" :maxlength="50" :disabled="mode === 'view'" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="技术联系人" prop="jslxr">
              <el-input v-model="form.jslxr" placeholder="请输入技术联系人" :disabled="mode === 'view'" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话" prop="jslxrdh">
              <el-input v-model="form.jslxrdh" placeholder="请输入联系电话" :disabled="mode === 'view'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="备注" prop="bz">
              <el-input v-model="form.bz" placeholder="请输入备注" :disabled="mode === 'view'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="申请附件" prop="sqfjid">
              <MOSTY.Upload :width="'100%'" :limit="1" :nopicer="true"
                placeholder="请上传设备资料（pdf,ofd,doc,docx,xls,xlsx,wps）" :isImg="false" :disabled="mode === 'view'"
                ShowfileList v-model="form.sqfjid" :nameshow="true"
                :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" @filehandleChange="handleFileChange">
              </MOSTY.Upload>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </MOSTY.Modal>
</template>
<script setup>
import { reactive, ref, watch } from "vue"
import { ElMessage } from "element-plus"
import * as MOSTY from "@/components/MyComponents/index"
import { getApi2, postApi, postApi2 } from "@/api/tobAcco_api.js"

const emits = defineEmits(["success"])
const props = defineProps({
  id: {
    type: String,
    default: ""
  },
  title: {
    type: String,
    default: ""
  },
  mode: {
    type: String,
    default: "action"
  }
})

const visible = defineModel("visible", {
  type: Boolean,
  default: false
})

const formRef = ref(null)
const loading = ref(false)
const form = reactive({
  id: props.id,
  csmc: "", // 厂商名称
  jslxr: "", // 技术联系人
  jslxrdh: "", // 联系电话
  bz: "", // 备注
  sqfj: "", //申请附件名称
  sqfjid: "" //申请附件id
})
const rules = {
  csmc: [{ required: true, message: "请输入厂商名称", trigger: "blur" }],
  jslxr: [{ required: true, message: "请输入技术联系人", trigger: "blur" }],
  jslxrdh: [{ required: true, message: "请输入联系电话", trigger: "blur" }]
}

const handleFileChange = fileList => {
  console.log("=======file 变化=====", fileList)
  form.sqfj = fileList[0].name
}

const handleClick = async () => {
  try {
    loading.value = true
    console.log("【厂商form提交】++++", form)
    await formRef.value.validate()
    await postApi2({ ...form, sqfjid: form.sqfjid[0], sqfj: form.sqfjid.length ? form.sqfj : "" }, "/mosty-wljc/djcs/replace")
    ElMessage.success("提交成功")
    emits("success")
    visible.value = false
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
  }
}

const getDetail = async () => {
  try {
    const res = await getApi2({ id: props.id }, "/mosty-wljc/djcs/detail")
    Object.assign(form, {
      id: res.id,
      csmc: res.csmc,
      jslxr: res.jslxr,
      jslxrdh: res.jslxrdh,
      bz: res.bz,
      sqfj: res.sqfj,
      sqfjid: res.sqfjid
    })
  } catch (e) {
    console.log(e)
  }
}
watch(
  () => props.id,
  () => {
    if (visible.value) {
      if (props.id) {
        getDetail()
      } else {
        Object.assign(form, {
          id: props.id,
          csmc: "", // 厂商名称
          jslxr: "", // 技术联系人
          jslxrdh: "", // 联系电话
          bz: "", // 备注
          sqfj: "", //申请附件名称
          sqfjid: "" //申请附件id
        })
      }
    }
  },
  { immediate: true }
)
</script>
<style lang="scss" scoped></style>
