<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('M',null)">刷新</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
                highlight-current-row="true"
                @row-click="getDetailList"
            >
                <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="status">
                    <template slot-scope="scope">
                        <span>{{ getStatus(scope.row.status) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark"/>
                <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-pagination
                :current-page="queryParams.page"
                :page-size="queryParams.limit"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="total"
            ></el-pagination>
        </el-card>

        <el-card class="el-card" style="margin-top: 10px;">
            <el-table
                v-loading="detailTableLoading"
                :data="detailList"
                style="width: 100%;margin-top: 15px; "
                row-key="id"
                border
                default-expand-all
            >
                <el-table-column label="名称" prop="name"/>
                <el-table-column label="接口地址" prop="path"/>
                <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="docUrl">
                    <template slot-scope="scope">
                        <el-link v-if="scope.row.docUrl != '' && scope.row.docUrl != null" type="primary" :href="scope.row.docUrl" target="_blank">文档链接</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="status">
                    <template slot-scope="scope">
                        <span>{{ getStatus(scope.row.status) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark"/>
                <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                        <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-pagination
                :current-page="detailQueryParams.page"
                :page-size="detailQueryParams.limit"
                @current-change="handleDetailCurrentChange"
                layout="prev, pager, next"
                :total="total"
            ></el-pagination>
        </el-card>

        <el-dialog :title="dialog.title"
                   :visible.sync="dialog.visible"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false"
        >
            <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" :disabled="permsDisable"/>
                </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-item label="接口地址" prop="path">
                    <el-input v-model="dialog.detail.path" :disabled="permsDisable"/>
                </el-form-item>
                <el-form-item label="接口文档" prop="perms">
                    <el-input v-model="dialog.detail.docUrl" :disabled="permsDisable"/>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="dialog.detail.remark"/>
                </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,
                detailTableLoading: false,
                list: [], //接口分类数组
                detailList: [], //接口数组
                typeOptions: [{value: "M", label: "接口分类"}, {value: "F", label: "接口"}],
                statusOptions: [{value: "0", label: "启用"}, {value: "1", label: "禁用"}],
                dialog: {
                    visible: false,
                    title: "新增",
                    detail: {}
                },
                permsDisable: false,
                queryParams: {
                    page: 1,
                    limit: 10,
                    type: 'M',
                    parentId: null
                },
                detailQueryParams: {
                    page: 1,
                    limit: 10,
                    type: 'F',
                    parentId: null
                },
                currentRowId: null
            }
        },
        created() {
            this.getList('M', null);
        },
        computed: {
            type() {
                return this.dialog.detail.type;
            }
        },
        watch: {
            type: function (val) {
                if (val === 'M') {
                    //类型为接口分类
                    this.permsDisable = true;
                } else {
                    this.permsDisable = false;
                }
            }
        },
        methods: {
            getList(type, parentId) {
                this.loading = true;
                this.queryParams.type = type;
                this.queryParams.parentId = parentId;
                GetList(this.queryParams).then(result => {
                    this.list = result.data.list;
                    this.loading = false;
                })
            },
            getDetailList(row) {
                //查询具体接口
                this.detailTableLoading = true;
                if (row == null) {
                    this.detailQueryParams.parentId = this.currentRowId;
                } else {
                    if (this.currentRowId == null || this.currentRowId != row.id) {
                        this.detailQueryParams.page = 1;
                        this.currentRowId = row.id;
                    }
                    this.detailQueryParams.parentId = row.id;
                }
                GetList(this.detailQueryParams).then((result) => {
                    this.detailList = result.data.list;
                    this.detailTableLoading = 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('M', null);
                        }

                    })
                } else {
                    Insert(this.dialog.detail).then(res => {
                        if (res.code == 20000) {
                            this.$message.success("新增成功！");
                            this.dialog.visible = false;
                            this.getList('M', null);
                            this.getDetailList();
                        }
                    })
                }
            },
            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('M', null);
                                _this.detailList = [];
                            }
                        })
                    })
                    .catch(() => {
                    });
            },
            handleCurrentChange(val) {
                this.queryParams.page = val;
                this.getList('M', null);
            },
            handleDetailCurrentChange(val) {
                this.detailQueryParams.page = val;
                this.getDetailList();
            },
        }
    }
</script>

<style scoped>

</style>
