<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">
      <el-table-column prop="id" label="角色ID"></el-table-column>
      <el-table-column label="角色名称">
        <template slot-scope="scope">
          <el-button type="text" @click="rowClick(scope.row)"> {{scope.row.name}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" sortable></el-table-column>
      <el-table-column v-if="!$store.state.readonly" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini" plain type="primary" @click="edit(scope.row)"
            v-if="!$store.state.readonly">编辑
          </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" @sizeChange="onSizeChange"/>
    <el-dialog
      :title="dialog.title" center append-to-body
      :visible.sync="dialog.show" width="100vw" top="0">
      <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.refund"
                  v-if="data.cover ==='5-1'|| data.cover=== '5-10'|| data.cover=== '5-9'">退款</el-checkbox>
                <el-checkbox
                  v-model="data.refund"
                  v-if="data.cover ==='10-1' ">类别管理</el-checkbox>
                <el-checkbox
                  v-model="data.promoter"
                  v-if="data.cover ==='5-1' ">编辑推广人</el-checkbox>
                <!--class user teacher-->
                <el-checkbox
                  v-model="data.editWatch"
                  v-if="data.cover ==='2-3' || data.cover=== '3-1' || data.cover=== '3-2'">修改看课权限</el-checkbox>
                <el-checkbox
                  v-model="data.refund"
                  v-if="data.cover ==='2-3' || data.cover=== '3-1' || data.cover=== '3-2' || data.cover=== '3-6' || data.cover=== '3-7' ">添加观摩班用户</el-checkbox>
                <el-checkbox
                  v-model="data.classManage"
                  v-if="data.cover ==='2-3' || data.cover=== '3-1' || data.cover=== '3-2' || data.cover=== '3-6' || data.cover=== '3-7' ">添加带班班用户</el-checkbox>
                <el-checkbox
                  v-model="data.classManageUnlimited"
                  v-if="data.cover ==='2-3' || data.cover=== '3-1' || data.cover=== '3-2' || data.cover=== '3-6' || data.cover=== '3-7' ">添加观摩班(无限制)</el-checkbox>
                <el-checkbox
                  v-model="data.classTakeUnlimited"
                  v-if="data.cover ==='2-3' || data.cover=== '3-1' || data.cover=== '3-2' || data.cover=== '3-6' || data.cover=== '3-7' ">添加带班班(无限制)</el-checkbox>
                <el-checkbox
                  v-model="data.distribution"
                  v-if="data.cover ==='5-9' || data.cover ==='7-9'" @change="distribution">批量分配</el-checkbox>
                <el-checkbox
                  v-model="data.exportFinish"
                  v-if="data.cover === '2-3'">导出完课用户</el-checkbox>
                <el-checkbox
                  v-model="data.import"
                  v-if="data.cover ==='6-3' || data.cover ==='5-3' || data.cover ==='5-9' || data.cover ==='6-4'">导入</el-checkbox>
                <el-checkbox
                  v-model="data.export"
                  v-if="exportMenuList.indexOf(data.cover) >-1">导出</el-checkbox>
                <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: [],
        exportMenuList: [ // 导出权限
          '2-3', '5-10', '5-2', '5-1', '5-3', '5-8', '5-9', '6-4', '3-1', '3-6', '3-7', '7-9', '6-3', '10-8'
        ],
        dialog: {
          title: '新增角色',
          show: false,
          select: [],
          chooseed: [],
          rules: {
            name: [
              {required: true, message: '请填写角色名称', trigger: 'change'},
            ],
          },
          form: {
            name: '',
            menu_ids: [],
            id: ''
          }
        },
      }
    },
    created() {
      this.getList();
      this.getMenuList();
    },
    methods: {
      distribution(val) {
      },
      rowClick(data) {
        this.$router.push({name: 'admin', query: {roleId: data.id}})
      },
      getMenuList() {
        getMenuListApi().then(res => {
          if (res) {
            res.forEach(i => {
              if (i.children) {
                i.children.forEach(j => {
                  j.readonly = false;
                  j.delete = false;
                  if (this.exportMenuList.indexOf(j.cover) > -1) j.export = false;
                  if (j.cover === "5-9" || j.cover === "7-9") j.distribution = false;
                  if (j.cover === "6-3" || j.cover === "5-3" || j.cover === "5-9" || j.cover === "6-4") j.import = false;
                  if (j.name === '月课订单列表' || j.name === '日课订单列表' || j.name === "来源码管理"
                    || j.cover === "5-9" || j.cover === "2-3" || j.cover === "3-1" || j.cover === '3-2' || j.cover === "3-6" || j.cover === "3-7") j.refund = false;
                  if (j.cover === "2-3" || j.cover === "3-1" || j.cover === '3-2' || j.cover === "3-6" || j.cover === "3-7") {
                    j.classManageUnlimited = false;
                    j.classManage = false;
                    j.classTakeUnlimited = false;
                  }
                  if (j.cover === "2-3" || j.cover === "3-1" || j.cover === '3-2') {
                    j.editWatch = false;
                  }
                  if (j.cover === "2-3") j.exportFinish = false;
                  if (j.cover === "5-1") j.promoter = false;
                })
              }
            });
            this.dialog.select = res
          }
        })
      },
      onPageChange(val) {
        this.nowPage = val;
        this.getList();
      },
      onSizeChange(val) {
        this.nowPage = 1;
        this.limit = 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;
                  if (this.exportMenuList.indexOf(j.cover) > -1) j.export = false;
                  if (j.cover === "5-9" || j.cover === "7-9") j.distribution = false;
                  if (j.cover === "6-3" || j.cover === "5-3" || j.cover === "5-9" || j.cover === "6-4") j.import = false;
                  if (j.name === '月课订单列表' || j.name === '日课订单列表' || j.name === "来源码管理"
                    || j.cover === "5-9" || j.cover === "2-3" || j.cover === "3-1" || j.cover === '3-2' || j.cover === "3-6" || j.cover === "3-7") j.refund = false;
                  if (j.cover === "2-3" || j.cover === "3-1" || j.cover === '3-2' || j.cover === "3-6" || j.cover === "3-7") {
                    j.classManageUnlimited = false;
                    j.classManage = false;
                    j.classTakeUnlimited = false;
                  }
                  if (j.cover === "2-3" || j.cover === "3-1" || j.cover === '3-2') {
                    j.editWatch = false;
                  }
                  if (j.cover === "2-3") j.exportFinish = false;
                  if (j.cover === "5-1") j.promoter = 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);
              console.log(this.dialog.form.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;
                        if (this.exportMenuList.indexOf(i.cover) > -1) x.export = !!i.export;
                        if (i.cover === '5-1' || i.cover === '5-10' || i.cover === "10-1" || i.cover === "5-9" || i.cover === "2-3"
                          || i.cover === "3-1" || i.cover === '3-2' || i.cover === "3-6" || i.cover === "3-7") {
                          x.refund = !!i.refund;
                        }
                        if (i.cover === "2-3" || i.cover === "3-1" || i.cover === '3-2' || i.cover === "3-6" || i.cover === "3-7") {
                          x.classManage = !!i.classManage;
                          x.classManageUnlimited = !!i.classManageUnlimited;
                          x.classTakeUnlimited = !!i.classTakeUnlimited;
                        }
                        if (i.cover === "2-3" || i.cover === "3-1" || i.cover === '3-2') {
                          x.editWatch = !!i.editWatch;
                        }
                        if (i.cover === "6-3" || i.cover === "5-3" || i.cover === "5-9" || i.cover === "6-4") {
                          x.import = !!i.import;
                        }
                        if (i.cover === "5-9" || i.cover === "7-9") {
                          x.distribution = !!i.distribution;
                        }
                        if (i.cover === "2-3") {
                          x.exportFinish = !!i.exportFinish;
                        }
                        if (i.cover === "5-1") {
                          x.promoter = !!i.promoter;
                        }
                      }
                    })
                  }
                })
              });
              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 (i.refund === false || i.refund === true) {
                json.refund = i.refund
              }
              if (i.classManage === false || i.classManage === true) {
                json.classManage = i.classManage
              }
              if (i.classManageUnlimited === false || i.classManageUnlimited === true) {
                json.classManageUnlimited = i.classManageUnlimited
              }
              if (i.editWatch === false || i.editWatch === true) {
                json.editWatch = i.editWatch
              }
              if (i.classTakeUnlimited === false || i.classTakeUnlimited === true) {
                json.classTakeUnlimited = i.classTakeUnlimited
              }
              if (i.exportFinish === false || i.exportFinish === true) {
                json.exportFinish = i.exportFinish
              }
              if (i.promoter === false || i.promoter === true) {
                json.promoter = i.promoter
              }
              if (i.export === false || i.export === true) {
                json.export = i.export
              }
              if (i.import === false || i.import === true) {
                json.import = i.import
              }
              if (i.distribution === false || i.distribution === true) {
                json.distribution = i.distribution
              }
              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)
              };
              this.$confirm('此操作将修改该角色?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                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)
              };
              this.$confirm('此操作将添加新角色?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                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>