""" @author: yy @desc：测试接口 @date: 2025-08-06 22:39:49 """
<template>
  <div class="bigBox">
    <div class="tabox">
      <label class="title">测试对接数据接口</label>
      <div style="margin: 20px 0">
        <el-select v-model="mode" placeholder="请选择对接方式" clearable @change="handleTypeChange">
          <el-option v-for="item in modeType" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <el-divider />
      <label class="name">接入字段</label>
      <div style="margin-top: 20px">
        <el-form :model="form" :inline="false" ref="formRef" label-width="120px">
          <el-row :gutter="20" style="width: 100%">
            <el-col :span="item.type === 'file' ? 24 : 12" v-for="item in formOptions" :key="item.prop">
              <el-form-item :label="item.label" :prop="item.prop" style="width: 100%">
                <el-input v-if="item.type === 'input'" v-model="form[item.prop]" placeholder="请输入" clearable />
                <el-date-picker v-if="item.type === 'date'" v-model="form[item.prop]" type="datetime" value-format="x"
                  placeholder="选择日期" clearable />
                <MOSTY.Upload v-if="item.type === 'file'" :width="'100%'" :limit="5" :nopicer="true"
                  placeholder="请上传设备资料（pdf,ofd,doc,docx,xls,xlsx,wps）" :isImg="false" ShowfileList
                  v-model="form[item.prop]" :nameshow="true"
                  :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" @filehandleChange="handleFileChange">
                </MOSTY.Upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="btn-container">
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue"
import { ElMessageBox } from "element-plus"
import * as MOSTY from "@/components/MyComponents/index"
import { modeType, modeTypeForm, API } from "./models/index"
import { getApi2, postApi2 } from "@/api/tobAcco_api.js"

const formOptions = ref([])

const mode = ref(null)
const form = ref({})
const requestType = ref("post")

const handleTypeChange = val => {
  console.log(val)
  formOptions.value = modeTypeForm[val]
  requestType.value = API[val].method
  form.value = {}
  formOptions.value
    .map(t => t.prop)
    .forEach(t => {
      form[t] = ""
    })
}

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

const handleSubmit = async () => {
  try {
    console.log("【测试接口提交】++++", form.value)
    const res = await (requestType.value === "post" ? postApi2 : getApi2)(form.value, API[mode.value].submit)
    console.log("【测试接口返回】++++", res, mode.value)
    if (mode.value === "cs") {
      const msg = res ? "厂商信息已注册" : "请联系系统管理人员注册"
      ElMessageBox.alert(msg, "提示", {
        confirmButtonText: "确定",
        type: "info"
      })
    }
  } catch (e) {
    console.log(e)
    console.log("【测试接口返回错误】++++", e)
  }
}
</script>
<style lang="scss" scoped>
.bigBox {
  background-color: #fff;
}
.title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.tabox {
  background-color: #fff;
  width: 800px;
  padding: 20px;
}

.name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.btn-container {
  margin-top: 20px;
  text-align: center;
}
</style>
