""" @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.name }}</span>
        </el-col>
        <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.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">
          <div style="width: 100%; margin-bottom: 10px">
            <el-form-item label="对接方式：" label-width="82px" style="align-items: center; margin-bottom: 0" :show-message="false">
              <MOSTY.DictRidioAndSelectV2 v-model="pageData.form.djfsdm" :dictKey="DICT_TYPE.D_WLJC_DJFS" />
            </el-form-item>
          </div>
          <el-row style="width: 100%; display: flex; justify-content: space-between">
            <el-col :span="7" 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-col :span="7">
              <el-form-item label="源地址:" label-width="82px" style="width: 100%" :show-message="false">
                <el-input placeholder="输入源地址" v-model="pageData.form.ydz" disabled clearable style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="目标地址:" label-width="82px" style="width: 100%" prop="mbdz">
                <el-input placeholder="输入目标地址" v-model="pageData.form.mbdz" :maxlength="12" show-word-limit clearable style="width: 100%"></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="pageData.form.ydz" clearable style="width: 100%" maxlength="200" show-word-limit></el-input>
          </el-form-item>
        </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="
            () => {
              editId = ''
              actionVisible = true
            }
          "
        >
          <el-icon> <Plus /> </el-icon>新增
        </el-button>
        <!-- <el-button @click="videoVisible = true"> 联动视频 </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="handleEditVideo(row)">
            <el-icon><VideoPlay /></el-icon>
            <label>联动视频</label>
          </span>
          <span class="operedit" @click="handleEdit(row)">
            <el-icon> <EditPen /> </el-icon>编辑
          </span>
          <!-- <el-button type="primary" link @click="handleEditVideo(row)">联动视频</el-button> -->
          <!-- <el-button type="primary" link @click="handleEdit(row)">编辑</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="editId"
      :place-name="detail?.sitename"
      :placeid="detail?.siteid"
      @success="handleSuccess"
    />
    <!-- 联动视频配置列表 -->
    <VideoList
      v-if="detail.siteid"
      v-model:visible="videoVisible"
      :confId="detail.id"
      :subset-id="subsetId"
      :place-name="detail?.sitename"
      :placeid="detail?.siteid"
      :methodApiObj="apiObj"
    />
  </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 VideoList from "../components/VideoLinkage/videoList.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 apiObj = {
  linkVideo: "/mosty-wljc/sbglXfbj/listLinkageSubsetVideo",
  saveVideo: "/mosty-wljc/sbglXfbj/saveSubsetVideo",
  listVideo: "/mosty-wljc/sbglXfbj/listSubsetVideo"
}

const route = useRoute()

const formRef = ref(null)
const loading = ref(false)
const actionVisible = ref(false)
const videoVisible = ref(false)
const tableHeight = ref("800px")
const detail = ref({})
const tableloading = ref(false)
const pageData = reactive({
  form: {
    id: "",
    djcsid: "", // 对接厂商
    djcsmc: "", // 对接厂商
    djfsdm: null, // 对接方式代码 0系统对接 1设备对接
    mbdz: "", // 目标地址
    bz: "", // 备注
    ydz: "" // 源地址
  },
  tableData: [],
  pageConfiger: {
    pageNum: 1,
    pageSize: 10,
    total: 0
  }
})
const rules = {
  djcsid: [{ required: true, message: "请选择对接厂商", trigger: ["change"] }],
  mbdz: [
    { required: true, message: "请输入目标地址", trigger: ["blur"] },
    { pattern: /^\d{12}$/, message: "请输入12位数字", trigger: "blur" }
  ]
}

// 子设备ID，联动视频用
const subsetId = ref("")
const editId = ref("")

// 获取子设备列表
const getList = async () => {
  try {
    const res = await getApi2({ ...pageData.pageConfiger, sssbwlpzbid: route.query.id }, "/mosty-wljc/sbglXfbj/pageAtta")
    // console.log("----------", res)
    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/sbglXfbj/detail")
    // console.log("----------", res)
    detail.value = res
    Object.assign(pageData.form, {
      djcsid: res?.djcsid,
      djcsmc: res?.djcsmc,
      djfsdm: res?.djfsdm,
      mbdz: res?.mbdz,
      bz: res?.bz,
      ydz: res?.ydz,
      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/sbglXfbj/replace")
    ElMessage.success("保存成功")
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}

// 点击联动视频
const handleEditVideo = row => {
  subsetId.value = row.id
  videoVisible.value = true
}
// 点击编辑
const handleEdit = row => {
  editId.value = row.id
  actionVisible.value = true
}
// 删除
const handleDelete = row => {
  try {
    deleteApi2({ id: row.id }, "/mosty-wljc/sbglXfbj/deleteAtta")
    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>
