<template>
  <el-dialog
    title="编辑用户组"
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    :close-on-click-modal="false"
    append-to-body
    destroy-on-close
    :align-center="true"
    :fullscreen="false"
    @close="handleClose"
    class="custom-dialog"
    width="900px"
  >
    <div class="dialog-content" style="padding: 20px; padding-bottom: 80px;height: 700px;overflow-y: auto;">
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
      <!-- 姓名和用户组名 -->
      <el-form-item label="用户组名" prop="groupname">
        <el-input v-model="form.groupname" placeholder="请输入用户组名" :disabled="form.id !== null" @blur="changeCheckNameExit" />
      </el-form-item>

      <!-- 备注 -->
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="form.remark"
          placeholder="请输入备注"
        />
      </el-form-item>
      </el-form>

      <!-- 角色选择 -->
      <div class="component-wrapper">
        <RoleTransfer
          :roles="roles"
          :selectedRoles="selectedRoles"
          :searchRole="searchRole"
          @update:roles="val => roles = val"
          @update:selectedRoles="val => selectedRoles = val"
          @update:searchRole="val => searchRole = val"
        />
        <div v-if="isAdminUser" class="overlay-mask">
          <div class="mask-message">
            <el-alert
              title="超级管理员用户组的角色不可修改"
              type="info"
              :closable="false"
              show-icon
            />
          </div>
        </div>
      </div>

      <!-- 权限设置 -->
      <div class="component-wrapper">
        <PermissionArea
          :permissionList="permissionList"
          :allPermissionsSelected="allPermissionsSelected"
          @update:allPermissionsSelected="val => allPermissionsSelected = val"
          @permission-change="handlePermissionChange"
          @sub-permission-change="handleSubPermissionChange"
        />
        <div v-if="isAdminUser" class="overlay-mask">
          <div class="mask-message">
            <el-alert
              title="超级管理员用户组的权限不可修改"
              type="info"
              :closable="false"
              show-icon
            />
          </div>
        </div>
      </div>
      </div>
    <template #footer>
      <el-button  type="danger" @click="handleClose">取 消</el-button>
      <el-button type="primary"  color="rgba(33, 103, 217, 1)" @click="handleSubmit">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed, watch, getCurrentInstance } from 'vue'
import { queryAll as queryAllRole } from '@/api/safetyManagement/roleConfig.js'
import { initEdit, add, modify, checkNameExit } from '@/api/safetyManagement/groupConfig.js'
import { queryAll as queryAllMenu } from '@/api/safetyManagement/menuConfig.js'
import RoleTransfer from '@/components/RoleTransfer/index.vue'
import PermissionArea from '@/components/PermissionArea/index.vue'

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

// 定义props和emit
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  formData: {
    type: Object,
    default: () => null
  }
})

const emit = defineEmits(['update:visible', 'success'])

// 表单引用
const formRef = ref(null)

// 响应式数据
const form = reactive({
  id: null,
  groupname: '',
  groupList: [],
  rolesList: [],
  menuList: []
})

const searchRole = ref('')
const roles = ref([])
const selectedRoles = ref([])
const allPermissionsSelected = ref(false)
const permissionList = ref([])
const instance = getCurrentInstance()

// 判断是否为超级管理员用户组（roleId = 1）
const isAdminUser = ref(false)

const rules = {
  groupname: [
    { required: true, message: '请输入用户组名', trigger: 'blur' }
  ]
}

// 监听visible变化
watch(() => props.visible, (val) => {
  if (val && props.formData && props.formData.id) {
    // 弹窗打开且有id时，拉取用户组详情和相关数据
    initEditData(props.formData.id)
  } else {
    // 新增，只需查询角色、用户组组、菜单权限
    Promise.all([
      queryAllRole(),
      queryAllMenu()
    ]).then(([roleRes, menuRes]) => {
      // 角色
      roles.value = (roleRes.data || []).map(r => ({
        id: r.id,
        name: r.rolename || r.name || '',
        selected: false
      }))
      selectedRoles.value = []
      // 权限
      function mapMenu(menuArr) {
        return (menuArr || []).filter(item => item.type !== '3' || item.type === 1).map(item => {
          const hasChildren = Array.isArray(item.children) && item.children.length > 0
          let children = hasChildren ? mapMenu(item.children) : null
          return {
            id: item.id,
            name: item.type === '2'? '项目管理-'+item.name : item.name,
            selected: false,
            indeterminate: false,
            expanded: false,
            children
          }
        })
      }
      permissionList.value = mapMenu(menuRes.data)
    })
  }
})

