<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="teamsList"
        >
            <el-table-column prop="id" label="ID" width="50"></el-table-column>
            <el-table-column prop="businessGroupName" label="项目组名称" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></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" width="100">
                <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="businessGroupName">
                    <el-input v-model="form.businessGroupName" placeholder="请输入项目组名称" />
                </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 { getBusinessGroupAll, addBusinessGroup, updateBusinessGroup } from "@/api/admin/teams";
export default {
    data() {
        return {
            // 显示搜索条件
            showSearch: true,
            loading: false,
            teamsList: [],
            open: false,
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                businessGroupName: [{ required: true, message: "项目组名称不能为空", trigger: "blur" }],
            },
            title: '',
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 获取列表
        getList() {
            this.loading = true
            getBusinessGroupAll().then(res => {
                this.loading = false
                this.teamsList = res.data
            }).catch(() => this.loading = false)
        },
        // 新增
        handleAdd() {
            this.open = true
            this.form = {}
            this.title = '新增项目组'
        },
        // 修改
        handleUpdate(row) {
            this.title = '修改项目组'
            this.form = row
            this.open = true
        },
        // 新增修改提交
        submitForm() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    console.log(this.form);
                    if (!this.form.id) {
                        addBusinessGroup(this.form).then((res) => {
                            if (res) {
                                this.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            }
                        });
                    } else {
                        updateBusinessGroup(this.form).then((res) => {
                            if (res) {
                                this.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            }
                        });
                    }
                }
            });
        },
        // 弹窗取消
        cancel() {
            this.open = false
            this.form = {}
        },
    }
}
</script>