<template>
    <section class="dialog__form__container" style="max-height: 400px">
        <div class="opt-bar">
            <el-button v-if="$hasPermissions('menu:add')" type="primary" @click="newAuth">新增</el-button>
        </div>
        <el-table
            ref="authCodeTable"
            :data="list"
            style="width: 100%"
            max-height="300"
        >
            <el-table-column
                prop="name"
                :render-header="renderHeader"
                width="180"
            >
                <template slot-scope="scope">
                    <span v-if="!scope.row.editing">{{ scope.row.name }}</span>
                    <el-input v-else v-model="scope.row.name"/>
                </template>
            </el-table-column>
            <el-table-column
                prop="code"
                :render-header="renderHeader"
                width="180"
            >
                <template slot-scope="scope">
                    <span v-if="!scope.row.editing">{{ scope.row.code }}</span>
                    <el-input v-else v-model="scope.row.code"/>
                </template>
            </el-table-column>
            <el-table-column
                prop="appCode"
                label="所属应用"
                width="100"
            >
                <template slot-scope="scope">
                    <span v-if="!scope.row.editing">{{ scope.row.appCode }}</span>
                    <el-input v-else v-model="scope.row.appCode"/>
                </template>
            </el-table-column>
            <el-table-column
                prop="url"
                label="接口权限"
            >
                <template slot-scope="scope">
                    <span v-if="!scope.row.editing">{{ scope.row.url }}</span>
                    <el-input v-else v-model="scope.row.url"/>
                </template>
            </el-table-column>
            <el-table-column
                prop="address"
                label="操作"
                width="90"
            >
                <template slot-scope="scope">
                    <template v-if="$hasPermissions('menu:edit')">
                        <qg-button
                            v-if="!scope.row.editing"
                            icon="el-icon-edit"
                            tool-tip="编辑"
                            @click="setEditStatus(scope.$index,scope.row)"
                        />
                        <qg-button v-else icon="el-icon-finished" tool-tip="保存" @click="save(scope.$index,scope.row)"/>
                    </template>
                    <template v-if="$hasPermissions('menu:delete')">
                        <qg-button icon="el-icon-delete" tool-tip="删除" @click="deleteAuth(scope.$index,scope.row)"/>
                    </template>
                </template>
            </el-table-column>
        </el-table>
    </section>
</template>

<script>
    import {authSave, authDelete} from '@/api/moudles/uc/auth';

    export default {
        name: 'AuthCode',
        components: {},
        props: {
            data: {
                type: Object,
                default: () => {
                }
            },
            callback: {
                type: Function,
                default: () => {
                }
            }
        },
        data() {
            let list = [];
            if (this.data.buttonList) {
                list = JSON.parse(JSON.stringify(this.data.buttonList && this.data.buttonList.concat([])));
            }
            return {
                list,
                visible: false,
                menuForm: '',
                rules: {
                    required: {required: true, message: '此项为必填项', trigger: 'blur'}
                }
            };
        },
        computed: {
            span() {
                if (this.menuForm.menu) {
                    return 12;
                }
                return 12;
            }
        },
        watch: {
            data(val) {
            }
        },
        created() {
        },
        methods: {
            newAuth() {
                if (this.list.length > 50) {
                    this.$message.error('超过50个权限控制，不能再添加了！');
                    return;
                }
                this.list.push({
                    manage: true,
                    pId: this.data.id,
                    editing: true,
                    menu: false
                });
                // 滚动到表格底部
                setTimeout(() => {
                    console.log(this.$refs.authCodeTable.$el.childNodes[2].scrollTo(0, 45 * this.list.length));
                }, 100);
            },
            save(index, data) {
                data.pId = this.data.id;
                if (!data.name) {
                    this.$message.error('权限名不能为空');
                    return;
                }
                if (!data.code) {
                    this.$message.error('权限码不能为空');
                    return;
                }

                authSave(data).then(result => {
                    if (result.success) {
                        data.editing = false;
                        if (result.data) {
                            data.id = result.data;
                        }
                        this.$set(this.list, index, data);
                        this.$message.success(result.msg || '保存成功');
                    } else {
                        this.$message.error(result.msg || '保存失败');
                    }
                });
            },
            deleteAuth(index, data) {
                this.$confirm('你确定要删除该数据吗？').then(res => {
                    authDelete(data.id).then(result => {
                        if (result.success) {
                            this.list.splice(index, 1);
                            this.$message.success(result.msg || '删除成功');
                        } else {
                            this.$message.error(result.msg || '删除失败');
                        }
                    });
                });
            },
            setEditStatus(index, data) {
                data.editing = true;
                this.$set(this.list, index, data);
            },
            handleClose() {
                this.visible = false;
            },
            open() {
                this.visible = true;
            },
            renderHeader(h, {column, $index}) {
                let title = '';
                switch ($index) {
                    case 0:
                        title = '权限名称';
                        break;
                    case 1:
                        title = '权限码';
                        break;
                }

                return h('span', {class: 'qg-label--required'}, title);
            }
        }
    };
</script>