<template>
  <MOSTY.PageTree pageTitle="预警设备管理" @getDeptId="getdeptData" :isShowOrgTree="isShowLeftTree">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      <el-divider />
      <div class="btnBox">
        <el-button @click="addInfo">
          <el-icon size="small">
            <Plus />
          </el-icon>
          新增
        </el-button>
      </div>
    </template>
    <template #table>
      <section class="eltab9">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
          :isSort="true" actionsW="300">
          <template #sbzt="{ row }">
            <dict-tag v-if="row.sbzt" :options="D_BZ_DLSBZT" :value="row.sbzt" :tag="false"
              :color="row.sbzt == '01' ? 'green' : 'orange'" />
            <span v-else>无</span>
          </template>
          <template #ipaddr="{ row }">
            <span v-if="row.ipaddr && row.port">{{ row.ipaddr + ":" + row.port }}</span>
            <span v-else>--</span>
          </template>
          <template #sblx="{ row }">
            <dict-tag v-if="row.sblx" :options="D_BZ_YJSBLX" :value="row.sblx" :tag="false" />
            <span v-else>无</span>
          </template>
          <template #actions="{ row }">
            <span class="operesee" @click="videoControl(row)" v-if="row.sblx == '06'">
              <el-icon>
                <Compass />
              </el-icon>视频操作</span>
            <span class="operesee" @click="showInfo(row)">
              <el-icon>
                <Compass />
              </el-icon>查看</span>
            <span class="operedit" @click="editInfo(row)">
              <el-icon>
                <EditPen />
              </el-icon>修改</span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="delInfo(row)">
              <template #reference>
                <span class="operdel" size="small"><el-icon>
                    <Delete />
                  </el-icon>
                  删除</span>
              </template>
            </el-popconfirm>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="changeNo" @changeSize="changeSize"></MOSTY.Pages>
      </div>
    </template>
  </MOSTY.PageTree>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index"
import { getApi, postApi } from "@/api/tobAcco_api.js"
import { ElMessage } from "element-plus"
import { reactive, ref, getCurrentInstance, onMounted } from "vue"
const { proxy } = getCurrentInstance()
const { D_BZ_DLSBZT, D_BZ_YJSBLX } = proxy.$dict("D_BZ_DLSBZT", "D_BZ_YJSBLX")
const emit = defineEmits("changePage")
const tableloading = ref(false)
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 10,
  total: 0
})
const searchArr = reactive([
  {
    showType: "input",
    prop: "keywords",
    width: '250px',
    placeholder: '请输入设备名称或编号查询'
  },
  {
    showType: "select",
    prop: "sblx",
    options: D_BZ_YJSBLX,
    width: "250px",
    placeholder: "请选择设备类型"
  },
  {
    showType: "select",
    prop: "sbzt",
    options: D_BZ_DLSBZT,
    width: "250px",
    placeholder: "请选择设备状态"
  },
])
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "所属单位",
      prop: "orgname"
    },
    {
      title: "所属部门",
      prop: "deptname"
    },
    {
      title: "设备类型",
      prop: "sblx",
      slot: true
    },
    {
      title: "设备名称",
      prop: "sbmc"
    },
    {
      title: "设备编号",
      prop: "sbbh"
    },
    {
      title: "设备状态",
      prop: "sbzt",
      slot: true
    },
    {
      title: "物联IP端口",
      prop: "ipaddr",
      slot: true
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ]
})
onMounted(() => {
  // videoControl();
});
// 开启视频操作
const videoControl = row => {
  console.log(row)
  let arr = {
    title: "视频",
    sbbh: row.sbbh,
    saveBtnShow: false,
    type: "showVideo",
    id: (row && row.parentid) ? row.parentid : '5200316847792de043a5b2a9dbede8698677'
  }
  emit("changePage", "VideoPlay", arr)
}
// 切换组织机构
const getdeptData = val => {
  listQuery.deptId = val.id;
  listQuery.pageCurrent = 1;
  getTableData();
}
//分页
const changeNo = val => {
  listQuery.pageCurrent = val
  getTableData()
}
const changeSize = val => {
  listQuery.pageSize = val
  getTableData()
}
// 查询数据
const onSearch = obj => {
  listQuery.pageCurrent = 1;
  listQuery.keywords = obj.keywords;
  listQuery.sbzt = obj.sbzt;
  listQuery.sblx = obj.sblx;
  getTableData()
}
// 查询表格数据
function getTableData() {
  tableloading.value = true
  getApi(listQuery, `/mosty-lps/yjsbInfo/getPageList`).then(res => {
    if (res.records) {
      data.tableData = res.records
      tableloading.value = false
      listQuery.total = res.total
    } else {
      data.tableData = []
      tableloading.value = false
    }
  }).finally(() => {
    tableloading.value = false
  })
}
//新增预警设备
const addInfo = () => {
  let arr = {
    title: "新增预警设备",
    saveBtnShow: true,
    type: "add"
  }
  emit("changePage", "AddOrEdite", arr)
}
//修改预警设备
const editInfo = row => {
  let arr = {
    title: "修改预警设备",
    saveBtnShow: true,
    type: "edit",
    id: row.id ? row.id : null
  }
  emit("changePage", "AddOrEdite", arr)
}
//查看
const showInfo = row => {
  let arr = {
    title: "查看预警设备",
    saveBtnShow: false,
    id: row.id ? row.id : null
  }
  emit("changePage", "AddOrEdite", arr)
}

//删除
const delInfo = row => {
  postApi({}, "/mosty-lps/yjsbInfo/del/" + row.id).then(res => {
    ElMessage.success("删除成功")
    getTableData()
  })
}

</script>

<style lang="scss" scoped>
.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}
</style>
