Vue.component('role-list', {
    template: `<div>
                    <el-button v-if="operate.rolesAdd" type="primary"
                               style="margin-bottom:10px;" @click="rolesEdit('')" size="small">新增角色
                    </el-button>
                
                    <div>
                        <el-table border size="small" :data="rolesList" style="width: 100%;"
                                  :header-cell-style="{background:'#F5F7FA',color:'#606266'}">
                            <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
                            <el-table-column align="center" prop="role_name" label="角色名称" show-overflow-tooltip></el-table-column>
                            <el-table-column align="center" prop="add_time" label="添加时间" show-overflow-tooltip></el-table-column>
                            <el-table-column align="center" label="状态">
                                <template slot-scope="scope">
                                    <el-switch v-model="scope.row.status"
                                               :disabled="operate.changeStatus?false:true"
                                               active-value="1"
                                               inactive-value="2"
                                               @change="changeStatus(scope.row)">
                                    </el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" fixed="right" label="操作" width="130">
                                <template slot-scope="scope">
                                    <el-button v-if="operate.rolesAdd"
                                               type="text" size="small"
                                               @click="rolesEdit(scope.row.id)">编辑
                                    </el-button>
                                    <el-button v-if="operate.rolesDel"
                                               size="mini"
                                               @click="deleteRoles(scope.row.id)"
                                               style="color: #999999"
                                               type="text">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                            <div slot="empty" v-if="loading"><i class="el-icon-loading"></i></div>
                            <div slot="empty" v-else>暂无数据</div>
                        </el-table>
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[10, 15, 20, 25, 30, 35, 40, 45, 50]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="currentCount">
                        </el-pagination>
                    </div>
                </div>`,
    props: {
        'userType': {
            type: Number,
            default: 1,
        },//1合伙人 2代理商 3商户 4门店
    },
    data() {
        return {
            rolesList: [],
            currentCount: 0,
            currentPage: 1,
            currentLimit: 10,
            requestUrl: {
                rolesAdd: {
                    1: '/index.php/Admin/AdminRoles/rolesAdd',
                    2: '/index.php/Agent/AgentRoles/rolesAdd',
                    3: '/index.php/Retail/MerchantRoles/rolesAdd',
                    4: '/index.php/Retail/StoreRoles/rolesAdd',
                },
                rolesDel: {
                    1: '/index.php/Admin/AdminRoles/rolesDel',
                    2: '/index.php/Agent/AgentRoles/rolesDel',
                    3: '/index.php/Retail/MerchantRoles/rolesDel',
                    4: '/index.php/Retail/StoreRoles/rolesDel',
                },
                changeStatus: {
                    1: '/index.php/Admin/AdminRoles/changeStatus',
                    2: '/index.php/Agent/AgentRoles/changeStatus',
                    3: '/index.php/Retail/MerchantRoles/changeStatus',
                    4: '/index.php/Retail/StoreRoles/changeStatus',
                },
                getRoles: {
                    1: '/index.php/Admin/AdminRoles/getRoles',
                    2: '/index.php/Agent/AgentRoles/getRoles',
                    3: '/index.php/Retail/MerchantRoles/getRoles',
                    4: '/index.php/Retail/StoreRoles/getRoles',
                },
            },
            operate: {},
            loading: false,
        }
    },
    methods: {
        deleteRoles(id) {
            this.$confirm('删除后角色可能产生变动,请谨慎操作！确定要删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                this.sendRequest(this.requestUrl.rolesDel[this.userType], {
                    data: {
                        id: id,
                    },
                    success: (res) => {
                        if (res.status == 1) {
                            this.$message.success(res.message);
                            this.getData();
                        } else {
                            this.$message.error(res.message);
                        }
                    }
                });
            }).catch(() => {
            });
        },
        handleSizeChange(val) {
            this.currentLimit = val;//切换每页数量
            this.currentPage = 1;
            this.getData();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getData();//切换页数
        },
        //获取列表
        getData() {
            this.loading = true;
            this.sendRequest(this.requestUrl.getRoles[this.userType], {
                data: {
                    page: this.currentPage,
                    limit: this.currentLimit,
                },
                success: (res) => {
                    this.loading = false;
                    if (res.status == 1) {
                        this.rolesList = [];
                        this.rolesList = res.data.list;
                        this.currentCount = res.data.count;
                    } else {
                        this.$message.error(res.message);
                    }
                }
            })
        },
        //修改状态
        changeStatus(item) {
            this.sendRequest(this.requestUrl.changeStatus[this.userType], {
                data: {
                    id: item.id,
                },
                success: (res) => {
                    if (res.status == 1) {
                        this.$message.success(res.message);
                    } else {
                        item.status = item.status == '1' ? '2' : '1';
                        this.$message.error(res.message);
                    }
                }
            })
        },
        rolesEdit(id) {
            MenuApp.pathData.push({
                name: id ? '编辑角色' : '新增角色',
                path: this.requestUrl.rolesAdd[this.userType] + '?id=' + id,
                onClose: () => {
                    this.getData();
                }
            })
        }
    },
    created() {
        this.getData();
        this.checkOperateAuth({
            rolesAdd: this.requestUrl.rolesAdd[this.userType],
            rolesDel: this.requestUrl.rolesDel[this.userType],
            changeStatus: this.requestUrl.changeStatus[this.userType],
        }, (data) => {
            this.operate = data;
        })
    }
});