// 初始化编辑数据
const initEditData = async (id) => {
  // 1. 查询用户组详情
  const groupRes = await initEdit({ groupid: id })
  // 2. 查询角色、菜单权限
  const [roleRes, menuRes] = await Promise.all([
    queryAllRole(),
    queryAllMenu()
  ])
  // 3. 数据匹配
  Object.assign(form, {
    ...groupRes.data.tBaseGroup
  })
 
  // 未选中角色
  roles.value = roleRes.data
    .filter(r => !(groupRes.data.tBaseGrouproleList.map(m => m.roleid) || []).includes(r.id))
    .map(r => ({
      id: r.id,
      name: r.rolename || r.name || ''
    }))
  // 选中的角色
  selectedRoles.value = roleRes.data
    .filter(r => (groupRes.data.tBaseGrouproleList.map(m => m.roleid) || []).includes(r.id))
    .map(r => ({
      id: r.id,
      name: r.rolename || r.name || ''
    }))
  // 权限
  function mapMenu(menuArr, selectedIds = []) {
    return (menuArr || []).filter(item => item.type !== '3' || item.type === 1).map(item => {
      const hasChildren = Array.isArray(item.children) && item.children.length > 0
      let children = hasChildren ? mapMenu(item.children, selectedIds) : null
      let selected = selectedIds.includes(item.id)
      let indeterminate = false
      if (hasChildren) {
        const selectedCount = children.filter(c => c.selected).length
        if (selectedCount === 0) {
          selected = false
          indeterminate = false
        } else if (selectedCount === children.length) {
          selected = true
          indeterminate = false
        } else {
          selected = false
          indeterminate = true
        }
      }
      return {
        id: item.id,
        name: item.type === '2'? '项目管理-'+item.name : item.name,
        selected,
        indeterminate,
        expanded: false,
        children
      }
    })
  }
  permissionList.value = mapMenu(menuRes.data, groupRes.data.tBaseGroupmenuList ? groupRes.data.tBaseGroupmenuList.map(m => m.menuid) : [])
}

// 关闭弹窗
const handleClose = () => {
  emit('update:visible', false)
  formRef.value?.resetFields()
  Object.assign(form, {
    groupname: '',
    remark: ''
  })
}

// 提交表单
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 提交表单逻辑
      const params = { group: { 
        id: form.id || null,
        remark: form.remark || '',
        groupname: form.groupname || ''
      } }
      // 选中的角色和分组和权限
      params.roleList = selectedRoles.value.map(r => r.id)
      const selectedMenuIds = []
      function collectSelectedMenus(menus) {
        menus.forEach(menu => {
          if (menu.selected) {
            selectedMenuIds.push(menu.id)
          }
          if (menu.children && menu.children.length > 0) {
            collectSelectedMenus(menu.children)
          }
        })
      }
      collectSelectedMenus(permissionList.value)
      params.menuList = selectedMenuIds.map(id => id)
      // console.log('submit form', params)
     if(params.group.id){
        modify(params).then(res => {
          if (res.code === 'POP_00014') {
            instance.appContext.config.globalProperties.$modal.msgSuccess('保存成功')
            emit('success')
            handleClose()
          } else {
            instance.appContext.config.globalProperties.$modal.msgError(res.msg || '保存失败')
          }
        }).catch(() => {
          instance.appContext.config.globalProperties.$modal.msgError('保存异常')
        })
     }else{
        add(params).then(res => {
          if (res.code === 'POP_00014') {
            instance.appContext.config.globalProperties.$modal.msgSuccess('保存成功')
            emit('success')
            handleClose()
          } else {
            instance.appContext.config.globalProperties.$modal.msgError(res.msg || '保存失败')
          }
        }).catch(() => {
          instance.appContext.config.globalProperties.$modal.msgError('保存异常')
        })
     }
    }
  })
}

