""" @author: yy @desc：配置列表 @date: 2025-07-24 01:41:34 """
<template>
  <div class="bigBox">
    <section class="wrapper" ref="queryHeight">
      <section class="query-title">智慧交通安全预警监管系统接入注册</section>
      <MainForm ref="formRef" :editId="route.query.id" type="edit" />
      <div style="display: flex; justify-content: center; margin-top: 20px">
        <el-button :loading="loading" @click="handleSave">保存</el-button>
      </div>
    </section>
    <!-- table -->
    <section class="wrapper" :style="{ height: tableHeight, marginTop: '10px' }">
      <div class="query-title">车载终端列表</div>
      <section class="button" style="margin-bottom: 10px">
        <el-button
          @click="
            () => {
              editId = ''
              actionVisible = true
            }
          "
        >
          <el-icon> <Plus /> </el-icon>新增
        </el-button>
      </section>
      <MOSTY.Table
        :table-columns="tableConfig"
        :tableData="pageData.tableData"
        :tableloading="tableloading"
        :isSelect="true"
        :isSort="true"
        actionsW="280"
        style="max-height: 500px"
      >
        <template #actions="{ row }">
          <span class="operesee">
            <el-icon> <View /></el-icon>详情
          </span>
          <span class="operedit" @click="handleEdit(row)">
            <el-icon> <EditPen /> </el-icon>编辑
          </span>
          <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?" @confirm="handleDelete(row)">
            <template #reference>
              <span class="operdel" size="small">
                <el-icon>
                  <Delete />
                </el-icon>
                删除
              </span>
            </template>
          </el-popconfirm>
        </template>
      </MOSTY.Table>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="pageData.pageConfiger" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
      </div>
    </section>
    <!-- 新增 / 编辑 -->
    <Action v-if="actionVisible" v-model:visible="actionVisible" :id="localDept.ssdwid" :edit-id="editId" :zhjtId="route.query.id" @success="handleSuccess" />
  </div>
</template>
<script setup>
import { reactive, ref } from "vue"
import { useRoute } from "vue-router"
import { ElMessage } from "element-plus"
import * as MOSTY from "@/components/MyComponents/index"
import MainForm from "./components/mainForm.vue"
import Action from "./components/action.vue"
import { postApi2, deleteApi2 } from "@/api/tobAcco_api.js"
import { tableConfig } from "./models/config"
import cache from "@/plugins/cache"

const route = useRoute()
const localDept = cache.local.getJSON("deptId")

const formRef = ref(null)
const loading = ref(false)
const actionVisible = ref(false)
const tableHeight = ref("800px")
const tableloading = ref(false)
const pageData = reactive({
  form: {
    id: "",
    responsibilitydeptid: "", // 责任单位id
    responsibilitydeptname: "", // 责任单位名称
    responsibilityperson: "", // 责任人id
    responsibilitypersonname: "", // 责任人名称
    djcsid: "", // 对接厂商
    djcsmc: "", // 对接厂商
    djfsdm: null, // 对接方式代码 0系统对接 1设备对接
    xtid: "", // 系统ID
    ycip: "", // IP
    bz: "" // 备注
  },
  tableData: [],
  pageConfiger: {
    pageNum: 1,
    pageSize: 10,
    total: 0
  }
})

const editId = ref("")

// 获取子设备列表
const getList = async () => {
  try {
    const res = await postApi2({ ...pageData.pageConfiger, zhjtxtid: route.query.id }, "/mosty-wljc/zhjtxt/pageAtta")
    pageData.tableData = res.records
    pageData.pageConfiger.total = res.total
  } catch (error) {
    console.log("-----===finally=-----", error)
  }
}

//页码发生变化
const handleCurrentChange = val => {
  pageData.pageConfiger.pageNum = val
  getList()
}
//查询条数发生变化
const handleSizeChange = val => {
  pageData.pageConfiger.pageSize = val
  getList()
}

// 主机配置保存
const handleSave = async () => {
  try {
    loading.value = true
    console.log(formRef.value)
    await formRef.value?.validate()
    await postApi2({ ...formRef.value.getForm() }, "/mosty-wljc/zhjtxt/replace")
    ElMessage.success("保存成功")
    visible.value = false
    emit("success")
  } catch (error) {
    console.log("error", error)
  } finally {
    loading.value = false
  }
}

// 点击编辑
const handleEdit = row => {
  editId.value = row.id
  actionVisible.value = true
}
// 删除
const handleDelete = row => {
  try {
    deleteApi2({}, "/mosty-wljc/zhjtxt/deleteAtta?id=" + row.id)
    ElMessage.success("删除成功")
    handleSuccess()
  } catch (e) {
    console.log(e)
  }
}

// 刷新子设备列表
const handleSuccess = () => {
  pageData.pageConfiger.pageNum = 1
  getList()
}

getList()
</script>
<style lang="scss" scoped>
.wrapper {
  background: #ffffff;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 20px;
  // margin: 10px 0 0 10px;
}
.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;
  }
}

.form-inline {
  display: inline-flex;
  width: 100%;
  flex-wrap: wrap;
}
</style>
