<template>
  <div class="bigBox">
    <MOSTY.FromPage :title="data.config.title" @closeDialog="black">
      <template #content>
        <div class="fromBoxs">
          <el-form ref="ruleFormRef" :disabled="!data.config.saveBtnShow" :model="data.fromObj" :rules="rules"
            label-width="150px" class="demo-ruleForm" status-icon :inline="true">
            <el-form-item label="设备名称：" prop="sbmc">
              <el-input v-model="data.fromObj.sbmc" placeholder="请输入设备名称" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="国标编号：" prop="sbbh">
              <el-input v-model="data.fromObj.sbbh" type="number" placeholder="请输入国标编号" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="IP地址：" prop="hosts">
              <el-input v-model="data.fromObj.hosts" placeholder="请输入IP地址" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="端口号：" prop="port">
              <el-input v-model="data.fromObj.port" type="number" placeholder="请输入端口号" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="设备状态：" prop="sbzt">
              <el-select v-model="data.fromObj.sbzt" placeholder="请选择设备状态" clearable style="width: 220px">
                <el-option v-for="item in D_BZ_DLSBZT" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注：">
              <el-input v-model="data.fromObj.bz" type="textarea" sutosize show-word-limit maxlength="200"
                style="width: 1002px" />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="submit(ruleFormRef)" v-if="data.config.saveBtnShow">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          保存</el-button>
        <el-button @click="black">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          关闭
        </el-button>
      </template>
    </MOSTY.FromPage>
  </div>
</template>

<script setup>
import { reactive, ref, watchEffect, getCurrentInstance, onMounted } from "vue"
import * as MOSTY from "@/components/MyComponents/index"
import { ElMessage } from "element-plus"
import { getApi, postApi } from "@/api/tobAcco_api.js"
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue"
import PageTitle from "@/components/PageTitle/PageTitle.vue"
import MyTable from "@/components/aboutTable/MyTable/index.vue"
const { proxy } = getCurrentInstance()
const { D_BZ_DLSBZT } = proxy.$dict("D_BZ_DLSBZT")
const ruleFormRef = ref()
const props = defineProps({
  saveBtnShow: {
    type: Boolean,
    default: true
  },
  editObj: {
    type: Object,
    default: () => { }
  }
})
const rules = reactive({
  sbmc: [{ required: true, message: "请输入设备名称" }],
  sbbh: [{ required: true, message: "请输入设备编号" }],
  sbzt: [{ required: true, message: "请选择设备状态" }],
  hosts: [{ required: true, message: "请输入IP地址" }],
  port: [{ required: true, message: "请输入端口号" }]
})
const data = reactive({
  fromObj: {},
  config: {
    title: "",
    saveBtnShow: true,
    type: ""
  }
})
//修改的时候附件的保存位置
const emit = defineEmits("changePage")
onMounted(() => {
  if (props.editObj) {
    data.config = props.editObj
  }
  // 获取详情
  getMain(props.editObj.id)
})
// 保存
const submit = async ruleFormRef => {
  if (!ruleFormRef) return
  await ruleFormRef.validate(valid => {
    if (valid) {
      if (data.fromObj) {
        if (!data.fromObj.id) {
          postApi(data.fromObj, "/mosty-lps/bkqInfo/add")
            .then(() => {
              ElMessage.success("新增成功")
              emit("changePage", "Main")
            })
        } else {
          postApi(data.fromObj, "/mosty-lps/bkqInfo/edit").then(() => {
            ElMessage.success("修改成功")
            emit("changePage", "Main")
          })
        }
      }
    } else {
      ElMessage.error("请检查输入内容")
    }
  })
}
// 获取详情
function getMain(id) {
  if (id) {
    getApi({ id: id }, "/mosty-lps/bkqInfo/getInfo").then(res => {
      if (res) {
        data.fromObj = res
      }
    })
  }
}
// 返回主页
const black = () => {
  if (data.config.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emit("changePage", "Main")
      })
  } else {
    emit("changePage", "Main")
  }
}
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

.Box {
  height: calc(100vh - 23vh);
  overflow-y: scroll;
}

.fromBoxs {
  width: 1200px;
  margin: 20px auto;
}

.ld_box {
  display: flex;
  margin-right: 30px;
}

.el-form {
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}

.el-form-item {
  display: flex;
  margin-right: 20px;
}

.addbtn {
  margin-bottom: 10px;
}

.bigBox {
  display: block !important;
  padding: 0 14px;
  box-sizing: border-box;
}

.tabbox {
  max-height: 300px;
  overflow-y: scroll;

  .input {
    width: 100%;
    height: 100%;
  }
}

::v-deep .el-table .cell {
  padding: 0 0 !important;
}

::v-deep .el-table--border .el-table__cell .cell {
  padding-left: 0px !important;

  >input {
    width: 100%;
    height: 33px;
  }
}

::v-deep .el-upload-list {
  width: 50%;
}

::v-deep .el-collapse {
  width: 100% !important;
}
</style>
