<template>
  <div class="members">
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <h1 class="headerTitle">企业设置/角色管理</h1>
      </el-col>
      <el-col :span="3">
        <span>
          <el-button type="primary" v-if="MembersBtn.MembersBtn20" size="mini" plain @click="AddUserModal" round>新增角色</el-button>
        </span>
      </el-col>
    </el-row>
    <div class="membersBody">
      <div>
        <span>
          总记录条数
          <i>{{listPage.total}}</i>条
        </span>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{'background-color': '#fafafa','font-weight':'800'}"
      >
        <el-table-column prop="name" label="角色名" min-width="100"></el-table-column>
        <el-table-column prop="createUserName" label="创建人" min-width="80"></el-table-column>
        <el-table-column prop="createDate" label="创建时间" min-width="100"></el-table-column>
        <el-table-column prop="description" label="角色描述" min-width="100"></el-table-column>
        <el-table-column label="操作" min-width="160">
          <template slot-scope="{row,$index}">
            <div>
              <el-button @click="toViewUser(row,$index)" size="mini" plain type="primary" round>查看</el-button>
              <el-button
                @click="editorViewUser(row,$index)"
                type="warning"
                size="mini"
                plain
                round
              >编辑</el-button>
              <el-button @click="delViewUser(row,$index)" type="success" size="mini" plain round>删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagenation">
        <span>
          <el-pagination
            background
            layout="prev, pager, next, sizes, total, jumper"
            :total="listPage.total"
            @current-change="TurnThepage"
            @size-change="handleSizeChange"
            :page-sizes="[5,15, 25, 50]"
            :page-size="listPage.pageSize"
            @prev-click="customerPrev"
            @next-click="customerNext"
          ></el-pagination>
        </span>
      </div>
    </div>
    <el-dialog
      :title="Totaltext.title"
      :visible.sync="isModal.isAdd"
      width="880px"
      :before-close="addClose"
      class="addModal"
    >
      <div class="userForm">
        <el-row type="flex" justify="start" class="mb15">
          <el-col :span="2">
            <span class="nameText">角色名称:</span>
          </el-col>
          <el-col :span="8">
            <el-input placeholder="请输入角色名称" v-model="addUserData.name"></el-input>
          </el-col>
        </el-row>
        <el-row type="flex" justify="start" class="mb15">
          <el-col :span="2">角色描述:</el-col>
          <el-col :span="16">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="addUserData.description"
            ></el-input>
          </el-col>
        </el-row>
        <div class="mb15">
          <span>角色菜单及权限：</span>
        </div>

        <div class="radioList">
          <el-row type="flex" justify="space-between" class="listModal">
            <el-col :span="5">
              <span>主菜单</span>
            </el-col>
            <el-col :span="5">
              <span>子菜单</span>
            </el-col>
            <el-col :span="14">
              <span>操作权限</span>
            </el-col>
          </el-row>
          <el-checkbox-group v-model="checkList">
            <el-row
              v-for="(item,index) in menuList.data"
              :key="index"
              type="flex"
              justify="space-between"
              class="border1"
            >
              <el-col :span="4" :offset="1">
                <div>
                  <el-checkbox
                    :label="item.id"
                    v-model="item.id"
                    :checked="item.checked"
                    :disabled="isModal.isCheck"
                    @change="changeOne(item)"
                  >{{item.name}}</el-checkbox>
                </div>
              </el-col>
              <el-col :span="19">
                <el-row
                  v-for="(itemTwo,iTwo) in item.children"
                  :key="iTwo"
                  type="flex"
                  justify="space-between"
                >
                  <el-col :span="7" :offset="2">
                    <div>
                      <el-checkbox
                        :disabled="isModal.isCheck"
                        :label="itemTwo.id"
                        v-model="itemTwo.checked"
                        :checked="itemTwo.checked"
                        @change="changeState(index,item,itemTwo)"
                      >{{itemTwo.name}}</el-checkbox>
                    </div>
                  </el-col>
                  <el-col :span="16" :offset="1" class="FlexContair">
                    <el-row type="flex" justify="start  ">
                      <el-col
                        :span="8"
                        v-for="(itemThree,iThree) in itemTwo.children"
                        :key="iThree"
                      >
                        <div>
                          <el-checkbox
                            :disabled="isModal.isCheck"
                            :label="itemThree.id"
                            v-model="itemThree.id"
                            :checked="itemThree.checked"
                            @change="changeState2(index,item,iTwo,itemTwo,itemThree)"
                          >{{itemThree.name}}</el-checkbox>
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-checkbox-group>
        </div>
        <div class="marT10 TXc">
          <el-button type="primary" size="mini" @click="addUser">确定</el-button>
          <el-button type="primary" plain size="mini" @click="addClose">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {},
  name: "Members",
  data() {
    return {
      activeName: "first",
      tableData: [],
      listPage: {
        pageNum: 1,
        pageSize: 15,
        total: 0
      },
      isModal: {
        isAdd: false,
        isCheck: true
      },
      Totaltext: {
        title: "",
        isEditor: true,
        isUrl: true
      },
      addUserData: {
        name: "",
        description: ""
      },
      updateId: {},
      menuList: {},
      menuListId: {
        one: [],
        two: [],
        three: []
      },
      checkList: [],
      MembersBtn:{
        MembersBtn20:0,
        MembersBtn21:0,
      }
    };
  },
  created() {
    var MembersBtn = {}
    this.getButton(19).then(result => {
      if (result.data.statusCode==="1") {
        MembersBtn = result.data.data
        MembersBtn.map((item)=>{
          if(item.id==20){
            this.MembersBtn.MembersBtn20 = item.checked?1:0 
          }else if(item.id==21){
            this.MembersBtn.MembersBtn21 = item.checked?1:0  
          }
        })
      }
    });
  },
  mounted() {
    this.getuserlist();
  },
  methods: {
    //  获取列表
    getuserlist() {
      var url = "system/role/list";
      var param = {
        pageSize: this.listPage.pageSize,
        pageNum: this.listPage.pageNum,
        companyId: JSON.parse(sessionStorage.getItem("companyID")).id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode == "1") {
          this.tableData = res.data.rows;
          this.listPage.total = res.data.total;
        }
      });
    },
    // 查看
    toViewUser(row, i) {
      this.Totaltext = {
        title: "查看角色",
        isEditor: true,
        isUrl: false
      };
      this.addUserData = {
        name: row.name,
        description: row.description
      };
      this.updateId = row;
      var url = "system/menu/list";
      var param = {
        companyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        roleId: row.id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.menuList = res;
        } else {
          this.$message({
            type: "info",
            message: res.message
          });
        }
      });
      this.isModal.isCheck = true;
      this.isModal.isAdd = true;
    },
    // 编辑
    editorViewUser(row, i) {
      this.Totaltext = {
        title: "编辑角色",
        isEditor: true,
        isUrl: false
      };
      this.isModal.isAdd = true;
      this.isModal.isCheck = false;
      this.addUserData = {
        name: row.name,
        description: row.description
      };
      this.updateId = row;
      var url = "system/menu/list";
      var param = {
        companyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        roleId: row.id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.menuList = res;
        }
      });
    },
    // 删除
    delViewUser(row, i) {
      var _this = this;
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var url = "system/role/delete";
          var param = { id: row.id };
          _this.axios.post(url, param).then(res => {
            if (res.statusCode === "1") {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              _this.getuserlist();
            } else {
              this.$message(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 新增
    AddUserModal() {
      this.isModal.isCheck = false;
      this.isModal.isAdd = true;
      this.Totaltext = {
        title: "新增角色",
        isEditor: true,
        isUrl: true
      };
      var url = "system/menu/list";
      var param = {
        companyId: JSON.parse(sessionStorage.getItem("companyID")).id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.menuList = res;
        }
      });
    },
    // 确定新增
    addUser() {
      var menuId = this.checkList.join(",");
      var url = this.Totaltext.isUrl ? "system/role/add" : "system/role/update";
      var param = this.Totaltext.isUrl
        ? {
            name: this.addUserData.name,
            description: this.addUserData.description,
            companyId: JSON.parse(sessionStorage.getItem("companyID")).id,
            userId: JSON.parse(sessionStorage.getItem("user")),
            menuIds: this.checkList.join(",")
          }
        : {
            id: this.updateId.id,
            name: this.addUserData.name,
            description: this.addUserData.description,
            companyId: JSON.parse(sessionStorage.getItem("companyID")).id,
            menuIds: this.checkList.join(",")
          };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.$message({
            type: "success",
            message: res.message
          });
          this.addClose();
        } else {
          this.$message(res.message);
        }
      });
    },
    // 新增关闭
    addClose() {
      this.isModal.isAdd = false;
      this.menuList = {};
      this.checkList = [];
      this.addUserData = { name: "", description: "" };
      this.getuserlist();
    },
    // 判断是否选了上级
    changeState(...age) {
      var _this = this;
      if (age[2].children) {
        if (_this.checkList.indexOf(age[2].id) === -1) {
             _this.checkList = _this.checkList.filter(value => {
            return age[2].children.every(item => {
              return value !== item.id;
            });
          });
        } else {
            age[2].children.map(item=>{
            _this.checkList.push(item.id)
            return;
          })
        }
      }
      if (_this.checkList.indexOf(age[1].id) === -1)
        _this.checkList.push(age[1].id);
    },
    changeState2(...age) {
      // 判断是勾选还是取消
      var _this = this;
      if (_this.checkList.indexOf(age[3].id) === -1)
        _this.checkList.push(age[3].id);
      if (_this.checkList.indexOf(age[1].id) === -1)
        _this.checkList.push(age[1].id);
    },
    changeOne(item) {
      var _this = this;
      if (item.children) {
        var a = [];
        for (var i of item.children) {
          a.push(i.id);
          if (i.children) {
            for (var j of i.children) {
              a.push(j.id);
            }
          }
        }
        _this.checkList = _this.checkList.filter(value => {
          return a.every(item => {
            return value !== item;
          });
        });
      }
    },
    // 翻页
    TurnThepage(val) {
      this.listPage.pageNum = val;
      this.getuserlist();
    },
    // 条数更改
    handleSizeChange(val) {
      this.listPage.pageSize = val;
      this.listPage.pageNum = 1;
      this.getuserlist();
    },
    // 上一页
    customerPrev(val) {
      this.listPage.pageNum = val;
      this.getuserlist();
    },
    // 下一页
    customerNext(val) {
      this.listPage.pageNum = val;
      this.getuserlist();
    }
  }
};
</script>