""" @author: yy @desc： 消防控制主入口@date: 2025-07-21 21:47:17 """
<template>
  <div class="bigBox">
    <div class="tabox">
      <!-- 查询 -->
      <section class="query-flex" ref="queryHeight">
        <section class="query-section">
          <el-form :inline="true" :model="pageData.listQuery" class="form-inline">
            <el-form-item label="所属单位：" :show-message="false" style="margin-bottom: 0">
              <el-input v-model="pageData.listQuery.responsibilitydeptname" clearable readonly style="width: 337px">
                <template #append>
                  <el-button class="cursor" @click="ChooesDdld">选择</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="所属场所：" :show-message="false" style="margin-bottom: 0">
              <el-select v-model="pageData.listQuery.siteid" clearable style="width: 337px" placeholder="请选择">
                <el-option v-for="item in csmclist" :key="item" :label="item.placename" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="对接方式：" style="align-items: center; margin-bottom: 0" :show-message="false">
              <MOSTY.DictRidioAndSelectV2 v-model="pageData.listQuery.djfsdm" :dictKey="DICT_TYPE.D_WLJC_DJFS" />
            </el-form-item>
            <el-form-item label="设备状态：" style="align-items: center; margin-bottom: 0" :show-message="false">
              <MOSTY.DictRidioAndSelectV2 v-model="pageData.listQuery.status" :dictKey="DICT_TYPE.D_WLJC_XTZT" />
            </el-form-item>
          </el-form>
        </section>
        <div class="query-btn">
          <el-button @click="handleSearch" class="ml6">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
          <el-button @click="handleRest">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </div>
      </section>
      <!-- 统计 -->
      <section class="view">
        <div class="item" v-for="(item, index) in viewConfig" :key="index">
          <div class="left">
            <div class="icon" :style="{ backgroundColor: item.background }">
              <SvgIcon :icon="item.leftIcon"></SvgIcon>
            </div>
            <div class="content">
              <label>{{ item.label }}</label>
              <span :style="{ color: item.color }">{{ statsData[item.value] }}</span>
            </div>
          </div>
          <SvgIcon class="right" :icon="item.rightIcon"></SvgIcon>
        </div>
      </section>
      <!-- table -->
      <section class="custom-container" :style="{ maxHeight: totalHeight }">
        <div class="title">消防控制主机接入配置列表</div>
        <MOSTY.Table
          :table-columns="tableConfig"
          :tableData="pageData.tableData"
          :tableloading="tableloading"
          :isSelect="true"
          :isSort="true"
          actionsW="280"
          :style="{ height: tableHeight }"
        >
          <template #actions="{ row }">
            <span class="operesee" @click="handleMaskData('view', '详情', row)">
              <el-icon> <View /> </el-icon>详情
            </span>
            <span class="operedit" @click="handleMaskData('edit', '配置', row)">
              <el-icon> <EditPen /> </el-icon>配置
            </span>
            <!-- <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?" @confirm="handleClick(row, 'sc')">
              <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>
    </div>
    <!-- 选择单位 -->
    <Dwhasbj v-if="showdwDept" :showDdld="showdwDept" zzlx="02" :searchType="'03'" Isstrictly @closezzjg="closezzjg" @listdata="getSonValue" />
  </div>
</template>
<script setup>
import { onMounted, reactive, ref, nextTick } from "vue"
import { useRouter } from "vue-router"
import * as MOSTY from "@/components/MyComponents/index"
import { DICT_TYPE } from "@/components/MyComponents/Dict/const/dict.js"
// import InputDept from "@/components/inputCom/InputDept.vue"
import Dwhasbj from "@/components/MyComponents/ChooseDept/dwhasbj.vue"
// import { getItem } from "@/utils/storage"
import { postApi, postApi2 } from "@/api/tobAcco_api.js"
import { tableConfig, viewConfig } from "./models/list"

const router = useRouter()

const pageData = reactive({
  listQuery: {
    orgcode: "", // 所属单位
    siteid: "", // 场所ID
    status: "", // 状态 (01在线、02离线、03部分子设备故障、99未对接)
    djfsdm: "", // 对接方式代码 0系统对接 1设备对接
    responsibilitydeptname: ""
  },
  tableData: [],
  pageConfiger: {
    total: 0,
    pageSize: 10,
    pageNum: 1
  }
})
const tableloading = ref(false)
// const deptInputDept = ref(getItem("deptId").ssdwid)
const csmclist = ref([]) // 场所下拉框数据
const totalHeight = ref(null)
const queryHeight = ref(null)
const tableHeight = ref(null)
const statsData = ref({})
// 选择单位使用字段
const showdwDept = ref(false)

