<template>
    <div class="page_info">
        <div class="card_info">
            <div class="function_btn">
                <el-button
                        v-if="$hasPermission('sys:menu:save')"
                        icon="el-icon-plus"
                        type="primary"
                        @click="addOrUpdateHandle()"
                >新增</el-button>
            </div>
            <div class="info_list">
                <el-table
                        v-loading="dataListLoading"
                        :data="dataList"
                        stripe
                        row-key="id"
                        :header-cell-style="{ background: '#e6e7ea', color: '#0C1935' }"
                        style="width: 100%"
                        height="100%"
                >
                    <el-table-column
                            prop="name"
                            label="名称"
                            header-align="center"
                            min-width="150"
                    ></el-table-column>
                    <el-table-column
                            prop="icon"
                            label="图标"
                            header-align="center"
                            align="center"
                    >
                        <template slot-scope="scope">
                            <svg class="icon-svg" aria-hidden="true">
                                <use :xlink:href="`#${scope.row.icon}`"></use>
                            </svg>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="类型"
                            header-align="center"
                            align="center"
                    >
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.type === 0" size="small">{{
                                $t("menu.type0")
                                }}</el-tag>
                            <el-tag v-else size="small" type="info">{{
                                $t("menu.type1")
                                }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="sort"
                            label="排序"
                            header-align="center"
                            align="center"
                    ></el-table-column>
                    <el-table-column
                            prop="url"
                            label="路由"
                            header-align="center"
                            align="center"
                            width="150"
                            :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                            prop="permissions"
                            label="授权标识"
                            header-align="center"
                            align="center"
                            width="150"
                            :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                            label="操作"
                            :resizable="false"
                            fixed="right"
                            header-align="center"
                            align="center"
                            width="200"
                    >
                        <template slot-scope="scope">
                            <el-link
                                    v-if="$hasPermission('sys:menu:update')"
                                    type="primary"
                                    :underline="false"
                                    @click="addOrUpdateHandle(scope.row.id)"
                            >编辑</el-link
                            >
                            <el-link
                                    v-if="$hasPermission('sys:menu:delete')"
                                    type="primary"
                                    :underline="false"
                                    @click="deleteHandle(scope.row.id)"
                            >删除</el-link
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 弹窗, 新增 / 修改 -->
        <el-drawer
                size="25%"
                :visible.sync="drawer"
                :with-header="false"
                :modal="false"
                @close="closedrawer"
        >
            <add-or-update
                    v-if="addOrUpdateVisible"
                    ref="addOrUpdate"
                    @refreshDataList="getDataList"
            ></add-or-update>
        </el-drawer>
    </div>
</template>
<script>
    import mixinViewModule from "@/mixins/view-module";
    import AddOrUpdate from "./appmenuadd";
    export default {
        mixins: [mixinViewModule],
        data() {
            return {
                screenHeight: "660px",
                mixinViewModuleOptions: {
                    getDataListURL: "/sys/menu/list",
                    deleteURL: "/sys/menu",
                },
                dataForm: {
                    menuClassify:2,
                },
            };
        },
        components: {
            AddOrUpdate,
        },
        mounted() {
         //   this.setTableHeight();
            // 页面创建完成后添加监听
          //  window.addEventListener("resize", this.setTableHeight);
        },
        methods: {
            // setTableHeight() {
            //     setTimeout(() => {
            //         this.screenHeight = getComputedStyle(
            //             document.querySelector(".info_list")
            //         ).height;
            //     }, 1000);
            // },
        },
        destroyed() {
          //  window.removeEventListener("resize", this.setTableHeight);
        },
    };
</script>
<style lang="scss" scoped>
    .card_info {
        height: calc(100% - 0px);
        .info_list {
            height: calc(100% - 1.15rem);
        }
    }
</style>
