<template>
  <div class="permission-config">
    <!-- <div class="config-header" @click="togglePanel">
      <img src="../../assets/lock.png" alt="permission" class="config-icon" />
      <span>权限配置</span>
      <img
        :src="isPanelOpen ? upIcon : downIcon"
        alt="toggle"
        class="toggle-icon"
      />
    </div> -->
     <!-- v-show="isPanelOpen" :checked="getParentChecked(group)"   -->
    <div class="config-panel">
      <div class="permission-list">
        <div class="permission-group" v-for="group in permissionGroups" :key="group.label">
          <div class="group-header"> 
            <a-checkbox :value="group.value"
           
            @change="(e) => handleParentChange(group, e)">
                  {{ group.label }}
                </a-checkbox>
                 <a-button type="link" style="padding: 0;" size="small" @click="showButtonConfig(group)">

                  <img src="../../assets/svg/setting.png" style="margin-top: 2px;" alt="">
                </a-button>
            </div>
          <div class="checkbox-list">
            <a-checkbox-group v-model:value="selectedPermissions[group.key]">
              <div v-for="item in group.items" :key="item.value" class="checkbox-item">
                <a-checkbox :value="item.value" style="padding-right: 0;">
                  {{ item.label }}
                </a-checkbox>
                <a-button type="link" style="padding: 0;" size="small" @click="showButtonConfig(group)">

                  <img src="../../assets/svg/setting.png" style="margin-top: 2px;" alt="">
                </a-button>
              </div>
            </a-checkbox-group>
          </div>
        </div>
      </div>
       <!-- 按钮权限配置弹窗 -->
    <a-modal
      v-model:visible="buttonModalVisible"
      title="按钮权限配置"
      @ok="handleButtonConfigSave"
      @cancel="handleButtonConfigCancel"
      width="600px"
    >
      <div class="button-config-list">
        <div v-for="button in currentGroupButtons" :key="button.value" class="button-config-item">
          <a-checkbox
            v-model:checked="button.isCheck"
            :value="button.value"
          >
            {{ button.label }}
          </a-checkbox>
          <span class="button-desc">{{ button.description }}</span>
        </div>
      </div>
    </a-modal>
      <!-- <div class="action-buttons">
        <a-button type="primary" :loading="saving" @click="saveConfig">
          保存配置
        </a-button>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import axios from 'axios';
import upIcon from '@/assets/svg/ups.svg';
import downIcon from '@/assets/svg/down.svg';


// 按钮配置相关
const buttonModalVisible = ref(false);
const currentGroupButtons = ref([]);
const currentGroup = ref(null);

// 显示按钮配置弹窗
const showButtonConfig = (group) => {
  currentGroup.value = group;
  // 这里可以根据实际需求从后端获取按钮权限列表
  currentGroupButtons.value = [
    { label: '新增', value: 'add', description: '新增数据权限', isCheck: false },
    { label: '编辑', value: 'edit', description: '编辑数据权限', isCheck: false },
    { label: '删除', value: 'delete', description: '删除数据权限', isCheck: false },
    { label: '查询', value: 'query', description: '查询数据权限', isCheck: false },
    // 可以根据需求添加更多按钮
  ];
  buttonModalVisible.value = true;
};

// 保存按钮配置
const handleButtonConfigSave = () => {
  // 这里可以添加保存按钮配置的逻辑
  const buttonPermissions = currentGroupButtons.value
    .filter(button => button.isCheck)
    .map(button => button.value);

  // 更新当前组的按钮权限
  if (currentGroup.value) {
    if (!selectedPermissions[`${currentGroup.value.key}_buttons`]) {
      selectedPermissions[`${currentGroup.value.key}_buttons`] = [];
    }
    selectedPermissions[`${currentGroup.value.key}_buttons`] = buttonPermissions;
  }

  buttonModalVisible.value = false;
  message.success('按钮权限配置已保存');
};

// 取消按钮配置
const handleButtonConfigCancel = () => {
  buttonModalVisible.value = false;
};
// 计算父级选中状态
const getParentChecked = (group) => {
  if (!selectedPermissions[group.key] || !group.items || group.items.length === 0) {
    return false;
  }
 // 检查父级是否被选中
  return selectedPermissions[group.key].includes(group.value);
};
// 处理父级选中状态变化
const handleParentChange = (parent, e) => {
  const checked = e.target.checked;
  // 获取当前组的选中状态数组
  if (!selectedPermissions[parent.key]) {
    selectedPermissions[parent.key] = [];
  }
  
  // 如果父级被选中，将所有子项添加到选中数组
  if (checked) {
    selectedPermissions[parent.key] = [...parent.items.map(item => item.value), parent.value];
  } else {
    // 如果父级取消选中，清空该组的选中数组
    selectedPermissions[parent.key] = [];
  }
};

