<template>
  <div class="auth scroll-y">
    <div class="flex auth-content">
      <div class="box role-info auth-list">
        <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 auth-list">
        <div class="manageTitle">权限树</div>
        <div class="t30">
          <el-tree :data="data" show-checkbox :props="defaultProps" @node-click="handleNodeClick" />
        </div>
      </div>
      <div class="box auth-list">
        <div class="flex">
          <div class="manageTitle">权限规则</div>
          <el-radio-group v-model="auth">
            <el-radio label="1">显示权限</el-radio>
            <el-radio label="2">显示及编辑权限</el-radio>
          </el-radio-group>
        </div>
        <div class="t30">
          <el-form :model="form" class="demo-ruleForm">
            <el-form-item label="许可查询行">
              <el-input size="default" v-model="form.QueryRow" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="许可查询列">
              <el-input size="default" v-model="form.QueryCol" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="许可删除行">
              <el-input size="default" v-model="form.DeleteRow" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="许可新增列">
              <el-input size="default" v-model="form.NewCol" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="许可编辑行">
              <el-input size="default" v-model="form.EditRow" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="许可编辑列">
              <el-input size="default" v-model="form.EditCol" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
const ruleForm = reactive({
  roleName: "11",
  roleDesc: "22",
  roleStatus: "2",
});
const auth = ref("1");
const form = reactive({
  QueryRow: "",
  QueryCol: "",
  DeleteRow: "",
  NewCol: "",
  EditRow: "",
  EditCol: "",
});
interface Tree {
  label: string;
  children?: Tree[];
}

const handleNodeClick = (data: Tree) => {
  console.log(data);
};

const data: Tree[] = [
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
        children: [
          {
            label: "Level three 2-1-1",
          },
        ],
      },
      {
        label: "Level two 2-2",
        children: [
          {
            label: "Level three 2-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 3",
    children: [
      {
        label: "Level two 3-1",
        children: [
          {
            label: "Level three 3-1-1",
          },
        ],
      },
      {
        label: "Level two 3-2",
        children: [
          {
            label: "Level three 3-2-1",
          },
        ],
      },
    ],
  },
];

const defaultProps = {
  children: "children",
  label: "label",
};
</script>

<style lang="scss" scoped>
.auth {
  &-content {
    height: 100%;
  }
  &-list {
    flex: 1;
    margin-right: 24px;
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>