<template>
    <div class="bigBox">
        <section v-show='props.isShowTotal' ref="getHeight">
            <Total :obj="fromObj" ref="aqqcTotal" />
        </section>
        <!-- 查询 -->
        <el-divider />
        <div class='tabox'>
            <section class="query-flex" ref="queryHeight">
                <section class="query-section">
                    <section class="flex">
                        <el-input placeholder="请输入安全警示标题或内容" v-model="pageData.listQuery.keywords" clearable
                            style='width:250px'></el-input>
                        <el-date-picker class="ml12" v-model="pageData.listQuery.time" type="daterange"
                            range-separator="至" start-placeholder="安全警示开始日期" end-placeholder="安全警示结束日期"
                            value-format="YYYY-MM-DD" />
                        <MOSTY.DictRidioAndSelect class="ml12" :dictData="D_BZ_AQJSLX" style="width: 250px"
                            placeholder="安全警示类型" v-model="pageData.listQuery.type" selectType="select"
                            :disabled="false" />
                    </section>
                </section>
                <div class="query-btn">
                    <el-button @click="queryData" class="ml6">
                        <el-icon>
                            <Search />
                        </el-icon>查询</el-button>
                    <el-button @click="handleRest">
                        <el-icon>
                            <Refresh />
                        </el-icon>重置</el-button>
                </div>
            </section>
            <el-divider />
            <section class="button">
                <el-button @click="handleMaskData('add', '新增', '')" v-if='isProvinces'>
                    <el-icon>
                        <Plus />
                    </el-icon>新增</el-button>
            </section>
            <section :style="{ 'height': totalHeight }">
                <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="pageData.tableData"
                    :tableloading="tableloading" :isSelect="true" :isSort="true" :actionsW="280">
                    <template #state="{ row }">
                        <el-tag v-if="row.state == '01'" type="warning">待发布</el-tag>
                        <el-tag v-else-if="row.state == '02'" type="success">已发布</el-tag>
                    </template>
                    <template #type="{ row }">
                        <dict-tag :options="D_BZ_AQJSLX" :value="row.type" :tag="false" />
                    </template>
                    <template #actions="{ row }">
                        <div v-if="!isProvinces">--</div>
                        <div v-if="isProvinces">
                            <el-popconfirm confirm-button-text="是" v-if='row.state == "02"' cancel-button-text="否"
                                icon-color="red" title="确定要撤回?" @confirm="handleDelete(row, 'ch')">
                                <template #reference>
                                    <span class="operedit">
                                        <el-icon>
                                            <EditPen />
                                        </el-icon>撤回</span>
                                </template>
                            </el-popconfirm>
                            <el-popconfirm confirm-button-text="是" v-if='row.state == "01"' cancel-button-text="否"
                                icon-color="red" title="确定要发布?" @confirm="handleDelete(row, 'xf')">
                                <template #reference>
                                    <span class="operedit">
                                        <el-icon>
                                            <EditPen />
                                        </el-icon>发布</span>
                                </template>
                            </el-popconfirm>
                            <span class="operedit" v-if='row.state != "03"'
                                @click="handleMaskData('edit', '编辑', row.id)">
                                <el-icon>
                                    <EditPen />
                                </el-icon>编辑</span>
                            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red"
                                title="确定要删除?" @confirm="handleDelete(row, 'sc')">
                                <template #reference>
                                    <span class="operdel" size="small">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                        删除</span>
                                </template>
                            </el-popconfirm>
                            <span class="operesee" @click="handleMaskData('view', '查看', row.id)">
                                <el-icon>
                                    <View />
                                </el-icon>查看</span>
                        </div>
                    </template>
                </MOSTY.Table>
            </section>
            <div class="fenye">
                <MOSTY.Pages :pageConfiger="pageData.pageConfiger" @changeNo="handleCurrentChange"
                    @changeSize="handleSizeChange" />
            </div>
        </div>
    </div>
    <!-- 通知公告 -->
    <div v-if="aqqcShow" class="dialog-box">
        <Detail :title="title" :type="type" @close="handleClose" :id="detailId" />
    </div>

