<template>
    <el-dialog :title="props.title" width="95%" v-model="dialoglsjl" @close="onClose">
        <el-table border :data="dataTable" style="width: 100%; margin-bottom: 10px" v-loading="tableLoading"
            :header-cell-style="{ background: '#F6F6F6' }" height="50vh">
            <el-table-column v-for="(item, index) in tableColumn" :prop="item.prop" :label="item.label" :key="index" />
            <el-table-column label="操作" width="170" fixed="right">
                <template #default='{ row }'>
                    <el-link type="primary" @click='seetable(row)'>详情 </el-link>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
    <DialogTablegyqp :title="dialogTitle" @close="dialogVisibles = false" :sbcs="currCs" :orgObj="orgObj"
        :params="props.params" v-if="dialogVisibles" />
</template>

<script setup>
import { onMounted, ref, reactive, getCurrentInstance } from "vue";
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import DialogTablegyqp from '../DialogTablegyqp.vue';
import { getItem } from "@/utils/storage";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const orgObj = ref({});
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    params: {
        type: Object,
        default: () => { }
    },
    orgObj: Object,
});
const emits = defineEmits(["close"]);
const dialoglsjl = ref(true);
const dialogVisibles = ref(false);
const dialogTitle = ref('')
const currId = ref(null);
const currCs = ref(null)
const tableColumn = ref([
    { label: "上报次数", prop: "sbcs" },
    { label: '企业名称', prop: 'orgname' },
    { label: "工业气瓶总数", prop: "count" },
    { label: "氧气瓶数量", prop: "count1" },
    { label: "乙炔瓶数量", prop: "count2" },
    { label: "氢气瓶数量", prop: "count3" },
    { label: "一氧化碳气瓶数量", prop: "count4" },
    { label: "氨气瓶数量", prop: "count5" },
    { label: "液化石油气瓶数量", prop: "count6" },
    { label: "二氧化碳气瓶数量", prop: "count7" },
    { label: "氮气瓶数量", prop: "count8" },
    { label: "氩气瓶数量", prop: "count9" },
    { label: "七氟丙烷数量", prop: "count10" },
    { label: "其它数量", prop: "count11" },
    { label: "上报时间", prop: "gxTime" },
])
const dataTable = ref([])
const querySelect = reactive({
    year: props.params.year,
    half: props.params.half,
    orgcode: props.orgObj.orgcode
})
const tableLoading = ref(false);
onMounted(() => {
    getDataList();
});

// 获取表格数据
const getDataList = () => {
    tableLoading.value = true;
    getApi(querySelect, "/mosty-jcgl/data/indCylinder/getHistoryList").then((res) => {
        if (res) {
            dataTable.value = res;
        }
    }).finally(() => {
        tableLoading.value = false;
    });
};
function seetable(row) {

    orgObj.value.orgcode = row.orgcode
    orgObj.value.orgname = row.orgname
    currCs.value = row.sbcs
    dialogTitle.value = `特种设备-工业气瓶（${row.orgname}）`;
    dialogVisibles.value = true;
}
function dialogClose() {
    dialogVisibles.value = false;
}


// 关闭弹窗
const onClose = () => {
    emits('close')
};


</script>

<style lang="scss" scoped>
.content {
    .topper {
        display: flex;

        .sub-le {
            flex: 1;
            padding: 15px 15px 5px 15px;
            border-right: 1px solid #ebeef5;
        }
    }

    .bottom {
        padding: 0 15px 10px 15px;
    }
}
</style>
