<template>
    <el-divider />
    <MOSTY.Search :searchArr="searchArr" @submit="onSearch" >
      <template #searbox>
        <span style="color: red;display: inline-block;line-height: 32px;">仅包含“微型消防站”下的灭火器</span>
      </template>
    </MOSTY.Search>
    <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 #sblx="{ row }">
                <dict-tag v-if="row.sblx" :options="D_TB_JCYWLX" :value="row.sblx" :tag="false" />
                <span v-else>无</span>
            </template>
            <template #nbbh="{ row }">
                <span>{{ row.nbbh ? row.nbbh : '暂无' }}</span>
            </template>
            <template #specification="{ row }">
                <span v-if="row.sblx == '200201010100' || row.sblx == '200201010200'">{{ row.specification }}KG</span>
                <span v-else>{{ row.specification }}L</span>
            </template>
            <template #scopes="{ row }">
                <span v-if="row.sblx == '200201010100' || row.sblx == '200201010200'">适用于A类、B类、C类火灾类型</span>
                <span v-else>适用于A类、B类、C类、E类火灾类型</span>
            </template>
            <template #actions="{ row }">
                <span class="operesee" @click="handleSee(row)">
                    <el-icon>
                        <Compass />
                    </el-icon>查看</span>
            </template>
        </MOSTY.Table>
    </section>
    <div class="fenye">
        <MOSTY.Pages :pageConfiger="pageConfiger" @changeNo="handleCurrentChange" @changeSize="handleSizeChange">
        </MOSTY.Pages>
    </div>
    <!-- 灭火器 -->
    <div v-if="addbpdShow" class="dialog-box">
        <Addaqqcmhq :formData="formData" @changePage="changePage" />
    </div>
</template>
<script setup>
// 引入
import { getCurrentInstance, ref, reactive, watch } from "vue";
import Addaqqcmhq from "@/components/dialog/Addaqqcmhq.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js"
import { exportXlsx } from "@/excel/Export2Excel.js"
import * as MOSTY from "@/components/MyComponents/index";
const { proxy } = getCurrentInstance();
const { D_TB_JCYWLX } = proxy.$dict("D_TB_JCYWLX");
const props = defineProps({ searchObj: Object })
const addbpdShow = ref(false)
const exportLoading = ref(false)
const tableloading = ref(false)
const formData = ref({
    title: ""
});
const tableData = ref([]);
// 分页
const listQuery = reactive({
    type: '2',
    pageCurrent: 1,
    pageSize: 20
});
//查询条件
const searchArr = reactive([
    {
        showType: "input",
        prop: "keywords",
        width: '250px',
        placeholder: '请输入内部编号进行查询'
    }
]);
const tableColumn = ref([
    {
        title: "灭火器类型",
        prop: "sblx",
        slot: true,
        sortable: true
    },
    {
        title: "灭火器名称",
        prop: "name",
        sortable: true
    },
    {
        title: "型号",
        prop: "type",
        sortable: true
    },
    {
        title: "内部编号",
        prop: "nbbh",
        sortable: true
    },
    {
        title: "规格(KG/L)",
        prop: "specification",
        slot: true,
        sortable: true
    },
    {
        title: "生产日期",
        prop: "time",
        sortable: true
    },
    {
        title: "生产厂家",
        prop: "manufacturer",
        sortable: true
    },
    {
        title: "适用范围",
        prop: "scopes",
        slot: true,
        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 onSearch(obj) {
    listQuery.pageCurrent = 1;
    pageConfiger.pageCurrent = 1;
    listQuery.keywords = obj.keywords;
    getListData()
}
//排序
function SortChange(prop, order) {
    listQuery.sortField = prop
    listQuery.sortOrder = order
    getListData()
}

//导出表格
const export2Excel = () => {
    exportLoading.value = true
    let title = {
        sblxname: "灭火器类型",
        name: "灭火器名称",
        type: "型号",
        nbbh: "内部编号",
        specification: "规格(KG/L)",
        time: "生产日期",
        manufacturer: "生产厂家",
        scopes: "适用范围",
    };
    let obj = {
        pageSize: 10000,
        pageCurrent: 1,
        keywords: listQuery.keywords,
        orgcode: listQuery.orgcode,
        siteid: listQuery.siteid,
    }
    getApi(obj, "/mosty-jcgl/xf/getMhqByWxxfz").then(
        (res) => {
            if (res.records) {
                let data = res.records;
                if (data) {
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].sblx == '200201010100' || data[i].sblx == '200201010200') {
                            data[i].specification = data[i].specification + 'KG'
                            data[i].scopes = '适用于A类、B类、C类火灾类型'
                        } else {
                            data[i].specification = data[i].specification + 'L'
                            data[i].scopes = '适用于A类、B类、C类、E类火灾类型'
                        }
                        data[i].sblxname = proxy.$getDictVal(data[i].sblx, D_TB_JCYWLX);

                    }
                    let tablename = "灭火器列表.xlsx";
                    exportXlsx(title, data, '灭火器列表', tablename);
                    exportLoading.value = false
                }
            }
        }
    ).finally(() => {
        exportLoading.value = false
    });
};
function getListData() {
    tableloading.value = true;
    getApi(listQuery, `/mosty-jcgl/xf/getMhqByWxxfz`).then(
        (res) => {
            if (res.records) {
                tableloading.value = false;
                tableData.value = res.records;
                pageConfiger.total = res.total;
            } else {
                tableData.value = [];

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

//查看
function handleSee(row) {
    formData.value = row;
    formData.value.title = '灭火器详情';
    formData.value.saveBtnShow = false;
    addbpdShow.value = true
}
function changePage() {
    addbpdShow.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>
