<template>
  <div class="auth scroll-y">
    <div class="flex auth-content">
      <div class="role-info auth-list">
        <div class="box strategy-top">
          <div class="manageTitle">账号信息</div>
          <div class="role-info-content t30">
            <el-form ref="ruleFormRef" :model="ruleForm" class="demo-ruleForm">
              <el-form-item label="角色名称" prop="roleName">
                <el-input disabled v-model="ruleForm.roleName" size="default" placeholder="请输入角色名称" />
              </el-form-item>
              <el-form-item label="角色描述" prop="roleDesc">
                <el-input disabled v-model="ruleForm.roleDesc" size="default" type="textarea" :rows="3" placeholder="请输入角色描述" />
              </el-form-item>
              <el-form-item label="是否启用" prop="roleStatus">
                <el-radio-group disabled v-model="ruleForm.roleStatus">
                  <el-radio label="1">启用</el-radio>
                  <el-radio label="2"> 禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="box strategy-bottom strategy">
          <div class="manageTitle">登录策略</div>
          <div class="strategy-content">
            <el-scrollbar>
              <el-checkbox-group v-model="checkboxGroup" size="default">
                <el-row :gutter="16">
                  <el-col :span="8" v-for="item in groupData" :key="item.id">
                    <div class="strategy-content-list">
                      <el-checkbox class="ck" :title="item.label" :label="item.value">
                        {{ item.label }}
                      </el-checkbox>
                      <el-button style="margin-top:8px" size="default" type="primary" link>查看</el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-checkbox-group>
            </el-scrollbar>
          </div>
        </div>
      </div>
      <div class="box auth-list">
        <div class="manageTitle">角色</div>
        <div class="strategy auth-tree">
          <div class="strategy-content">
            <el-scrollbar>
              <el-checkbox-group v-model="roleGroup" size="default">
                <el-row :gutter="16">
                  <el-col :span="8" v-for="item in roleData" :key="item.id">
                    <div class="strategy-content-list">
                      <el-checkbox class="ck" :title="item.label" :label="item.value">
                        {{ item.label }}
                      </el-checkbox>
                    </div>
                  </el-col>
                </el-row>
              </el-checkbox-group>
            </el-scrollbar>
          </div>
        </div>
      </div>
      <div class="box auth-list">
        <div class="manageTitle">权限名称</div>
        <div class="auth-name flex-wrap">
          <span class="auth-name-list"> <span class="icon icon-time"></span> 时效规则有</span>
          <span class="auth-name-list"> <span class="icon icon-date"></span> 数据规则有</span>
          <span class="auth-name-list"> <span class="icon icon-ic_display_edit"></span> 显示及编辑权限</span>
          <span class="auth-name-list"> <span class="icon icon-ic_display"></span> 显示权限</span>
        </div>
        <div class="auth-box">
          <div class="strategy-content">
            <el-scrollbar>
              <el-row :gutter="16">
                <el-col :span="8" v-for="item in roleData" :key="item.id">
                  <div class="strategy-content-list">
                    <div class="flex info">
                      <div class="name">{{item.label}}</div>
                      <el-button size="default" type="primary" link>查看</el-button>
                    </div>
                    <div class="auth-name flex-wrap">
                      <span class="auth-name-list"> <span class="icon icon-time"></span></span>
                      <span class="auth-name-list"> <span class="icon icon-date"></span></span>
                      <span class="auth-name-list"> <span class="icon icon-ic_display_edit"></span></span>
                      <span class="auth-name-list"> <span class="icon icon-ic_display"></span> </span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeMount } from "vue";
const ruleForm = reactive({
  roleName: "11",
  roleDesc: "22",
  roleStatus: "2",
});
const checkboxGroup = ref([1, 2]);
const roleGroup = ref([1, 2]);
const groupData = [
  {
    label: "策略名称",
    value: 1,
    id: 1,
  },
];
const roleData = [
  {
    label: "系统开发工程师",
    value: 1,
    id: 1,
  },
];
onBeforeMount(() => {
  for (let i = 0; i < 50; i++) {
    groupData.push({
      label: "策略名称",
      value: i + 2,
      id: i + 2,
    });
    roleData.push({
      label: "系统开发工程师",
      value: i + 2,
      id: i + 2,
    });
  }
});
</script>

<style lang="scss" scoped>
.auth {
  &-content {
    height: 100%;
  }
  &-list {
    flex: 1;
    margin-right: 24px;
    &:last-child {
      margin-right: 0;
    }
    .strategy-top {
      height: 310px;
    }
    .strategy-bottom {
      height: calc(100% - 335px);
    }
    .strategy {
      margin-top: 24px;
      &-content {
        height: calc(100% - 24px);
        &-list {
          padding: 8px 16px 16px 16px;
          height: 80px;
          background: #f5f7fa;
          box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          margin-top: 16px;
          :deep .ck {
            display: flex;
            justify-content: space-between;
            flex-direction: row-reverse;
            .el-checkbox__label {
              max-width: 80%;
              overflow: hidden;
              padding-left: 0;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    .auth-tree {
      margin-top: 14px;
      height: calc(100% - 44px);
      .strategy-content {
        height: 100%;
      }
    }
    .auth-name {
      margin-top: 16px;
      &-list {
        color: #afb4bf;
        margin-right: 30px;
        &:last-child {
          margin-right: 0;
        }
        .icon {
          width: 14px;
          height: 14px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          margin-right: 8px;
          position: relative;
          top: 2px;
        }
        .icon-time {
          background-image: url("@/assets/index/ic_time.png");
        }
        .icon-date {
          background-image: url("@/assets/index/ic_date.png");
        }
        .icon-ic_display_edit {
          background-image: url("@/assets/index/ic_display_edit.png");
        }
        .icon-ic_display {
          background-image: url("@/assets/index/ic_display.png");
        }
      }
    }
    .auth-box {
      margin-top: 14px;
      height: calc(100% - 70px);
      .strategy-content {
        height: 100%;
      }
      .auth-name-list {
        margin-right: 0;
      }
      .info {
        margin-top: 6px;
        .name {
          max-width: 80%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>