<template>
    <div>
        <el-card class="el-card">


            <el-button-group>
                <el-button type="primary" @click="insert(0)">新增</el-button>
                <el-button type="primary" @click="getList">刷新</el-button>
            </el-button-group>
            <el-table
                v-loading="loading"
                :data="list"
                style="width: 100%;margin-top: 15px; "
                row-key="id"
                border
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            >
                <el-table-column label="名称" prop="name"/>
                <el-table-column label="类型" prop="type">
                    <template slot-scope="scope">
                        <span>{{ getType(scope.row.type) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="权限标识" prop="perms"/>
                <el-table-column label="排序" prop="sort"/>
                <el-table-column label="状态" prop="status">
                    <template slot-scope="scope">
                        <span>{{ getStatus(scope.row.status) }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" fixed="right" >
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click.native.stop="insert(scope.row.id)">新增</el-button>
                        <el-button type="text" size="small" @click.native.stop="update(scope.row.id)">修改</el-button>
                        <el-button type="text" size="small" @click.native.stop="deleteRow(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog :title="dialog.title" :visible.sync="dialog.visible">
            <el-form :model="dialog.detail" label-position="left" label-width="100px">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="dialog.detail.name"/>
                </el-form-item>
                <el-form-item label="权限标识" prop="perms">
                    <el-input v-model="dialog.detail.perms"/>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="dialog.detail.sort" controls-position="right"  :min="1"/>
                </el-form-item>
                <el-form-item label="类型" prop="type">
                    <el-select
                        v-model="dialog.detail.type"
                        placeholder="类型"
                    >
                        <el-option
                            v-for="item in typeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio v-model="dialog.detail.status" label="0">启用</el-radio>
                    <el-radio v-model="dialog.detail.status" label="1">禁用</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog.visible = false">取 消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {GetList, Insert, Update, Detail, Delete} from "@/api/sys/sysMenu";

export default {
    name: "sysMenu",
    data() {
        return {
            loading: false,
            list: [],
            typeOptions: [{value: "M", label: "目录"}, {value: "F", label: "菜单"}, {value: "F", label: "资源"}],
            statusOptions: [{value: "0", label: "启用"}, {value: "1", label: "禁用"}],
            dialog: {
                visible: false,
                title: "新增",
                detail: {}
            }
        }
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            this.loading = true;
            GetList().then(result => {
                this.list = result.data;
                this.loading = false;
            })
        },
        getType(type) {
            return this.selectDictLabel(this.typeOptions, type);
        },
        getStatus(status) {
            return this.selectDictLabel(this.statusOptions, status);
        },
        formRest() {
            this.dialog.detail = {
                id: 0,
                parentId: 0,
                name: "",
                type: "F",
                perms: "",
                status: "0",
                sort:1,
            }
        },
        insert(parentId) {
            this.formRest();
            this.dialog.detail.parentId = parentId;
            this.dialog.title = "新增";
            this.dialog.visible = true;
        },
        update(id) {
            this.formRest();
            this.dialog.title="修改";
            Detail(id).then(res=>{
                this.dialog.detail = res.data;
                this.dialog.visible = true;
            })
        },
        save() {
            let id = this.dialog.detail.id;
            if(id>0){
                Update(this.dialog.detail).then(res=>{
                    if(res.code == 20000){
                        this.$message.success("修改成功！");
                        this.dialog.visible = false;
                        this.getList();
                    }

                })
            }else{
                Insert(this.dialog.detail).then(res => {
                    if(res.code == 20000){
                        this.$message.success("新增成功！");
                        this.dialog.visible = false;
                        this.getList();
                    }
                })
            }
        },
        deleteRow(id){
            let _this=this;
            this.$confirm("确定删除该行数据，删除后将不可恢复?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    Delete(id).then(result => {
                        if(result.code == 20000){
                            _this.$message.success("删除成功！");
                            _this.getList();
                        }
                    })

                })
                .catch(() => {
                    console.log("catch");
                    /*_this.$message({
                        type: 'error',
                        message:"发生错误！"
                    });*/
                });


        }
    }
}
</script>

<style scoped>

</style>
