<template>
  <div class="demo-tabs-style right_con">
    <div v-if="!is_set_role">
      <div v-if="adminRole_type==='list'" style="position:relative">
        <div class="staff_fgx fl"></div>
        <p class="fl staff_list" style="padding-bottom:20px">角色权限</p>
        <Button type="primary" class="add_staff_btn" @click="addRole">添加角色</Button>
         <Table :columns="adminRoleData" :data="adminRoleList" class="clear tables" border></Table>
          <div class="page">
            <Page :total='count' :current="pindex" :page-size="10" size="small" show-total show-elevator @on-change="getRoleList"/>
          </div>
      </div>
      <div v-else>
        <editAdminRole :adminRole_type='adminRole_type' @return_last='return_last' :pindex='pindex' :curInfo='curInfo'></editAdminRole>
      </div>
    </div>
    <div v-if="is_set_role">
      <p class="edit_page_title">设置角色权限</p>
      <Tree ref="roletree" :data="treeContent" :render="renderContent" show-checkbox :check-strictly='true' :check-directly='true'></Tree>
      <div class="form_btn mar_T_15">
        <Button type="primary" @click="editUserRole">保存</Button>
        <Button class="return_btn mar_L_15" @click="is_set_role=false">返回</Button>
      </div>
    </div>
  </div>
</template>
<script>
import editAdminRole from '@@/user/edit_adminRole'
import { fail } from 'assert';
import { getStore } from '@/utils/utils'
import { chown } from 'fs';
export default {
  components:{editAdminRole},
  name: "admin_role",
  data() {
    return {
      count:0,
      pindex:1,
      curInfo:{},
      checkList:[],
      adminRole_type: "list",
      is_set_role:false,
      treeContent:[],
      addAdminRole: {},
      chagneAdminRole: {},
      adminRoleData: [
        {
          title: "ID",
          key: "id"
        },
        {
          title: "角色名称",
          key: "name",
        },
        {
          title: "描述",
          key:'remark'
        },
        {
          title: "状态",
          render: (h, params) => {
            if (params.row.status === 0) {
              return h("span",{ 
                style: {
                   color: "rgba(255, 121, 0, 1)",
                   cursor:'pointer'
                },
                 on: {
                  click: () => {
                    this.enabledRole(params.row.id)
                  }
                }
              },"已锁定");
            } else {
              return h("span",{ 
                style: { 
                  color: "rgba(0, 156, 255, 1)" ,
                  cursor:'pointer'
                },
                on: {
                  click: () => {
                     this.disabledRole(params.row.id)
                  }
                }
              },"正常");
            }
          }
        },
        {
          title: "操作",
          width: 160,
          align:'center',
          render: (h, params) => {
            const change_btn = h("div",
              {
                class: "operate-btn",
              },"编辑");
            const change_btn_blue = h("div",
              {
                class: "operate-btn",
                style:{ color:'rgb(0, 156, 255)' },
                on: {
                  click: () => {
                    this.adminRole_type = "edit";
                    this.curInfo=params.row
                  }
                }
              },"编辑");
            const set_role = h("div",
              { class: "operate-btn", },"权限设置");
            const set_role_blue = h("div",
              {
                class: "operate-btn",
                style:{ color:'rgb(0, 156, 255)' },
                on: {
                  click: () => {
                    this.setAdminRole(params.row.id, params.index);
                    this.curInfo=params.row
                  }
                }
              },"权限设置");
              if(this.is_administrators==1){
                return [change_btn_blue, set_role_blue];
              }else{
                if(this.is_editRole == 1) {
                  return [change_btn_blue, set_role_blue];
                }else {
                  return [change_btn_blue, set_role];
                }
              }
          }
        }
      ],
      adminRoleList: []
    };
  },
  computed:{
    is_administrators(){
      return getStore('userInfo').is_administrators
    },
    is_editRole() {
      return getStore('userInfo').auth_setting
    }
  },
  watch: {
    is_set_role(n){
      if(n){
        this.getAuthRole()
      }
    }
  },
  methods: {
    // 获取列表数据
    getRoleList(page=1) {
      this.$store.commit('changeloading',true)
      this.pindex=page
      this.$api.getRoleList({limit:10,page:this.pindex}).then(data => {
        if (data.code === 200) {
          this.adminRoleList=data.data
          this.count=data.count
          this.$store.commit('changeloading',false)
        } else {
          this.$Message.error(data.msg);
          this.$store.commit('changeloading',false)
        }
      });
    },
    addRole(){
       this.adminRole_type = "add";
    },
    // 获取用户权限
    getAuthRole(){
      this.$api.getAuthRole({id:this.curInfo.id}).then(data=>{
        if(data.code===200){
          this.checkList=data.data.auth_ids.split(',')
          this.$api.getAllAuth().then(data=>{
          if(data.code===200){
            let arr=data.data
            arr.forEach((item,index)=>{
              if(this.checkList.indexOf(item.id.toString())>=0){
                item['checked']=true
              }
            })
            let result = arr.reduce((prev, item)=> {
              prev[item.pid] ? prev[item.pid].push(item) : prev[item.pid] = [item];
              return prev;
            }, {})
            for (let prop in result) {
              result[prop].forEach(function(item, i) {
                result[item.id] ? item.children = result[item.id] : ''
              });
            }
            result = result[0];
            this.treeContent=result
          }
        })
        }
      })
    },
    // 设置用户权限
    setAdminRole(){
      this.is_set_role=true
    },
    // tree结构
    renderContent(h, { root, node, data }) {
      return h("span",
        {
          style: {
            display: "inline-block",
            width: "100%",
            textAlign: "left"
          }
        },
        [
          h("span", [
            h("span", data.title)
          ]),
          h("span", {
            style: {
              display: "inline-block",
              float: "right",
              marginRight: "32px"
            }
          })
        ]
      );
    },
    // 返回
    return_last(pindex){
      this.adminRole_type='list'
      if(pindex){
        this.getRoleList(pindex)
      }
    },
    // 保存用户权限
    editUserRole(){
      let checknode=this.$refs.roletree.getCheckedAndIndeterminateNodes()
      let checkids=[]
      if(checknode.length!==0){
        for(let i of checknode){
          checkids.push(i.id)
        }
      }
      this.$api.setRuleRole({id:this.curInfo.id,auth_ids:checkids}).then(data=>{
        if(data.code===200){
          this.$Message.info('设置成功')
          this.is_set_role=false
        }else{
          this.$Message.info(data.msg)
          return
        }
      })
    },
    // 禁用状态
    disabledRole(id){
      this.$api.disabledRuleRole({id}).then(response => {
        if(response.code == 200) {
          this.$Message.success(response.msg)
          this.getRoleList()
        }else {
          this.$Message.info(response.msg)
          return
        }
      })
    },
     // 启用状态
    enabledRole(id) {
      this.$api.enabledRuleRole({id}).then(response => {
        if(response.code == 200) {
          this.$Message.success(response.msg)
          this.getRoleList()
        }else {
          this.$Message.info(response.msg)
          return
        }
      })
    }
  },
  created() {
    this.getRoleList();
  }
};
</script>
<style>
.add-adminrole-form{
  margin-top: 20px
}
.staff_list {
  width: 120px;
  margin-top: 15px;
  margin-left: 5px;
  font-size: 15px;
}
.add_staff_btn {
  margin-top: 10px;
}
</style>