<template>
  <div>
    <el-form ref="formRef" :model="form" :rules="rules" class="form-inline">
      <el-row style="width: 100%; display: flex; justify-content: space-between">
        <el-col :span="7" class="custom-col">
          <el-form-item label="系统名称:" label-width="82px" prop="name">
            <el-input v-model="form.name" clearable :maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="7" class="custom-col">
          <el-form-item label="责任单位:" label-width="82px">
            <el-input v-model="form.responsibilitydeptname" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="7" class="custom-col">
          <el-form-item label="责任人:" label-width="82px" prop="responsibilitypersonname">
            <el-input v-model="form.responsibilitypersonname" placeholder="请选择" readonly clearable>
              <template #append>
                <el-button @click="inputClick('01')">选择</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider />
      <section class="query-title" style="display: block; width: 100%; font-size: 16px">接入配置</section>
      <!-- 主机配置 -->
      <section class="query-section" style="width: 100%">
        <div style="width: 100%; margin-bottom: 10px">
          <el-form-item label="对接方式:" label-width="82px" prop="djfsdm">
            <MOSTY.DictRidioAndSelectV2 v-model="form.djfsdm" :dictKey="DICT_TYPE.D_WLJC_DJFS" />
          </el-form-item>
        </div>
        <el-row style="width: 100%; display: flex; justify-content: flex-start">
          <el-col :span="7" style="padding-left: 0; padding-right: 0">
            <el-form-item label="对接厂商:" label-width="82px" prop="djcsid">
              <MOSTY.SelectSearch v-model:value="form.djcsid" remoteMethodApi="/mosty-wljc/djcs/listDropdown" :fieldNames="{ label: 'text', value: 'value' }" />
            </el-form-item>
          </el-col>
          <el-col :span="7" v-if="type !== 'add'">
            <el-form-item label="系统ID:" label-width="82px">
              <el-input placeholder="输入系统ID" v-model="form.xtid" disabled clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="系统IP地址:" label-width="100px" prop="ycip">
              <el-input placeholder="输入系统IP地址" v-model="form.ycip" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注：" label-width="82px" style="align-items: center; margin-bottom: 0; margin-right: 0; width: 100%; margin-top: 10px">
          <el-input placeholder="输入备注" v-model="form.bz" clearable maxlength="200" show-word-limit></el-input>
        </el-form-item>
      </section>
    </el-form>
    <!-- 选择人员弹窗 -->
    <ChooseUser
      v-model="chooseUserVisible"
      Single
      :deptId="form.responsibilitydeptid"
      :data="memberList"
      :zzlx="zzlx"
      :leaderid="leaderid"
      :key="keys"
      @choosedUsers="getSonValue"
    ></ChooseUser>
  </div>
</template>

<script setup>
import { ref, watch } from "vue"
import * as MOSTY from "@/components/MyComponents/index"
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue"
import { DICT_TYPE } from "@/components/MyComponents/Dict/const/dict"
import cache from "@/plugins/cache"
import { getApi2 } from "@/api/tobAcco_api.js"

const props = defineProps({
  editId: {
    type: String,
    default: ""
  },
  type: {
    type: String,
    default: "add"
  }
})

const dept = cache.local.getJSON("deptId")
const formRef = ref(null)
const form = ref({
  id: "",
  name: "", // 系统名称
  responsibilitydeptname: dept.ssdwmc, // 责任部门名称
  responsibilitydeptid: dept.ssdwid, // 责任部门ID
  responsibilityperson: "", // 责任人
  responsibilitypersonname: "", // 责任人名称
  djfsdm: "", // 对接方式
  djcsid: "", // 对接厂商
  xtid: "", // 系统ID
  ycip: "", // 系统IP地址
  bz: ""
})
const chooseUserVisible = ref(false)
const keys = ref(0)
const zzlx = ref("")
const leaderid = ref("")
const memberList = ref([]) //成员选择的id回显

const rules = ref({
  name: [{ required: true, message: "请输入系统名称", trigger: ["blur"] }],
  responsibilitypersonname: [{ required: true, message: "请选择责任人", trigger: ["change"] }],
  djfsdm: [{ required: true, message: "请选择对接方式", trigger: ["change"] }],
  djcsid: [{ required: true, message: "请选择对接厂商", trigger: ["change"] }],
  ycip: [{ required: true, message: "请输入系统IP地址", trigger: ["blur"] }]
})

// 选择人员
function inputClick(val) {
  zzlx.value = val
  leaderid.value = null
  if (val == "01") {
    leaderid.value = form.value.responsibilityperson ? form.value.responsibilityperson : null
    chooseUserVisible.value = true
  }
}
//人员回显
const getSonValue = value => {
  if (zzlx.value == "01") {
    form.value.responsibilitypersonname = value[0].userName
    form.value.responsibilityperson = value[0].id
  }
}

// 编辑时，获取详情
const getDetail = async () => {
  try {
    const res = await getApi2({ id: props.editId }, "/mosty-wljc/zhjtxt/detail")
    form.value = {
      ...form.value,
      id: res.id,
      name: res.name,
      responsibilitydeptname: res.responsibilitydeptname,
      responsibilitydeptid: res.responsibilitydeptid,
      responsibilityperson: res.responsibilityperson,
      responsibilitypersonname: res.responsibilitypersonname,
      djfsdm: res.djfsdm + "",
      djcsid: res.djcsid,
      xtid: res.xtid,
      ycip: res.ycip,
      bz: res.bz
    }
  } catch (error) {
    console.log("error", error)
  }
}

watch(
  () => props.editId,
  val => {
    val && getDetail()
  },
  { immediate: true }
)
const validate = async () => {
  await formRef.value?.validate()
}

const getForm = () => {
  return form.value
}

defineExpose({
  validate,
  getForm
})
</script>
<style lang="scss" scoped>
.form-inline {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.query-title {
  font-weight: 400;
  font-size: 20px;
  color: #000000;
  margin-bottom: 20px;
}

.custom-col {
  display: flex;
  align-items: center;
  color: #333333 !important;
  // &:not(:first-child) {
  //   margin-left: 50px;
  // }
  label {
    width: 70px;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }
  span {
    flex: 1;
    height: 32px;
    line-height: 32px;
    background: #e9e9e9;
    border-radius: 4px;
    border: 1px solid #c8cfdc;
    font-weight: 400;
    font-size: 14px;
    color: #777575;
    box-sizing: border-box;
    padding: 0 20px;
    overflow: hidden;
  }
}
</style>
