<template>
  <div>
    <!-- 查询 -->
    <div class='tabox'>
      <div class="headBox3">
        <el-input placeholder="请输入内部编号进行查询" v-model="pageData.listQuery.nbbh" clearable style='width:250px'></el-input>
        <el-button type="primary" @click="Searchdata" class="ml6">
          <el-icon>
            <Search />
          </el-icon>
          <span>查询</span>
        </el-button>
        <el-button type="primary" @click="addUserHander" v-if='props.isEdit'>
          <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" @SortChange="SortChange">
        <template #actions="{ row, $index }">
          <span class="operedit" @click="handlexg(row, $index)" v-if='props.isEdit'>
            <el-icon>
              <EditPen />
            </el-icon>修改</span>
          <el-popconfirm v-if='props.isEdit' confirm-button-text="是" cancel-button-text="否" icon-color="red"
            title="确定要删除?" @confirm="handledelete(row, $index)">
            <template #reference>
              <span class="operdel" size="small">
                <el-icon>
                  <Delete />
                </el-icon>
                删除</span>
            </template>
          </el-popconfirm>
          <span class="operesee" @click="handleSee(row)">
            <el-icon>
              <Compass />
            </el-icon>查看</span>
        </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, 10, 20]"
              :page-size="pageData.listQuery.pageSize" layout="total,  prev, pager, next, sizes, jumper"
              :total="total"></el-pagination>
          </div>
        </template>
      </MOSTY.Table>
    </div>
  </div>
  <!-- 灭火器 -->
  <div v-if="addbpdShow" class="dialog-box">
    <Addfljcd :formData="formData" @saveSuccess="changePage" />
  </div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import Addfljcd from "@/components/dialog/Addfljcd.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 addbpdShow = ref(false)
const total = ref(0)
const editIndex = ref(null)
const props = defineProps({
  obj: {
    default: null,
    type: Object
  },
  //是否显示统计数据
  showCount: {
    type: Boolean,
    default: true
  },
  //是否可以修改
  isEdit: {
    type: Boolean,
    default: true
  }
});
const formData = ref({})
const pageData = reactive({
  listQuery: {
    pageCurrent: 1,
    pageSize: 5
  },
  tableColumns: [
    {
      title: "检测点名称",
      prop: "name",
      sortable: true
    },
    {
      title: "内部编号",
      prop: "nbbh",
      sortable: true
    },
    {
      title: "具体位置",
      prop: "location",
      sortable: true
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }

  ],
  tableData: []
})
watchEffect(() => {
  if (props.obj.id) {
    pageData.listQuery.zbid = props.obj.id
    //获取子表
    getzblist()
  }
});
//获取子表
function getzblist() {
  getApi(pageData.listQuery, '/mosty-jcgl/aqsbssAtta/getPageList').then(res => {
    pageData.tableData = res.records || [];
    total.value = res.total
  })
}
//排序
function SortChange(prop, order) {
  pageData.listQuery.sortField = prop
  pageData.listQuery.sortOrder = order
  getzblist()
}
//新增
function addUserHander() {
  editIndex.value = null;
  formData.value = props.obj ? props.obj : null
  formData.value.title = '防雷检测点新增';
  formData.value.saveBtnShow = true;
  addbpdShow.value = true
  tableloading.value = false
}
//修改
function handlexg(row, index) {
  editIndex.value = index;
  formData.value = row;
  formData.value.sitename = props.obj.sitename
  formData.value.buildingname = props.obj.buildingname 
  formData.value.publicarea = props.obj.publicarea 
  formData.value.floorname = props.obj.floorname
  formData.value.partname = props.obj.partname
  formData.value.title = '防雷检测点修改';
  formData.value.saveBtnShow = true;
  addbpdShow.value = true
}
//查看
function handleSee(row) {
  formData.value = row;
  formData.value.sitename = props.obj.sitename
  formData.value.buildingname = props.obj.buildingname 
  formData.value.publicarea = props.obj.publicarea 
  formData.value.floorname = props.obj.floorname
  formData.value.partname = props.obj.partname
  formData.value.title = '防雷检测点详情';
  formData.value.saveBtnShow = false;
  addbpdShow.value = true
}
//删除
function handledelete(row) {
  postApi({}, `/mosty-jcgl/aqsbssAtta/del/${row.id}`).then(res => {
    ElMessage.success("删除成功");
    emits("searchChange", true);
    getzblist()
    emits("tableChange", pageData.tableData);
  })
}
//关闭
const changePage = async (val, obj) => {
  formData.value = {}
  addbpdShow.value = false
  getzblist()
  emits("tableChange", pageData.tableData);
}
//查询
function Searchdata() {
  getzblist()
}
//页码发生变化
const handleCurrentChange = (val) => {
  pageData.listQuery.pageCurrent = val;
  getzblist()
};
//查询条数发生变化
const handleSizeChange = (val) => {
  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>