const handleMaskData = (type, title, row) => {
  if (type === "edit") {
    router.push({ path: "/integrationCenter/xfHome/config", query: { id: row.id, orgcode: row.orgcode } })
  }
}

// 获取列表数据
const queryData = async () => {
  try {
    tableloading.value = true
    const res = await postApi2({ ...pageData.listQuery, ...pageData.pageConfiger }, "/mosty-wljc/sbglXfbj/list")
    // console.log("================", res)
    // pageData.tableData = res
    pageData.tableData = res.records
    pageData.pageConfiger.total = res.total
  } catch (e) {
    console.log(e)
  } finally {
    tableloading.value = false
  }
}

//页码发生变化
const handleCurrentChange = val => {
  pageData.pageConfiger.pageNum = val
  queryData()
}

//查询条数发生变化
const handleSizeChange = val => {
  pageData.pageConfiger.pageSize = val
  queryData()
}

//根据单位ID 查询 场所
function getcsData() {
  postApi({ pageCurrent: 1, pageSize: 9999999, orgid: pageData.listQuery.orgcode }, "/mosty-jcgl/site/querySceneList").then(res => {
    if (res.records) {
      csmclist.value = res.records
    }
  })
}

// 根据单位查询场所
const deptChange = () => {
  getcsData()
}

//点击所属单位打开弹窗
function ChooesDdld() {
  showdwDept.value = true
}
//关闭所属单位弹窗
const closezzjg = () => {
  showdwDept.value = false
}
// 获取选中的单位数据，并请求场所数据
const getSonValue = value => {
  pageData.listQuery.responsibilitydeptname = value.orgName
  pageData.listQuery.orgcode = value.id
  pageData.listQuery.siteid = null
  if (value.id) {
    deptChange()
  } else {
    csmclist.value = []
  }
}

// 统计
const getStatsCount = async () => {
  try {
    const ret = await postApi2({ ...pageData.listQuery, ...pageData.pageConfiger }, "/mosty-wljc/sbglXfbj/stats")
    // console.log("---", ret)
    statsData.value = ret
  } catch (e) {
    console.log(e)
  }
}

// 重置
const handleRest = () => {
  pageData.listQuery = {
    orgcode: "", // 所属单位
    siteid: "", // 场所ID
    status: "", // 状态 (01在线、02离线、03部分子设备故障、99未对接)
    djfsdm: "", // 对接方式代码 0系统对接 1设备对接
    responsibilitydeptname: ""
  }
  handleSearch()
}

// 查询
const handleSearch = () => {
  pageData.pageConfiger.pageNum = 1
  pageData.tableData = []
  queryData()
  getStatsCount()
}

onMounted(() => {
  handleSearch()
  nextTick(() => {
    totalHeight.value = `calc(100vh - ${270 + queryHeight.value.offsetHeight}px)`
    tableHeight.value = `calc(${totalHeight.value} - ${190}px)`
  })
})
</script>
<style lang="scss" scoped>
.query-flex {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 8px;

  .query-section {
    flex: 1;

    .form-inline {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
  }

  .query-btn {
    width: 250px;
    display: flex;
    justify-content: flex-end;

    .toggle {
      height: 32px;
      cursor: pointer;
      display: flex;
      align-items: center;
      color: #0f3916;

      .el-icon {
        transform: rotate(90deg);
        transition: all 0.25s ease;
      }

      &.active {
        .el-icon {
          transform: rotate(-90deg);
        }
      }
    }
  }
}
.view {
  width: 100%;
  border-radius: 8px;
  margin-top: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  .item {
    border-radius: 8px;
    width: 20%;
    height: 98px;
    background: #ffffff;
    border-radius: 8px 8px 8px 8px;
    background-size: cover;
    display: flex;
    justify-content: space-between;
    &:not(:last-child) {
      margin-right: 10px;
    }
    .left {
      flex: 1;
      display: flex;
      align-items: center;
      .icon {
        width: 40px;
        height: 40px;
        background: rgba(39, 121, 247, 0.2);
        border-radius: 8px;
        margin-left: 20px;
        line-height: 40px;
        text-align: center;
      }
      .content {
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        label {
          font-weight: 400;
          font-size: 14px;
          color: #999999;
        }
        span {
          font-weight: 500;
          font-size: 20px;
          color: #333333;
          margin-top: 6px;
        }
      }
    }
    .right {
      width: 92px;
      height: 92px;
      align-self: flex-end;
    }
  }
}

.custom-container {
  width: 100%;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  margin-top: 10px;
  background-color: #fff;

  .title {
    font-weight: 400;
    font-size: 20px;
    color: #000000;
    padding-bottom: 20px;
  }
}
</style>