// 权限组数据
const permissionGroups = ref([]);
const isPanelOpen = ref(false);
const saving = ref(false);

// 用于存储每个权限组的选中状态
const selectedPermissions = reactive({});

const togglePanel = () => {
  isPanelOpen.value = !isPanelOpen.value;
};

const saveConfig = async () => {
  saving.value = true;
  try {
    // 保存配置到 localStorage
    localStorage.setItem('permissionConfig', JSON.stringify(selectedPermissions));
    message.success('权限配置保存成功');
  } catch (error) {
    message.error('权限配置保存失败');
  } finally {
    saving.value = false;
  }
};

// 初始化配置
const initConfig = () => {
  const savedConfig = localStorage.getItem('permissionConfig');
  if (savedConfig) {
    const config = JSON.parse(savedConfig);
    Object.keys(config).forEach(key => {
      selectedPermissions[key] = config[key];
    });
  }
};

// 获取权限列表
const fetchPermissionGroups = async () => {
  try {
    const response = await axios.get(`http://58.246.234.210:8085/api/system/role_menu_button_permission/get_role_menu/?roleId=9&merchant=1`,{
      headers: {
        'authorization': `JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzU2MTczNjAwLCJpYXQiOjE3NTYwODcyMDAsImp0aSI6IjU0ZTBiZGJhODBjMTQ4MDBhZDFiNjVjZDBkYjBkM2U4IiwidXNlcl9pZCI6OX0.rUOnghQpH4Sd5ChrD_Pqam6kAoqKV8O6TvSQQQF76fg`
      }
    });
    console.log(response);
    // 构建权限树
    const buildPermissionTree = (permissions) => {
      // 创建一个映射表，用于快速查找权限项
      const permMap = {};
      permissions.forEach(perm => {
        permMap[perm.id] = {
          label: perm.name,
          value: perm.id,
          is_catalog: perm.is_catalog,
          isCheck: perm.isCheck,
          children: []
        };
      });

      // 构建树形结构
      const tree = [];
      permissions.forEach(perm => {
        const currentNode = permMap[perm.id];
        if (perm.parent === null) {
          // 如果没有父节点，则为根节点
          tree.push(currentNode);
        } else {
          // 如果有父节点，将当前节点添加到父节点的children中
          const parentNode = permMap[perm.parent];
          if (parentNode) {
            parentNode.children.push(currentNode);
          }
        }
      });

      return tree;
    };

    // 处理权限数据
    const permissionTree = buildPermissionTree(response.data.data);
    
    // 转换为组件所需的数据格式
    const groupsData = permissionTree.map(node => ({
      label: node.label,
      key: node.value,
      is_catalog: node.is_catalog,
      value: node.isCheck,

      items: node.children.map(child => ({
        label: child.label,
        value: child.value,
        is_catalog: child.is_catalog,
        isCheck: child.isCheck
      }))
    }));

    permissionGroups.value = groupsData;
    
    // 初始化选中状态对象
    permissionGroups.value.forEach(group => {
      if (!selectedPermissions[group.key]) {
        selectedPermissions[group.key] = [];
      }
    });
  } catch (error) {
    message.error('获取权限信息失败');
    console.error('获取权限信息失败:', error);
  }
};

// 组件挂载时获取数据
onMounted(async () => {
  await fetchPermissionGroups();
  initConfig();
});
</script>

<style scoped>
.permission-config {
 
  background: var(--secondary-bg);
  color: var(--primary-text);
}

.config-header {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.config-header:hover {
  background: rgba(0, 0, 0, 0.02);
}

.config-icon {
  width: 16px;
  height: 16px;
}

.toggle-icon {
  width: 12px;
  height: 12px;
  margin-left: auto;
}

.config-panel {
  padding: 12px 20px;
 
}

.permission-list {
  margin-bottom: 16px;
  /* height: 100%;
    overflow: auto; */
}

.permission-group {
  /* margin-bottom: 16px; */
}

.permission-group:last-child {
  margin-bottom: 0;
}

.group-header {
  font-size: 13px;
  color: var(--primary-text);
  margin-bottom: 8px;
}

.checkbox-list {
margin-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-item {
  display: flex;
  align-items: flex-start;
  padding-right: 0;
}

.item-desc {
  margin-left: 8px;
  font-size: 12px;
  color: var(--primary-text);
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

:deep(.ant-checkbox-wrapper) {
  font-size: 14px;
}

:deep(.ant-checkbox-group) {
  width: 100%;
  flex-direction: column;
}

:deep(.ant-checkbox-wrapper + .ant-checkbox-wrapper) {
  margin-left: 0;
}

.group-header {
  font-size: 13px;
  color: var(--primary-text);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}

.button-config-list {
  max-height: 400px;
  overflow-y: auto;
}

.button-config-item {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.button-desc {
  margin-left: 12px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}
</style>