<template>
  <div class="bodyBoxs">
    <div class="boxs">
      <el-button type="primary" @click="showAddAdmin" size="mini" style="margin-bottom: 10px">新增角色</el-button>
      <el-table :data="tableData" style="width:100%;margin:0 auto;" v-loading="loading">
        <el-table-column prop="id" label="序列"/>
        <el-table-column prop="title" label="角色名称"/>
        <el-table-column prop="ord" label="排序"/>
        <el-table-column prop="updatedAt" label="最后修改时间"/>
        <el-table-column prop="updatedBy" label="最后更新人"/>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="showExit(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
            <el-button @click="deleteRole(scope.row.id)" type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination align="left" layout="prev, pager, next, jumper,total" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"/>
      <el-dialog
        :title="title"
        :visible.sync="showExitState"
        width="400px"
        :before-close="handleClose">
        <el-form ref="forms" :model="form" label-width="100px">
          <el-form-item label="角色名" prop="title">
            <el-input v-model="form.title" max="20"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="ord">
            <el-input v-model="form.ord" max="20"></el-input>
          </el-form-item>
          <el-form-item label="权限列表" prop="rights">
            <el-checkbox-group v-model="form.rights">
              <div v-for="(item,index) in menus" style="border: 1px solid rgb(220,223,230);margin: 5px;padding: 5px 5px 5px 15px;border-radius: 5px">
                <el-checkbox  :label="item.title" :checked="right.lastIndexOf(item.id) >= 0 ? true : false"/>
                <br/>
                <el-checkbox  v-for="items in item.children" :label="items.title" :checked="right.lastIndexOf(items.id) >= 0 ? true : false" />
              </div>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                  <el-button @click="handleClose">取 消</el-button>
                  <el-button :loading="loading"type="primary" @click="exitData">确 定</el-button>
                </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import {getToken} from "@/utils/auth";

  export default {
    data() {
      return {
        form: {
          id: 0,
          title: '',
          ord: '',
          rights: [],
        },
        menus: [],
        right: [],
        title: '新增角色',
        showExitState: false,
        tableData: [],
        loading: false,
        total: 0,
        pages: 1,
        pageSize: 15,
      }
    },
    created() {
      this.getListData();
    },
    methods: {
      isExitsVariable(variableName) {
        try {
          if (typeof (variableName) == "undefined") {
            return false;
          } else {
            return true;
          }
        } catch (e) {
        }
        return false;
      },
      exitData() {
        this.loading = true;
        this.$api.setRole(
          {
            id: this.form.id,
            title: this.form.title,
            ord: this.form.ord,
            right_id: this.form.rights,
          }
        ).then((res) => {
          if (res.code === 0) {
            this.$message({
              message: res.message,
              type: 'success'
            });
            this.showExitState = false
            this.getListData();
          } else {
            this.$message({
              message: res.message,
              type: 'warning'
            });
          }
        }).catch((res) => {
          this.loading = false;
        })
      },
      deleteRole(id) {
        this.$confirm('确定删除该角色，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true;
          this.$api.deleteRoleById({
            id: id,
          }).then((res) => {
            if (res.code === 0) {
              this.$message({
                message: res.message,
                type: 'success'
              });
              this.getListData();
            } else {
              this.$message({
                message: res.message,
                type: 'warning'
              });
            }
          }).catch((res) => {
            this.loading = false;
          })
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消'
          });
        });
      },
      getListData() {
        this.loading = true;
        this.$api.getRoles({
          size: this.pageSize,
          page: this.pages
        }).then((res) => {
          this.loading = false;
          if (res.code === 0) {
            this.tableData = res.data.data;
            this.total = res.data.total;
            this.menus = res.data.menus
            console.log(this.menus)
          } else {
            this.$message(res.message);
          }
        }).catch((res) => {
          this.loading = false;
        });
      },
      handleCurrentChange(val) {
        this.pages = val;
        this.getListData();
      },
      handleEdit(i, r) {
        console.log(i, r)
      },
      rowStyle() {
        return "text-align:center;border:none;color:#727272";
      },
      headerStyle() {
        return "text-align:center;background:#3f88bb;font-weight:blod;color:#fff"
      },
      showExit(row) {
        console.log(row)

        this.title = '编辑角色';
        this.showExitState = true;
        this.form.id = row.id
        this.form.title = row.title;
        this.form.ord = row.ord
        this.right = row.rights
        console.log(this.right)

      },
      handleClose(res) {
        // console.log(res)
        // console.log(this.$refs["forms"])
        this.$refs["forms"].resetFields();
        this.showExitState = false;
        // console.log(this.menus)
        // console.log(this.right)
        this.menus = [];
        this.right = [];
      },
      showAddAdmin() {
        this.title = '新增角色';
        this.showExitState = true;
        this.from.id = 0
        this.from.title = ''
        this.from.ord = ''
        this.menusList = []
        this.rights = []
        console.log(this.right)
      }
    }
  }
</script>
<style scoped>
  .bodyBoxs {
    padding:15px;
  }

  .boxs {
    width: 100%;
    background: #fff;
    padding:15px;
    border-radius: 15px;
  }

  .titles {
    width: 100%;
    height: 90px;
    /*border-bottom: 1px solid #ababab;*/
    line-height: 90px;
    font-size: 26px;
    color: #1b1b1b;
    padding-left: 20px;
    font-weight: bold;
  }


</style>
