<template>
  <div>
    <!-- 查询 -->
    <div class='tabox'>
      <div class="headBox3">
        <el-button type="primary" @click="add">
          <el-icon>
            <Plus />
          </el-icon>
          <span>新增</span>
        </el-button>
      </div>
      <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="pageData.tableData" :tableloading="tableloading"
        :tableHeight="'40vh'" :isSort="true">
        <template #point="{ row }">
          <span v-if="row.point">{{ row.point }}</span>
          <span v-else>--</span>
        </template>
        <template #actions="{ row }">
          <span class="operedit" @click="setPoint(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>
        <template #fenye>
          <div class="fenye" :style="{ top: tableHeight + 'px' }">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="pageData.listQuery.pageCurrent" background :page-sizes="[2, 5, 8]"
              :page-size="pageData.listQuery.pageSize" layout="total,  prev, pager, next, sizes, jumper"
              :total="total"></el-pagination>
          </div>
        </template>
      </MOSTY.Table>
    </div>
    <div>
      <SpList v-model="showSpList" @chooseSpList="chooseSpList" :orgcode="props.obj.orgcode"></SpList>
    </div>
    <div v-if="setPointShow" class="dialog-box">
      <Video @saveSuccess="changePage" :sbbh="sbbh" :tddh="tddh" />
    </div>
  </div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import SpList from "./spList.vue";
import Video from "./video.vue";
import { reactive, ref, watchEffect } from "vue"
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
const emits = defineEmits(["handleChange", 'tableChange']);
const tableloading = ref(false);
const total = ref(0)
const showSpList = ref(false)
const setPointShow = ref(false)
const sbbh = ref(null)
const tddh = ref(null)
const formData = ref(null)
const props = defineProps({
  obj: {
    default: null,
    type: Object
  }
});
const pageData = reactive({
  listQuery: {
    pageCurrent: 1,
    pageSize: 5
  },
  tableColumns: [
    {
      title: "场所/部位",
      prop: "sitename"
    },
    {
      title: "设备名称",
      prop: "name"
    },
    {
      title: "设备编号",
      prop: "sbbh"
    },
    {
      title: "预制点",
      prop: "point",
      slot: true
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  tableData: []
})
watchEffect(() => {
  if (props.obj.id) {
    pageData.listQuery.sbid = props.obj.id
    // 获取子表
    getzblist()
  }
});
//关闭
const changePage = async (data) => {
  setPointShow.value = false
  if (data) {
    formData.value.point = JSON.stringify({
      id: data.id, presetPointCode: data.presetPointCode, presetPointName: data.presetPointName
    })
    postApi(formData.value, '/mosty-lps/pzTd/saveTd').then(res => {
      ElMessage.success("预制点配置成功")
      pageData.listQuery.pageCurrent = 1;
      getzblist()
    })
  }
}
// 获取选中通道
const chooseSpList = (row) => {
  let data = {}
  data.type = '01'
  data.sbid = props.obj.id
  data.zbid = row.id
  postApi(data, '/mosty-lps/pzTd/saveTd').then(res => {
    ElMessage.success("添加成功")
    pageData.listQuery.pageCurrent = 1;
    getzblist()
  })
}
// 获取子表
function getzblist() {
  tableloading.value = true
  getApi(pageData.listQuery, '/mosty-lps/pzTd/getPageList').then(res => {
    pageData.tableData = res.records || [];
    total.value = res.total
    tableloading.value = false
  }).finally(() => {
    tableloading.value = false
  })
}
// 新增
function add() {
  showSpList.value = true
}
// 查询预制点
function setPoint(row) {
  formData.value = row
  getApi({}, `/mosty-jcgl/sbglAqsbss/queryTbSbglAqsbssById?id=${row.sbid}`).then(res => {
    if (res) {
      sbbh.value = res.sbbh
      tddh.value = row.sbbh
      setPointShow.value = true
    }
  })

}
// 删除
function handledelete(row) {
  postApi({}, `/mosty-lps/pzTd/delTd/${row.id}`).then(res => {
    ElMessage.success("删除成功");
    pageData.listQuery.pageCurrent = 1;
    getzblist()
  })
}
// 页码发生变化
const handleCurrentChange = (val) => {
  pageData.listQuery.pageCurrent = val;
  getzblist()
};
// 查询条数发生变化
const handleSizeChange = (val) => {
  pageData.listQuery.pageCurrent = 1;
  pageData.listQuery.pageSize = val;
  getzblist()
};
</script>

<style lang="scss" scoped>
.headBox3 {
  display: flex;
  justify-content: end;
  width: 100%;
  margin-bottom: 10px;
}

.top_ul {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;

  >li {
    width: 15%;
    height: 83px;
    margin: 6px 32px;
  }
}
</style>
