<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                >新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="success"
                    icon="el-icon-refresh"
                    :loading="refreshLoading"
                    size="mini"
                    @click="handleRefresh"
                >刷新</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table
            v-loading="loading"
            :data="modularList"
        >
            <el-table-column prop="moduleName" label="服务名称" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="moduleKey" label="服务KEY" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="pathPrefix" label="请求前缀" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="apiWhiteUrl" label="api白名单" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.apiWhiteUrl.toString()}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" 
                        type="text" 
                        icon="el-icon-edit" 
                        @click="handleUpdate(scope.row)"
                    >修改</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增服务 -->
        <el-dialog :title="title" :visible.sync="open" width="420px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules">
                <el-form-item label="服务名称" prop="moduleName">
                    <el-input v-model="form.moduleName" placeholder="请输入服务名称" />
                </el-form-item>
                <el-form-item label="服务KEY" prop="moduleKey">
                    <el-input v-model="form.moduleKey" placeholder="请输入服务KEY" />
                </el-form-item>
                <el-form-item label="请求前缀" prop="pathPrefix">
                    <el-input v-model="form.pathPrefix" placeholder="请输入请求前缀" />
                </el-form-item>
                <el-form-item :label="'api白名单' + (index + 1)" v-for="(item, index) in form.apiWhiteUrls" :key="index">
                    <el-input v-model="item.apiWhiteUrl" placeholder="请输入api白名单" style="width: 92%"/>
                    <el-button @click.prevent="removeDomain(index)" type="text" icon="el-icon-delete" style="color: red; margin-left: 10px"></el-button>
                </el-form-item>
                <el-button type="text" icon="el-icon-plus" @click="addApi">新增api白名单</el-button>
                <!-- <i class="el-icon-plus"></i> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { getModuleAll, refreshCache, addModule, editModule } from "@/api/admin/modular.js";
    export default {
        data() {
            return {
                loading: false,
                modularList: [],
                showSearch: true,
                refreshLoading: false,
                open: false,
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                    moduleName: [{ required: true, message: "服务名称不能为空", trigger: "blur" }],
                    moduleKey: [{ required: true, message: "服务KEY不能为空", trigger: "blur" }],
                    pathPrefix: [{ required: true, message: "请求前缀不能为空", trigger: "blur" }],
                },
                title: '',
            }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                this.loading = true
                getModuleAll().then(res => {
                    this.loading = false
                    this.modularList = res.data
                })
            },
            // 新增
            handleAdd() {
                this.open = true
                this.form = {
                    apiWhiteUrls: [
                        {
                            apiWhiteUrl: ''
                        }
                    ]
                }
                this.title = '新增服务'
            },
            // 新增api白名单
            addApi() {
                let apiWhiteUrls = this.form.apiWhiteUrls
                apiWhiteUrls.push({
                    apiWhiteUrl: ''
                })
                console.log(apiWhiteUrls)
            },
            // 删除api白名单
            removeDomain(index) {
                this.form.apiWhiteUrls.splice(index, 1)
            },
            // 修改
            handleUpdate(row) {
                console.log(row)
                let { apiWhiteUrl, ...newForm } = row
                let apiWhiteUrls = apiWhiteUrl.map(item => {
                    return {
                        apiWhiteUrl: item
                    }
                })
                this.title = '修改服务'
                this.form = { ...newForm, apiWhiteUrls }
                this.open = true
            },
            // 刷新
            handleRefresh() {
                this.refreshLoading = true
                refreshCache().then(res => {
                    this.refreshLoading = false
                    this.getList()
                }).catch(() => this.refreshLoading = false)
            },
            // 取消
            cancel() {
                this.open = false
                this.form = {}
            },
            // 提交
            submitForm() {
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        // console.log(this.form);
                        let { apiWhiteUrls, ...newForm } = this.form
                        let apiWhiteUrl = apiWhiteUrls.map(item => item.apiWhiteUrl)
                        apiWhiteUrl = apiWhiteUrl.filter(item => item)
                        // console.log('apiWhiteUrl-->', apiWhiteUrl)
                        if (this.title === '新增服务') {
                            addModule({ ...newForm, apiWhiteUrl }).then((res) => {
                                if (res) {
                                    this.msgSuccess("新增成功");
                                    this.open = false;
                                    this.getList();
                                }
                            });
                        } else {
                            editModule({ ...newForm, apiWhiteUrl }).then((res) => {
                                if (res) {
                                    this.msgSuccess("修改成功");
                                    this.open = false;
                                    this.getList();
                                }
                            });
                        }
                    }
                });
            }
        }
    }
</script>