<template>
  <div>
    <i-page-header class="product_tabs" title="角色管理"></i-page-header>
    <Card :bordered="false" dis-hover class="ivu-mt">

      <Form ref="formValidate" :model="formValidate"  :label-width="labelWidth" :label-position="labelPosition" @submit.native.prevent>
        <Row type="flex"  :gutter="24">
          <Col v-bind="grid">
            <FormItem label="搜索："  label-for="status2">
              <Input search enter-button placeholder="请输入姓名或者账号" v-model="formValidate.keyword" @on-search="userSearchs"/>
            </FormItem>
          </Col>
        </Row>
        <Row type="flex">
          <Col v-bind="grid">
            <el-button type="primary" @click="tapAdd" v-if="$utils.checkPermissions(paths,'role/save')" icon="md-add">添加身份</el-button>

            <el-button type="danger" @click="tapPermissions" v-if="$utils.checkPermissions(paths,'rolePath/list')">权限配置表</el-button>
          </Col>
        </Row>
      </Form>

      <Table :columns="columns1" :data="tableData" class="mt25" no-userFrom-text="暂无数据"
             no-filtered-userFrom-text="暂无筛选结果"  :loading="loading" highlight-row>
        <template slot-scope="{ row, index }" slot="status">
          <el-tag v-if="row.status == 1">开启</el-tag>
          <el-tag type="info" v-else>关闭</el-tag>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <div v-if="row.is_system == 1">
            <i-link  v-if="$utils.checkPermissions(paths,'admin/list')" :to="'/system/admin/index?roleId=' + row.id + '&title=' + row.name + '会员' ">查看人员</i-link>
            <Divider v-if="$utils.checkPermissions(paths,'admin/list')"  type="vertical"/>
            <a v-if="$utils.checkPermissions(paths,'role/setingList')" style="color:#c5c8ce">编辑权限</a>
            <Divider v-if="$utils.checkPermissions(paths,'role/setingList')" type="vertical"/>
            <a v-if="$utils.checkPermissions(paths,'role/save')" style="color:#c5c8ce">编辑</a>
            <Divider v-if="$utils.checkPermissions(paths,'role/save')" type="vertical"/>
            <a v-if="$utils.checkPermissions(paths,'role/del')" style="color:#c5c8ce">删除</a>
          </div>

          <div v-else>
            <i-link v-if="$utils.checkPermissions(paths,'admin/list')" :to="'/system/admin/index?roleId=' + row.id + '&title=' + row.name + '会员'">查看人员</i-link>
            <Divider v-if="$utils.checkPermissions(paths,'admin/list')" type="vertical"/>
            <a v-if="$utils.checkPermissions(paths,'role/setingList')" @click="tapRoleSeting(row.id)">编辑权限</a>
            <Divider v-if="$utils.checkPermissions(paths,'role/setingList')" type="vertical"/>
            <a v-if="$utils.checkPermissions(paths,'role/save')" @click="tapEdit(index)">编辑</a>
            <Divider v-if="$utils.checkPermissions(paths,'role/save')" type="vertical"/>
            <a v-if="$utils.checkPermissions(paths,'role/del')" @click="tapDel(row.id)">删除</a>
          </div>
        </template>

        <template slot-scope="{row,index}" slot="avatar">
          <el-avatar icon="el-icon-user-solid" :src="row.avatar"></el-avatar>
        </template>

      </Table>

    </Card>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="editClose">

      <el-form ref="role" :model="role" label-width="80px">
        <el-form-item label="角色名" prop="name"
                      :rules="[{ required: true, message: '请输入角色名'}]">
          <el-input placeholder="请输入角色名" autocomplete="off" v-model="role.name"></el-input>
        </el-form-item>


        <el-form-item label="是否禁用" style="margin-bottom: 0;">
            <el-radio-group v-model="role.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="subAdmin">确 定</el-button>
        </span>
    </el-dialog>



  </div>
</template>


