<!--
 * @Author: Guanghao
 * @Date: 2021-12-31 14:29:34
 * @LastEditors: Guanghao
 * @LastEditTime: 2022-01-04 09:49:49
 * @Description: 后台管理-授权管理页面
-->

<template>
  <div class="authorization back-column-two">
    <!-- 左侧-列表 -->
    <div class="column-left">
      <div class="title back-title">
        {{ $route.meta.title }}
        <el-button class="authorization-new" icon="el-icon-circle-plus">
          新建身份
        </el-button>
      </div>

      <el-input
        v-model="inputauthorization"
        prefix-icon="el-icon-search"
        placeholder="请输入"
      />

      <div class="authorization-list">
        <ul class="list-ul">
          <li
            class="list-li"
            v-for="authorization in authorizationList"
            :key="authorization"
          >
            {{ authorization }}
          </li>
        </ul>
      </div>
    </div>

    <!-- 右侧-内容 -->
    <div class="column-right">
      <ul class="auth-first-ul">
        <li v-for="firstAuth in authList" :key="firstAuth.text">
          <el-checkbox v-model="firstAuth.checked">
            {{ firstAuth.text }}
          </el-checkbox>
          <ul class="auth-second-ul">
            <li v-for="secondAuth in firstAuth.children" :key="secondAuth.text">
              <el-checkbox v-model="secondAuth.checked">
                {{ secondAuth.text }}
              </el-checkbox>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Authorization",

  data() {
    return {
      inputauthorization: "", // 角色搜索内容
      authorizationList: ["普通用户", "一级用户", "二级用户"],
      titleList: [
        {
          prop: "name",
          label: "伙伴名称",
        },
        {
          prop: "department",
          label: "部门",
        },
        {
          prop: "authorization",
          label: "角色",
        },
        {
          prop: "status",
          label: "账号状态",
        },
      ],
      dataList: [
        {
          name: "李杰",
          department: "战略支持部",
          authorization: "系统管理员",
          status: "正常",
        },
        {
          name: "李杰",
          department: "战略支持部",
          authorization: "系统管理员",
          status: "正常",
        },
        {
          name: "李杰",
          department: "战略支持部",
          authorization: "系统管理员",
          status: "正常",
        },
        {
          name: "李杰",
          department: "战略支持部",
          authorization: "系统管理员",
          status: "异常",
        },
      ],
      authList: [
        {
          text: "全部",
          checked: false,
          children: [],
        },
        {
          text: "产品",
          children: [
            {
              text: "查看",
              checked: true,
            },
            {
              text: "新建产品",
              checked: false,
            },
          ],
        },
      ],
    };
  },

  methods: {
    // 切换tab
    handleTabClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/scss/Back/back.scss";

.authorization {
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid $theme-background-light;
    margin-bottom: 20px;

    .authorization-new {
      padding: 0;
      border: none;
      color: #347eff;

      &:hover {
        background-color: transparent;
      }
    }
  }

  .authorization-list {
    .list-ul {
      margin-top: 20px;

      .list-li {
        height: 36px;
        padding-left: 20px;
        line-height: 36px;
        cursor: pointer;

        &:hover {
          background-color: rgba(52, 126, 255, 0.1);
          // opacity: 0.1;
          color: #347eff;
        }
      }
    }
  }

  .content-top {
    display: flex;
    justify-content: space-between;
  }

  .auth-first-ul {
    & > li {
      margin-bottom: 20px;

      & > .el-checkbox {
        font-weight: 700;
      }
    }
  }

  .auth-second-ul {
    display: flex;

    li {
      margin-left: 20px;

      &:first-child {
        margin-left: 0;
      }
    }
  }
}
</style>
