<template>
  <div style="font-weight: bold; font-size: 16px; margin-top: 12px;margin-bottom: 12px;">权限设置</div>
  <div>
    <div class="permission-area" :class="{ 'disabled': disabled }">
      <div class="all-select">
        <el-checkbox :model-value="allSelected" @change="onAllChange" :disabled="disabled">全选</el-checkbox>
      </div>
      <div class="permission-list">
        <div v-for="(item, index) in permissionList" :key="index" class="permission-item">
          <div class="permission-header" @click="!disabled && item.children && item.children.length > 0 && toggleExpand(item)">
            <div class="left">
              <span class="expand-icon-placeholder">
                <el-icon v-if="item.children && item.children.length > 0" class="expand-icon" :class="{ expanded: item.expanded }">
                  <component :is="item.expanded ? 'ArrowDown' : 'ArrowRight'" />
                </el-icon>
              </span>
              <el-checkbox 
                v-model="item.selected"
                :indeterminate="item.indeterminate"
                :disabled="disabled"
                @change="val => emit('permission-change', item, val)"
              >
                {{ item.name }}
              </el-checkbox>
            </div>
            <div class="right">
              <el-tag size="small" v-if="item.children && item.children.length > 0">{{ item.children.length }}</el-tag>
            </div>
          </div>
          <div v-if="item.children" class="sub-permissions" v-show="item.expanded">
            <el-checkbox 
              v-for="child in item.children" 
              :key="child.id"
              v-model="child.selected"
              :disabled="disabled"
              @change="val => emit('sub-permission-change', item, child, val)"
            >
              {{ child.name }}
            </el-checkbox>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ArrowRight, ArrowDown } from '@element-plus/icons-vue'

// 定义组件名称
defineOptions({
  name: 'PermissionArea'
})

// 定义props
const props = defineProps({
  permissionList: {
    type: Array,
    required: true
  },
  allPermissionsSelected: {
    type: Boolean,
    required: true
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

// 定义emit
const emit = defineEmits(['update:allPermissionsSelected', 'permission-change', 'sub-permission-change'])

// 定义响应式数据
const allSelected = ref(props.allPermissionsSelected)

// 监听props变化
watch(() => props.allPermissionsSelected, (newVal) => {
  allSelected.value = newVal
})

// 方法
const toggleExpand = (item) => {
  item.expanded = !item.expanded
}

const onAllChange = (val) => {
  allSelected.value = val
  emit('update:allPermissionsSelected', val)
}
</script>

<style scoped>
.permission-area {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 350px;
  overflow-y: auto;
}
.all-select {
  padding: 2px 12px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #dcdfe6;
}
.permission-list {
  padding: 12px;
}
.permission-item {
  border-bottom: 1px solid #ebeef5;
}
.permission-item:last-child {
  border-bottom: none;
}
.permission-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 0;
  cursor: pointer;
  gap: 12px;
}
.permission-header .left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sub-permissions {
  padding: 5px 0 5px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: #f8f9fb;
  border-top: 1px solid #ebeef5;
}
.sub-permissions .el-checkbox {
  margin-left: 0 !important;
}
.expand-icon-placeholder {
  display: inline-block;
  min-width: 22px;
  height: 22px;
  vertical-align: middle;
}
.expand-icon {
  min-width: 22px;
  text-align: center;
  display: inline-flex;
}
</style>