</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import Detail from "./Detail.vue";
import { reactive, ref, onMounted, watch, nextTick, computed, getCurrentInstance } from "vue"
import { filterqx } from "@/utils/auth.js";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { getItem } from "@/utils/storage";
import Total from './Total.vue'
const { proxy } = getCurrentInstance();
const { D_BZ_AQJSLX } = proxy.$dict("D_BZ_AQJSLX");
const props = defineProps({
    isShowTotal: {
        type: Boolean,
        default: false
    }
});
const tableloading = ref(false);
const aqqcShow = ref(false);
const getHeight = ref(null)
const queryHeight = ref(null)
const aqqcTotal = ref(null)
const detailId = ref('')
const title = ref('')
const type = ref('')
const pageData = reactive({
    listQuery: {
        keywords: '',
        type: '',
        time: [],
    },
    pageConfiger: {
        pageSize: 20,
        pageCurrent: 1,
        total: 0
    },
    tableColumns: [
        {
            title: "安全警示标题",
            prop: "title",
        },
        {
            title: "安全警示类型",
            prop: "type",
            slot: true
        },
        // {
        //     title: "安全警示内容",
        //     prop: "content",
        //     slot: true
        // },
        {
            title: "发布时间",
            prop: "issuedTime",
        },
        {
            title: "下发单位",
            prop: "orgName",
        },
        {
            title: "撰稿人",
            prop: "writer"
        },
        {
            title: "状态",
            prop: "state",
            slot: true
        },
        {
            title: "操作",
            prop: "actions",
            slot: true
        }
    ],
    tableData: []
})
const fromObj = ref()
const totalHeight = ref(null)
// 是否是省账号
const isProvinces = computed(() => {
    return filterqx("isaqbm") == "1" && filterqx("isSgs") == "1"
})
watch(() => props.isShowTotal, (val) => {
    nextTick(() => {
        if (val) {
            totalHeight.value = `calc(100vh - ${340 + queryHeight.value.offsetHeight + getHeight.value.offsetHeight}px)`
            return
        }
        totalHeight.value = `calc(100vh - 372px)`
    })
}, {
    deep: true,
    immediate: true
})
onMounted(() => {
    queryData()
    nextTick(() => {
        totalHeight.value = `calc(100vh - ${340 + getHeight.value.offsetHeight + queryHeight.value.offsetHeight}px)`
    })
})
// 关闭弹窗
const handleClose = val => {
    aqqcShow.value = false
    if (val) {
        queryData()
    }
}
// 重置过滤条件
const handleRest = () => {
    Object.assign(pageData.listQuery, {
        keywords: '',
        type: '',
        time: []
    })
    pageData.pageConfiger.pageCurrent = 1
    queryData()
}
//列表查询
const queryData = () => {
    tableloading.value = true
    postApi({ ...pageData.pageConfiger, ...pageData.listQuery }, "/mosty-jcgl/safetyWarning/querySafetyWarning").then((res) => {
        if (res) {
            pageData.tableData = res.records
            pageData.pageConfiger.total = res.total
        }
    }).finally(() => {
        tableloading.value = false
    })
}
//新增 修改 详情
const handleMaskData = (val, _title, _id) => {
    detailId.value = _id
    type.value = val
    title.value = '安全警示' + _title
    aqqcShow.value = true
}
//删除
const handleDelete = (row, type) => {
    const _url = '/mosty-jcgl/safetyWarning'
    const urlMap = {
        sc: `${_url}/delSafetyWarning`,
        ch: `${_url}/withdrawSafetyWarningInfo`,
        xf: `${_url}/releaseSafetyWarningInfo`,
    };
    const messageMap = {
        sc: '删除成功',
        ch: '撤回成功',
        xf: '发布成功',
    };
    let _data = type == 'sc' ? [row.id] : { id: row.id }
    let _r = type == 'sc' ? postApi : getApi
    _r(_data, urlMap[type]).then(() => {
        ElMessage.success(messageMap[type]);
        queryData()
    });
}
//页码发生变化
const handleCurrentChange = (val) => {
    pageData.pageConfiger.pageCurrent = val;
    queryData()
};
//查询条数发生变化
const handleSizeChange = (val) => {
    pageData.pageConfiger.pageSize = val;
    queryData()
};
</script>

<style lang="scss" scoped>
::v-deep .el-divider--horizontal {
    margin: 12px 0;
}

.query-flex {
    display: flex;
    justify-content: space-between;

    .query-section {
        width: 68%;
    }

    .query-btn {
        width: 250px;
        display: flex;
        justify-content: flex-end;

        .toggle {
            height: 32px;
            cursor: pointer;
            display: flex;
            align-items: center;
            color: #0f3916;

            .el-icon {
                transform: rotate(90deg);
                transition: all 0.25s ease;
            }

            &.active {
                .el-icon {
                    transform: rotate(-90deg);
                }
            }
        }
    }
}

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