""" @author: yy @desc：配置列表 @date: 2025-07-24 01:41:34 """
<template>
  <div class="bigBox">
    <section class="wrapper" ref="queryHeight">
      <section class="query-title">视频监控系统接入配置</section>
      <!-- 主机信息,不可修改 -->
      <el-row class="custom-row">
        <el-col :span="7" class="custom-col">
          <label>责任单位：</label><span>{{ detail?.orgname }}</span>
        </el-col>
        <el-col :span="7" class="custom-col">
          <label>责任部门：</label><span>{{ detail?.responsibilitydeptname }}</span>
        </el-col>
        <el-col :span="7" class="custom-col">
          <label>责任人：</label><span>{{ detail?.responsibilitypersonname }}</span>
        </el-col>
      </el-row>
      <el-row class="custom-row">
        <el-col :span="24" class="custom-col">
          <label>位置信息：</label><span>{{ detail?.address }}</span>
        </el-col>
      </el-row>
      <el-divider />
      <section class="query-title" style="font-size: 16px">接入配置</section>
      <!-- 主机配置 -->
      <section class="query-section">
        <el-form ref="formRef" :inline="true" :model="pageData.form" :rules="rules" class="form-inline">
          <el-row style="width: 100%; display: flex">
            <el-col :span="8" style="padding-left: 0; padding-right: 0">
              <el-form-item label="对接方式：" label-width="92px" prop="djfsdm" style="align-items: center; margin-bottom: 0">
                <MOSTY.DictRidioAndSelectV2 v-model="pageData.form.djfsdm" :dictKey="DICT_TYPE.D_WLJC_DJFS" />
              </el-form-item>
            </el-col>
            <el-col :span="8" style="padding-left: 0; padding-right: 0">
              <el-form-item label="NVR类型:" label-width="92px" prop="nvrlx" style="width: 100%">
                <MOSTY.DictRidioAndSelectV2 v-model="pageData.form.nvrlx" :dictKey="DICT_TYPE.D_WLJC_NVRLX" />
              </el-form-item>
            </el-col>
            <el-col :span="8" style="padding-left: 0; padding-right: 0">
              <el-form-item label="对接厂商:" label-width="82px" prop="djcsid" style="width: 100%">
                <MOSTY.SelectSearch v-model:value="pageData.form.djcsid" remoteMethodApi="/mosty-wljc/djcs/listDropdown" :fieldNames="{ label: 'text', value: 'value' }" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="width: 100%; display: flex">
            <el-col :span="8" style="padding-left: 0; padding-right: 0">
              <el-form-item label="硬盘录像机IP:" label-width="110px" prop="nvrip" style="width: 100%">
                <el-input placeholder="输入硬盘录像机IP" v-model="pageData.form.nvrip" clearable style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="端口:" label-width="82px" prop="nvrdk" style="width: 100%">
                <el-input placeholder="输入端口" v-model="pageData.form.nvrdk" clearable style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="用户名:" label-width="82px" prop="nvruser" style="width: 100%">
                <el-input placeholder="输入用户名" v-model="pageData.form.nvruser" :maxlength="12" show-word-limit clearable style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="width: 100%; display: flex">
            <el-col :span="8">
              <el-form-item label="密码:" label-width="82px" prop="nvrpw" style="align-items: center; margin-bottom: 0; margin-right: 0; width: 100%; margin-top: 10px">
                <el-input placeholder="输入密码" v-model="pageData.form.nvrpw" clearable style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="通道数:" label-width="82px" prop="tds" style="align-items: center; margin-bottom: 0; margin-right: 0; width: 100%; margin-top: 10px">
                <el-input placeholder="输入通道数" v-model="pageData.form.tds" clearable style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="display: flex; justify-content: center; margin-top: 20px">
          <el-button :loading="loading" @click="handleSave">保存</el-button>
        </div>
      </section>
    </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="handleAction({}, '新增', 'add')">
          <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" @click="handleAction(row, '详情', 'view')">
            <el-icon> <View /> </el-icon>详情
          </span>
          <span class="operedit" @click="handleAction(row, '编辑', 'edit')">
            <el-icon> <EditPen /> </el-icon>编辑
          </span>
          <!-- <el-button type="primary" link @click="handleAction(row, '详情', 'view')">详情</el-button> -->
          <!-- <el-button type="primary" link @click="handleAction(row, '编辑', 'edit')">编辑</el-button> -->
          <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="detail.siteid && actionVisible"
      v-model:visible="actionVisible"
      :id="detail.id"
      :edit-id="actionId"
      :action-type="actionType"
      :action-title="actionTitle"
      :place-name="detail?.sitename"
      :placeid="detail?.siteid"
      @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 Action from "./components/action.vue"