<script>
    import IPageHeader from "../../../../layouts/system/page-header/index";
    import {SystemRole, SystemRoleSave,SystemRoleDel} from "../../../../api/system/role";
    import { mapState, mapActions } from 'vuex';
    import UiUpload from "../../../../ui/upload/index";
    export default {
        name: "index",
        components: {UiUpload, IPageHeader},
        computed: {
            ...mapState('system/layout', [
                'isMobile'
            ]),
          ...mapState('system/user',['paths']),
            labelWidth () {
                return this.isMobile ? undefined : 50;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'left';
            }
        },
        data() {
            return {
                title:"添加角色",
                dialogVisible:false,
                upUrl : "",
                upHeaders : {},
                grid: {
                    xl: 7,
                    lg: 7,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                columns1: [
                    {
                        title: 'ID',
                        key: 'id',
                        minWidth: 120
                    },
                    {
                        title: '角色名',
                        key: 'name',
                        minWidth: 150
                    },
                    {
                        title: '启动',
                        slot:'status',
                        minWidth: 150
                    },
                    {
                        title: '操作',
                        key: 'action',
                        slot: 'action',
                        fixed: 'right',
                        width: 250
                    }
                ],
                loading: true,
                tableData: [],
                tableData2:[],
                formValidate:{
                    keyword : ""
                },
                role : {
                    name : '',
                    username : '',
                    status : 1,
                    role_id : '',
                    password:"",
                    avatar : ''
                }
            }
        },

        created() {
        },
        mounted(){
            this.getData();
        },
        methods: {
            /**
             * 获取数据
             */
            getData:function () {
                var data = {
                    keyword : this.formValidate.keyword
                };
                SystemRole(data)
                    .then(res=>{
                        this.loading = false;
                        if(res.code == 200) {
                            this.tableData = res.data;
                            this.tableData2 = JSON.parse(JSON.stringify(res.data));
                        } else {
                            this.$alert(res.msg);
                        }
                    })
                    .catch(err=>{
                        this.loading = false;
                        this.$utils.loadingClose();
                        this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                    });
            },
            userSearchs () {
                var data = [];
                for (var i in this.tableData2) {
                    if(this.tableData2[i].name.indexOf(this.formValidate.keyword) >= 0) {
                        data.push(this.tableData2[i]);
                    }
                }

                this.tableData = data;
            },
            /**
             * 分页
             */
            tapPage:function(index){
                this.page.page = index;
                this.getData();
            },
            /**
             * 添加新管理人员
             */
            tapAdd:function () {
                this.dialogVisible = true;
                this.$refs['role'].resetFields();
            },
            /**
             * 权限配置
             */
            tapPermissions:function(){
              this.$router.push("/system/role/permissions");
            },
            /**
             * 角色设置
             */
            tapRoleSeting:function(id){
              this.$router.push("/system/role/seting?id=" + id);
            },
          //修改内容
            editClose:function () {
                this.dialogVisible = false;
            },
            /**
             * 提交参数
             */
            subAdmin:function () {
                this.$refs['role'].validate((valid) => {
                    if (valid) {
                        this.$utils.loading(this,"提交数据中...");
                        SystemRoleSave(this.role)
                            .then(res=>{
                                this.$utils.loadingClose();
                                if(res.code == 200) {
                                    this.$message({
                                        message: res.msg,
                                        type: 'success'
                                    });
                                    this.getData();
                                    this.dialogVisible = false;
                                } else {
                                    this.$alert(res.msg);
                                }
                            })
                            .catch(err=>{
                                this.$utils.loadingClose();
                                this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                            });
                    }
                });
            },

            /**
             * 删除管理账号
             */
            tapDel:function(id){
                this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$utils.loading(this, "删除数据中...");
                    SystemRoleDel({id: id})
                        .then(res => {
                            this.$utils.loadingClose();
                            if (res.code == 200) {
                                this.getData();
                            } else {
                                this.$alert(res.msg);
                            }
                        })
                        .catch(err => {
                            this.$utils.loadingClose();
                            this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                        });
                });
            },

            /**
             * 修改管理员
             */
            tapEdit:function(index){
                this.role = this.tableData[index];
                this.dialogVisible = true;
                this.title = "修改角色";
            },
        }
    }
</script>
<style scoped>

</style>
