<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>
        <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="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
            :isSelect="false" :isSort="true" @SortChange="SortChange">
            <!-- 用途 -->
            <!-- <template #emuses="{ row }">
                <dict-tag v-if="row.emuses" :options="D_TB_YJWZYT" :value="row.emuses" :tag="false" />
                <span v-else>无</span>
            </template> -->
            <!-- 具体位置 -->
            <template #emstorage="{ row }">
                <span>{{ (row.emstorage || '') }}</span>
            </template>
            <!-- 操作 -->
            <template #actions="{ row }">
                <span class="operedit" @click="editInfo(row)"><el-icon>
                        <Compass />
                    </el-icon>修改</span>
                <span class="operesee" @click="seeInfo(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>
        </MOSTY.Table>
    </section>
    <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="changeNo" @changeSize="changeSize"></MOSTY.Pages>
    </div>
    <!-- 新增 -->
    <div v-if="comprehensiveShow" class="dialog-box">
        <yzjyInfo @changePage="changePage" :editObj="editObj" />
    </div>
</template>
<script setup>
// 引入
import { watch, ref, reactive, getCurrentInstance } from "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";
import yzjyInfo from "../AddOrEdite/index.vue";
const { proxy } = getCurrentInstance()
const { D_TB_YJWZYT } = proxy.$dict("D_TB_YJWZYT")
const props = defineProps({ searchObj: Object })
const emits = defineEmits("changetotal")
const searchArr = reactive([
    {
        showType: "input",
        prop: "emname",
        width: '250px',
        placeholder: "请输入应急物资名称"
    }
]);
const data = reactive({
    searchObj: {},
    tableData: [],
    tableColumn: [
        {
            title: "应急物资",
            prop: "emname",
            width: "110px",
            sortable: true
        },
        // {
        //     title: "规格型号",
        //     prop: "emspeamod",
        //     sortable: true
        // },
        {
            title: "数量",
            prop: "emcount",
            sortable: true
        },
        // {
        //     title: "使用条件",
        //     prop: "conditionsofuse",
        //     sortable: true
        // },
        {
            title: "存放位置",
            prop: "emstorage",
            slot: true,
            sortable: true,
        },
        // {
        //     title: "用途",
        //     prop: "emuses",
        //     sortable: true,
        //     slot: true
        // },
        {
            title: "运输",
            prop: "ys",
            sortable: true
        },
        {
            title: "管理责任人",
            prop: "responsperson",
            sortable: true
        },
        {
            title: "联系电话",
            prop: "responsperphe",
            sortable: true
        },
        {
            title: "维护周期",
            prop: "cycle",
            sortable: true
        },
        {
            title: "责任人职责",
            prop: "duty",
            sortable: true
        },
        {
            title: "操作",
            prop: "actions",
            slot: true
        }
    ],

})
const editObj = ref({})
const comprehensiveShow = ref(false);
const tableloading = ref(false);
const excelLoading = ref(false)
const listQuery = reactive({
    pageCurrent: 1,
    pageSize: 20,
    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;
            getTableData()
        }
    },
    {
        immediate: true,
        deep: true
    }
);
const changeNo = (val) => {
    listQuery.pageCurrent = val;
    getTableData();
};
const changeSize = (val) => {
    listQuery.pageSize = val;
    getTableData();
};
// 查询数据
const onSearch = (obj) => {
    listQuery.emname = obj.emname;
    listQuery.pageCurrent = 1;
    getTableData();
};
//排序
function SortChange(prop, order) {
    listQuery.sortField = prop
    listQuery.sortOrder = order
    getTableData()
}
//导出表格
const export2Excel = () => {
    excelLoading.value = true
    let title = {
        planname: '预案名称',
        emname: '名称',
        emspeamod: '规格型号',
        emcount: '数量',
        conditionsofuse: '使用条件',
        emstorage: '存放位置',
        emuses: '用途',
        ys: '运输',
        responsperson: '管理责任人',
        responsperphe: '联系电话',
        cycle: '维护周期',
        duty: '责任人职责'
    }
    let qyery = { ...listQuery }
    postApi(qyery, '/mosty-jcgl/emergencysupplies/excelData').then((res) => {
        if (res) {
            let data = res
            if (data) {
                for (let i = 0; i < data.length; i++) {
                    data[i].emuses = proxy.$getDictVal(data[i].emuses, D_TB_YJWZYT);
                    data[i].ys = '供应商运输到指定地点'
                    data[i].cycle = '每月一次'
                    data[i].duty = '按维护周期定期开展检查'
                }
                let tablename = `应急物资清单.xlsx`
                exportXlsx(title, data, `应急物资清单`, tablename);
                excelLoading.value = false
            }
            excelLoading.value = false
        }
    })
};
// 查询表格数据
function getTableData() {
    tableloading.value = true
    postApi(listQuery, `/mosty-jcgl/emergencysupplies/queryEmergencysupplies`).then(res => {
        if (res.records) {
            res.records.forEach(item => {
                item.ys = "供应商运输到指定地点";
                item.cycle = "每月一次"
                item.duty = "按维护周期定期开展检查"
            });
            data.tableData = res.records
            tableloading.value = false
            listQuery.total = res.total
        } else {
            data.tableData = []
            tableloading.value = false
        }
    }).finally(() => {
        tableloading.value = false
    })
}
//新增
const addInfo = () => {
    editObj.value = {
        title: "新增应急资源",
        saveBtnShow: true,
        wbjlShow: false,
        jcrzShow: false
    };
    comprehensiveShow.value = true
};
//修改
const editInfo = (row) => {
    editObj.value = {
        title: "编辑应急资源",
        saveBtnShow: true,
        wbjlShow: true,
        jcrzShow: false,
        id: row.id ? row.id : null
    };
    comprehensiveShow.value = true
};
const seeInfo = (row) => {
    editObj.value = {
        title: "查看应急资源",
        saveBtnShow: false,
        wbjlShow: true,
        jcrzShow: false,
        id: row.id ? row.id : null
    };
    comprehensiveShow.value = true
}
function changePage() {
    comprehensiveShow.value = false
    listQuery.pageCurrent = 1;
    getTableData();
    emits("changetotal", true);
}
//删除
const handledelete = (row) => {
    postApi({}, "/mosty-jcgl/emergencysupplies/deleteEmergencysuppliesOne/" + row.id).then(() => {
        ElMessage.success("删除成功");
        getTableData();
        emits("changetotal", true);
    });
};
</script>
<style lang="scss" scoped>
.eltab3 {
    height: calc(100vh - 380px);
}

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