<template>
  <div class="role">
    <div class="head">
      <el-button @click="add" plain type="success">新增角色</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="menu_ids"
        label="菜单IDs">
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="创建时间">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini" plain type="primary" @click="edit(scope.row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" plain @click="del(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :nowPage="nowPage" :total="total"/>
    <el-dialog
      :title="dialog.title"
      center
      append-to-body
      :visible.sync="dialog.show"
      width="30%">
      <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="菜单选项" prop="menu_ids">
          <el-select v-model="dialog.form.menu_ids" multiple placeholder="请选择">
            <el-option
              v-for="item in dialog.select"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </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 {
    name: "menu",
    components:{
      page
    },
    data(){
      return {
        nowPage:1,
        total:0,
        roleList:[],
        dialog:{
          title:'新增角色',
          show:false,
          select:[],
          rules: {
            name: [
              {required: true, message: '请填写角色名称', trigger: 'change'},
            ],
            menu_ids: [
              {required: true, message: '请选择菜单', trigger: 'change'},
            ]
          },
          form:{
            name:'',
            menu_ids:[],
            id: ''
          }
        },
      }
    },
    created(){
      this.getList()
    },
    methods:{
      getMenuList(){
        getMenuListApi().then(res=>{
          if (res) {
            this.dialog.select = res
          }
        })
      },
      getList(){
        getRoleListApi().then(res=>{
          if (res) {
            this.roleList = res.list;
            this.total = res.total;
          }
        })
      },
      edit(data){
        this.dialog.form.id = data.id;
        this.dialog.title = '编辑角色';
        this.getMenuList();
        getRoleDetailApi(data.id).then((res)=>{
          this.dialog.form.name = res.name
          let _ids = res.menu_ids.split(',').map((item)=>{
              return parseInt(item);
          })
          this.dialog.form.menu_ids = _ids
          this.dialog.show = true;
        })
      },
      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 dia = this.dialog;
            if(dia.form.id){
              let json = {
                name:dia.form.name,
                menu_ids:dia.form.menu_ids.join(',')
              };
              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:dia.form.menu_ids.join(',')
              };
              saveRoleApi(json).then(()=>{
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
                dia.show = false;
                this.getList()
              })
            }
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .role{
  .head{
    padding: 5px;
  }
  width: 100%;
  padding: 10px;
  .page-div{
    text-align: center;
    padding-top: 20px
  }
  }
</style>