<template>
    <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>
    <section class="eltab3">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
            :isSort="true" @SortChange="SortChange" style="width: 100%;">
            <template #partname="{ row }">
                <span>{{ row.sitename }}->{{ row.buildingname }}{{ row.floorname ? '->' + row.floorname : '' }}->{{
                    row.partname }}</span>
            </template>
            <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 #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="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="pageConfiger" @changeNo="handleCurrentChange" @changeSize="handleSizeChange">
        </MOSTY.Pages>
    </div>
    <!-- 新增 -->
    <div v-if="comprehensiveShow" class="dialog-box">
        <AddOrEdite :formData="formData" @saveSuccess="saveSuccess" />
    </div>
</template>
<script setup>
import { onMounted, ref, reactive, watch, getCurrentInstance } from "vue";
import { getItem } from "@/utils/storage"
import AddOrEdite from "../AddOrEdite/index.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js"
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
const props = defineProps({ searchObj: Object })
const { proxy } = getCurrentInstance()
const { D_BZ_DLSBZT, D_BZ_YJSBLX } = proxy.$dict("D_BZ_DLSBZT", "D_BZ_YJSBLX")
const comprehensiveShow = ref(false);
const tableloading = ref(false);
const formData = ref({
    title: ""
});
const tableData = ref([]);
// 分页
const listQuery = reactive({
    pageCurrent: 1,
    pageSize: 10
});
//查询条件
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 tableColumn = ref([
    {
        title: "场所部位",
        prop: "partname",
        slot: true,
    },
    {
        title: "设备类型",
        prop: "sblx",
        slot: true
    },
    {
        title: "设备名称",
        prop: "sbmc"
    },
    {
        title: "设备编号",
        prop: "sbbh"
    },
    {
        title: "设备状态",
        prop: "sbzt",
        slot: true
    },
    {
        title: "操作",
        prop: "actions",
        slot: true
    }
])
const pageConfiger = reactive({
    pageSize: 10,
    pageCurrent: 1,
    total: 0
})
//获取部门数据
watch(
    () => props.searchObj,
    (val) => {
        if (props.searchObj.deptId || props.searchObj.siteid) {
            listQuery.deptId = props.searchObj.deptId
            listQuery.siteid = props.searchObj.siteid
            listQuery.pageCurrent = 1;
            pageConfiger.pageCurrent = 1;
            getListData()
        }
    },
    {
        immediate: true,
        deep: true
    }
);
//排序
function SortChange(prop, order) {
    listQuery.sortField = prop
    listQuery.sortOrder = order
    getListData()
}
function onSearch(obj) {
    listQuery.pageCurrent = 1;
    pageConfiger.pageCurrent = 1;
    listQuery.keywords = obj.keywords;
    listQuery.sbzt = obj.sbzt;
    listQuery.sblx = obj.sblx;
    getListData()
}
// 	应急资源中查询微型消防站列表
function getListData() {
    tableloading.value = true;
    getApi(listQuery, `/mosty-lps/yjsbInfo/getPageList`).then((res) => {
        if (res.records) {
            tableloading.value = false;
            tableData.value = res.records;
            pageConfiger.total = res.total;
        } else {
            tableData.value = [];
        }
    }).finally(() => {
        tableloading.value = false;
    })
}
// 新增
function addInfo() {
    formData.value = {};
    formData.value.title = "新增";
    formData.value.saveBtnShow = true
    comprehensiveShow.value = true;
}
// 查看
function showInfo(row) {
    getApi({ id: row.id }, "/mosty-lps/yjsbInfo/getInfo").then((res) => {
        if (res) {
            formData.value = { ...res };
            formData.value.title = "查看详情";
            formData.value.saveBtnShow = false
            comprehensiveShow.value = true;
        }
    });
}
// 编辑
function editInfo(row) {
    getApi({ id: row.id }, "/mosty-lps/yjsbInfo/getInfo").then((res) => {
        if (res) {
            formData.value = { ...res };
            formData.value.saveBtnShow = true
            formData.value.title = "编辑";
            comprehensiveShow.value = true;
        }
    });
}
//删除
const delInfo = row => {
    postApi({}, "/mosty-lps/yjsbInfo/del/" + row.id).then(res => {
        ElMessage.success("删除成功")
        getListData()
    })
}
//关闭
function saveSuccess(params) {
    comprehensiveShow.value = false;
    getListData()
}
//分页
const handleSizeChange = (currentSize) => {
    listQuery.pageSize = currentSize;
    pageConfiger.pageSize = currentSize;
    getListData();
};
const handleCurrentChange = (currentPage) => {
    listQuery.pageCurrent = currentPage;
    pageConfiger.pageCurrent = currentPage;
    getListData();
};
</script>
<style lang="scss" scoped>
.eltab3 {
    height: calc(100vh - 380px);
}

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