<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>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <!-- 表格 -->
        <el-table
            v-loading="loading"
            :data="whiteUrlList"
        >
            <el-table-column prop="id" label="ID" width="50"></el-table-column>
            <el-table-column prop="whiteUrl" label="白名单URL" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="remark" label="备注" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="操作" align="center" 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>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(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="白名单URL" prop="whiteUrl">
                    <el-input v-model="form.whiteUrl" placeholder="请输入白名单URL" />
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" placeholder="请输入备注" type="textarea" :rows="2"/>
                </el-form-item>
            </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 { getWhiteUrlAll, addWhiteUrl, updateWhiteUrl, delMenu } from "@/api/admin/whiteList";
export default {
    data() {
        return {
            // 显示搜索条件
            showSearch: true,
            loading: false,
            whiteUrlList: [],
            open: false,
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                whiteUrl: [{ required: true, message: "白名单url不能为空", trigger: "blur" }],
            },
            title: '',
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 获取列表
        getList() {
            this.loading = true
            getWhiteUrlAll().then(res => {
                this.loading = false
                this.whiteUrlList = res.data
            }).catch(() => this.loading = false)
        },
        // 新增
        handleAdd() {
            this.open = true
            this.form = {}
            this.title = '新增白名单URL'
        },
        // 修改
        handleUpdate(row) {
            this.title = '修改白名单URL'
            this.form = row
            this.open = true
        },
        // 删除
        handleDelete(row) {
            this.$confirm('是否确认删除白名单URL为"' + row.whiteUrl + '"的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                return delMenu(row.id);
            }).then((res) => {
                if (res.data) {
                    this.msgSuccess("删除成功");
                    this.open = false;
                    this.getList();
                }else{
                    this.$message.error('删除失败');
                }
            });
        },
        // 新增修改提交
        submitForm() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    console.log(this.form);
                    if (!this.form.id) {
                        addWhiteUrl(this.form).then((res) => {
                            if (res) {
                                this.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            }
                        });
                    } else {
                        let { id, ...data } = this.form
                        updateWhiteUrl(id, data).then((res) => {
                            if (res) {
                                this.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            }
                        });
                    }
                }
            });
        },
        // 弹窗取消
        cancel() {
            this.open = false
            this.form = {}
        },
    }
}
</script>