<template>
    <el-divider />
    <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
    <el-divider />
    <div class="btnBox">
        <el-button type="primary" @click="export2Excel" v-loading="excelLoading">
            <el-icon>
                <Download />
            </el-icon>
            <span>导出</span>
        </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 }">
                {{ row.qtmc || row.partname }}
            </template>
            <template #actions="{ row }">
                <span class="operesee" @click="editInfo('see', row)">
                    <el-icon>
                        <View />
                    </el-icon>查看</span>
            </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">
        <positionDialog :formData="formData" @saveSuccess="saveSuccess" :type="'wxxfz'" />
    </div>
</template>
<script setup>
// 引入
import { onMounted, ref, reactive, watch } from "vue";
import { getItem } from "@/utils/storage"
import positionDialog from "@/components/dialog/positionindex.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js"
import { exportXlsx } from "@/excel/Export2Excel.js"
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
const props = defineProps({ searchObj: Object })
const comprehensiveShow = ref(false);
const tableloading = ref(false);
const exportLoading = ref(false)
const formData = ref({
    title: ""
});
const tableData = ref([]);
// 分页
const listQuery = reactive({
    type: '2',
    pageCurrent: 1,
    pageSize: 20
});
//查询条件
const searchArr = reactive([
    {
        showType: "input",
        prop: "partname",
        width: '250px',
        placeholder: '请输入消防站名称进行查询'
    }
]);
const tableColumn = ref([
    {
        title: "所属单位",
        prop: "orgname",
        sortable: true
    },
    {
        title: "所属部门",
        prop: "deptname",
        sortable: true
    },
    {
        title: "消防站名称",
        prop: "partname",
        slot: true,
        sortable: true
    },
    {
        title: "责任人",
        prop: "postusername",
        sortable: true
    },
    {
        title: "操作",
        prop: "actions",
        slot: true
    }
])
const pageConfiger = reactive({
    pageSize: 20,
    pageCurrent: 1,
    total: 0
})
//获取部门数据
watch(
    () => props.searchObj,
    (val) => {
        if (props.searchObj.orgcode || props.searchObj.siteid) {
            listQuery.orgcode = props.searchObj.orgcode
            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.partname = obj.partname;
    getListData()
}


//导出表格
const export2Excel = () => {
    exportLoading.value = true
    let title = {
        orgname: "所属单位",
        deptname: "所属部门",
        partname: "消防站名称",
        postusername: "责任人姓名",
    };
    let obj = {
        pageSize: 10000,
        pageCurrent: 1,
        partname: listQuery.partname,
        orgcode: listQuery.orgcode,
        siteid: listQuery.siteid,
    }
    getApi(obj, "/mosty-jcgl/part/getWxxfzPage").then(
        (res) => {
            if (res.records) {
                let data = res.records;
                if (data) {
                    let tablename = "微型消防站列表.xlsx";
                    exportXlsx(title, data, '微型消防站列表', tablename);
                    exportLoading.value = false
                }
            }
        }
    ).finally(() => {
        exportLoading.value = false
    });
};
// 	应急资源中查询微型消防站列表
function getListData() {
    tableloading.value = true;
    getApi(listQuery, `/mosty-jcgl/part/getWxxfzPage`).then(
        (res) => {
            if (res.records) {
                tableloading.value = false;
                tableData.value = res.records;
                pageConfiger.total = res.total;
            } else {
                tableData.value = [];

            }
        }
    ).finally(() => {
        tableloading.value = false;
    })
}


//修改
function editInfo(type, row) {
    getApi({ id: row.id }, "/mosty-jcgl/part/queryScenePartById").then((res) => {
        if (res) {
            formData.value = res;
            formData.value.type = 'wxxfz';
            if (res.sfcq == '1') {
                formData.value.publicarea = '1'
            }
            formData.value.title = "微型消防站详情";
            formData.value.saveBtnShow = false
            comprehensiveShow.value = true;
        }
    });
}
//关闭
function saveSuccess(params) {
    comprehensiveShow.value = false;

}

//分页
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>