// 用户组名失去焦点时验证名字是否存在
const changeCheckNameExit = async () => {
  if (form.groupname) {
    try {
      const res = await checkNameExit({ groupname: form.groupname });
      if (res.code !== 'POP_00014') {
        instance.appContext.config.globalProperties.$modal.msgError('用户组名已存在');
      }
    } catch (error) {
      instance.appContext.config.globalProperties.$modal.msgError('验证用户组名异常');
    }
  }
}

// 处理权限选择
const handlePermissionChange = (item, val) => {
  item.selected = val
  item.indeterminate = false // 清除半选状态
  if (item.children) {
    item.children.forEach(child => {
      child.selected = val
    })
  }
  checkAllPermissionsStatus()
}

const handleSubPermissionChange = (parent, child, val) => {
  child.selected = val
  // 检查父级状态
  if (parent.children) {
    // 如果所有子项都选中，父级完全选中
    const allSelected = parent.children.every(c => c.selected)
    // 如果部分子项选中，父级半选
    const someSelected = parent.children.some(c => c.selected)
    
    parent.selected = allSelected
    parent.indeterminate = !allSelected && someSelected
  }
  checkAllPermissionsStatus()
}

const checkAllPermissionsStatus = () => {
  allPermissionsSelected.value = permissionList.value.every(item => {
    if (item.children) {
      return item.selected && item.children.every(child => child.selected)
    }
    return item.selected
  })
}
</script>

<style lang="scss" scoped>
.role-transfer {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  .transfer-list {
    flex: 1;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    height: 300px;
    display: flex;
    flex-direction: column;
    width: 310px;

    .transfer-header {
      padding: 8px 12px;
      border-bottom: 1px solid #dcdfe6;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #f5f7fa;
        .select-all-action {
          color: #409EFF;
          cursor: pointer;
          font-size: 14px;
          margin-left: 10px;
          user-select: none;
          transition: color 0.2s;
          &:hover {
            color: #66b1ff;
            cursor: pointer;
          }
        }
    }

    .role-list, .selected-list {
      flex: 1;
      overflow-y: auto;
      padding: 6px 0;
    }

    .role-item {
      padding: 6px 12px;
      cursor: pointer;

      &:hover {
        background-color: #f5f7fa;
      }
    }
  }

  .transfer-operation {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
  }
}

.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;
      
      &:last-child {
        border-bottom: none;
      }

      .permission-header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 5px 0;
        cursor: pointer;
        gap: 12px;
        .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;
        .el-checkbox {
          margin-left: 0 !important;
        }
      }
    }
  }
}

:deep(.el-transfer-panel) {
  width: 100%;
}

.user-edit-dialog {
  :deep(.el-dialog) {
    display: flex;
    flex-direction: column;
    margin: 0 auto !important;
    max-height: 90vh;
    position: relative;

    .el-dialog__body {
      flex: 1;
      overflow: hidden;
      padding: 0;
    }

    .dialog-content {
      height: 100%;
      overflow-y: auto;
      padding: 20px;
      padding-bottom: 80px;
    }
  }
}

.dialog-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background-color: #fff;
  border-top: 1px solid #dcdfe6;
  z-index: 9999;
  
  .footer-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
  }
}

.permission-header .expand-icon-placeholder {
  display: inline-block;
  min-width: 22px;
  height: 22px;
  vertical-align: middle;
}
.permission-header .expand-icon {
  min-width: 22px;
  text-align: center;
  display: inline-flex;
}

.component-wrapper {
  position: relative;
}

.overlay-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.mask-message {
  padding: 10px;
  border-radius: 4px;
  width: 80%;
  max-width: 400px;
}
</style>