import { DICT_TYPE } from "@/components/MyComponents/Dict/const/dict"
import { getApi2, postApi2, deleteApi2 } from "@/api/tobAcco_api.js"
import { tableConfig } from "./models/config"

const route = useRoute()

const formRef = ref(null)
const loading = ref(false)
const actionVisible = ref(false)
const tableHeight = ref("800px")
const detail = ref({})
const tableloading = ref(false)
const actionId = ref("")
const actionTitle = ref("")
const actionType = ref("")
const pageData = reactive({
  form: {
    id: "",
    djfsdm: null, // 对接方式代码 0系统对接 1设备对接
    nvrlx: null, // NVR类型
    nvrlxmc: "", // NVR类型名称
    djcsid: "", // 对接厂商
    djcsmc: "", // 对接厂商名称
    nvrip: "", // 硬盘录像机IP
    nvrdk: null, // 端口
    nvruser: "", // 用户名
    nvrpw: "", // 密码
    tds: "" // 通道数
  },
  tableData: [],
  pageConfiger: {
    pageNum: 1,
    pageSize: 10,
    total: 0
  }
})

const rules = {
  djfsdm: [{ required: true, message: "请选择", trigger: ["change"] }],
  nvrlx: [{ required: true, message: "请选择", trigger: ["change"] }],
  djcsid: [{ required: true, message: "请选择对接厂商", trigger: ["change"] }],
  nvrip: [
    { required: true, message: "请输入目标地址", trigger: ["blur"] },
    { pattern: /^(?:(?:25[0-5]|2[0-4][0-9]|[1][0-9][0-9]?|[1-9]?[0-9])\.){3}(?:25[0-5]|2[0-4][0-9]|[1][0-9][0-9]?|[1-9]?[0-9])$/, message: "请输入正确的IP地址", trigger: "blur" }
  ],
  nvrdk: [
    { required: true, message: "请输入端口", trigger: ["blur"] },
    { pattern: /^[0-9]+$/, message: "请输入数字", trigger: "blur" }
  ],
  nvruser: [{ required: true, message: "请输入用户名", trigger: ["blur"] }],
  nvrpw: [{ required: true, message: "请输入密码", trigger: ["blur"] }],
  tds: [
    { required: true, message: "请输入通道数", trigger: ["blur"] },
    { pattern: /^[0-9]+$/, message: "请输入数字", trigger: "blur" }
  ]
}

// 获取子设备列表
const getList = async () => {
  try {
    const res = await postApi2({ ...pageData.pageConfiger, spjkId: route.query.id }, "/mosty-wljc/spjk/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 getDetail = async () => {
  try {
    const res = await getApi2({ id: route.query.id }, "/mosty-wljc/spjk/detail")
    // console.log("----------", res)
    detail.value = res
    Object.assign(pageData.form, {
      djfsdm: res?.djfsdm, // 对接方式代码 0系统对接 1设备对接
      nvrlx: res?.nvrlx, // NVR类型
      nvrlxmc: res?.nvrlxmc, // NVR类型名称
      djcsid: res?.djcsid, // 对接厂商
      djcsmc: res?.djcsmc, // 对接厂商名称
      nvrip: res?.nvrip, // 硬盘录像机IP
      nvrdk: res?.nvrdk, // 端口
      nvruser: res?.nvruser, // 用户名
      nvrpw: res?.nvrpw, // 密码
      tds: res?.tds, // 通道数
      id: res.id
    })
  } catch (error) {
    console.log("-----===finally=-----", error)
  }
}

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

// 点击 新增 / 编辑 / 详情 按钮
const handleAction = (row, title, type) => {
  actionId.value = row?.id
  actionTitle.value = title
  actionType.value = type
  actionVisible.value = true
}
// 删除
const handleDelete = row => {
  try {
    deleteApi2({ id: row.id }, "/mosty-wljc/spjk/deleteAtta?id=" + row.id)
    ElMessage.success("删除成功")
    handleSuccess()
  } catch (e) {
    console.log(e)
  }
}

const handleSuccess = () => {
  pageData.pageConfiger.pageNum = 1
  getList()
}

getDetail()
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-row {
  margin-top: 10px;
  justify-content: space-between;
  .custom-col {
    display: flex;
    align-items: center;
    // &: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>
