<!--
author:        Kane Wang <wangkane@qq.com>
date:          2025-10-23 21:40:24
component:     RegulatoryManagement
Copyright © CPIC All rights reserved
-->
<template>
    <div class="wrapper">
        <el-row :gutter="10">
            <el-col span="24">
                <el-button
                    type="warning"
                    icon="upload"
                >
                    上传
                </el-button>
                <el-button
                    type="primary"
                    icon="refresh"
                >
                    刷新
                </el-button>
            </el-col>
        </el-row>
        <el-table
            width="100%" stripe
            :header-cell-style="headerCellStyle"
            border
            :data="ui.regulatoryData"
        >
            <el-table-column label="部门" align="center" width="200px">
                <template #default="regulatory">
                    <span>{{ regulatory.row.department_name }}</span>
                </template>
            </el-table-column>
            <el-table-column width="150px" label="发布、修订年份" align="center">
                <template #default="regulatory">
                    <span>{{ regulatory.row.release_year }}</span>
                </template>
            </el-table-column>
            <el-table-column label="制度名称" align="center" :cell-style="cellStyle">
                <template #default="regulatory">
                    <span>{{ regulatory.row.regulatory_name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200px">
                <el-button
                    type="primary"
                    icon="search"
                >
                    查看
                </el-button>
                <el-button type="warning" icon="document">
                    编辑
                </el-button>
            </el-table-column>
        </el-table>
    </div>
</template>
<script lang="ts">
import { reactive } from "vue";
import { type RegulatoryData } from "@/types/regulatory/regulatory.ts";

interface UI
{
    showUI: boolean,
    showUploadDialog: boolean,
    tablePageSize: number,
    tableCurrentPageIndex: number,
    regulatoryData: RegulatoryData[],
}

export default {
    name: "RegulatoryManagement",
    setup()
    {
        const headerCellStyle = reactive(
            {
                textAlign: "center",
            }
        );
        const cellStyle = reactive({
            textAlign: "center",
        });
        const ui:UI = reactive({
            showUI: true,
            showUploadDialog: false,
            tablePageSize: 10,
            tableCurrentPageIndex: 1,
            regulatoryData: [
                {
                    department_name: "信息技术部",
                    release_year: "2019",
                    regulatory_name: "关于印发修订后的《太平洋产险厦门分公司信息系统账号权限管理实施细则》的通知",
                    comment:"",
                    regulatory_files: [],
                },
                {
                    department_name: "信息技术部",
                    release_year: "2019",
                    regulatory_name: "关于印发修订后的《太平洋产险厦门分公司个人信息保护管理实施细则》的通知",
                    comment:"",
                    regulatory_files: [],
                },
            ],
        });

        return { ui, headerCellStyle, cellStyle, };
    },
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/public/mixin.scss";

.wrapper {
    margin: 10px 10px 10px 10px;

    >*+* {
        margin-top: 10px;
    }
}

.pagination_wrapper {
    display: flex;
    justify-content: flex-end;
}
</style>