<template>
  <div class="role">
    <div class="head clear-both">
      <el-button @click="add" plain type="success" style="float: right" v-if="!$store.state.readonly">新增角色</el-button>
    </div>
    <el-table
      :data="roleList"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="角色ID">
      </el-table-column>
      <el-table-column
        prop="name"
        label="角色名称">
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="创建时间">
      </el-table-column>
      <el-table-column
        v-if="!$store.state.readonly"
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini" plain type="primary" v-if="!$store.state.readonly" @click="edit(scope.row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" plain @click="del(scope.row)" v-if="$store.state.deletePermission && !$store.state.readonly">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange"/>
    <el-dialog
      :title="dialog.title"
      center
      append-to-body
      :visible.sync="dialog.show"
      width="40%">
      <el-form ref="form" :rules="dialog.rules" :model="dialog.form" label-width="100px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="dialog.form.name"></el-input>
        </el-form-item>
        <el-form-item label="菜单选项">
          <div class="custom-tree-container">
          <el-tree :data="dialog.select"
                   show-checkbox
                   node-key="id"
                   ref="tree"
                   :default-checked-keys="dialog.chooseed"
                   default-expand-all
                   :expand-on-click-node="false"
                   :props="{children:'children',label:'name',value:false}">
             <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span v-if="data.pid !== 0">
                  <el-checkbox v-model="data.readonly">只读</el-checkbox>
                  <el-checkbox v-model="data.delete">删除</el-checkbox>
              </span>
            </span>
          </el-tree>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.show = false">取 消</el-button>
        <el-button type="primary" @click="sub">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {getMenuListApi,getRoleListApi,getRoleDetailApi,delRoleApi,updateRoleApi,saveRoleApi} from "../../service/api";
  import page from '../framework/page'
  export default {
    components:{
      page
    },
    data(){
      return {
        nowPage:1,
        total:0,
        limit: 10,
        roleList:[],
        dialog:{
          title:'新增角色',
          show:false,
          select:[],
          chooseed:[],
          rules: {
            name: [
              {required: true, message: '请填写角色名称', trigger: 'change'},
            ],
          },
          form:{
            name:'',
            menu_ids:[],
            id: ''
          }
        },
      }
    },
    created(){
      this.getList();
      this.getMenuList();
    },
    methods:{
      getMenuList(){
        getMenuListApi().then(res=>{
          if (res) {
            res.forEach(i=>{
              if(i.children){
                i.children.forEach(j=>{
                  j.readonly= false;
                  j.delete = false;
                })
              }
            });
            this.dialog.select = res
          }
        })
      },
      onPageChange(val){
        this.nowPage = val;
        this.getList();
      },
      getList(){
        let json = {
            limit: this.limit,
            page: this.nowPage
        };
        getRoleListApi(json).then(res=>{
          if (res) {
            this.roleList = res.list;
            this.total = res.total;
          }
        })
      },
      edit(data){
        this.dialog.form.id = data.id;
        this.dialog.title = '编辑角色';
        getMenuListApi().then(res=>{
          if (res) {
            res.forEach(i=>{
              if(i.children){
                i.children.forEach(j=>{
                  j.readonly= false;
                  j.delete = false;
                })
              }
            });
            this.dialog.select = res;
            getRoleDetailApi(data.id).then((res)=>{
              this.dialog.form.name = res.name;
              this.dialog.form.menu_ids = JSON.parse(res.menu_ids);
              this.dialog.chooseed  = [];
              this.dialog.form.menu_ids.forEach(i=>{
                this.dialog.chooseed .push(i.id);
                this.dialog.select.forEach(j=>{
                  if(j.children){
                    j.children.forEach(x=>{
                      if(x.id===i.id){
                        x.readonly = !!i.readonly;
                        x.delete = !!i.delete;
                      }
                    })
                  }
                })
              });
              this.dialog.show = true;
              this.$nextTick(function () {
                this.$refs.tree.setCheckedKeys(this.dialog.chooseed);
              })
            })
          }
        });

      },
      add(){
        this.dialog.show = true;
        this.dialog.form.id = '';
        this.dialog.title = '新增菜单';
        this.dialog.form.name = '';
        this.dialog.form.menu_ids = [];
        this.getMenuList();
      },
      del(data){
        this.$confirm('此操作将删除该角色?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delRoleApi(data.id).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList()
          });
        });
      },
      sub(){
        this.$refs['form'].validate((valid) => {
          if(valid){
            let checked = this.$refs.tree.getCheckedNodes();
            let menu_ids = [];
            checked.forEach(i=>{
              let json;
              if(i.readonly === false || i.readonly === true){
                json = {id:i.id,cover:i.cover,readonly:i.readonly}
              }
              if(i.delete === false || i.delete === true){
                json.delete = i.delete
              }
              if(json){
                menu_ids.push(json)
              }
            });
            let dia = this.dialog;
            if(dia.form.id){
              let json = {
                name:dia.form.name,
                menu_ids:JSON.stringify(menu_ids)
              };
              updateRoleApi(dia.form.id,json).then(()=>{
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                });
                dia.show = false;
                this.getList()
              })
            }else{
              let json = {
                name:dia.form.name,
                menu_ids:JSON.stringify(menu_ids)
              };
              saveRoleApi(json).then(()=>{
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
                dia.show = false;
                this.getList()
              })
            }
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .role{
  .head{
    margin-bottom: 10px;
  }
  width: 100%;
  padding: 20px 0;
  .page-div{
    text-align: center;
    padding-top: 20px
  }
  }
  .clear-both{
  &:after{
     content: '';
     display: block;
     clear: both;
   }
  }
</style>