<!--
 * @Author: xiejiang
 * @Date: 2024-11-11 09:38:40
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-11 20:01:03
 * @Description: 权限配置
 * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
-->
<template>
  <div class="authority h-full bg-white">
    <div class="left">
      <SearchWithButton width="250px" placeholder="搜索角色" v-model="roleName" @on-search="handleSearch" />
      <!-- <div class="role-add" @click="dialogVisible = true">+ 创建角色</div> -->
      <ul class="left-list" v-loading="loading">
        <li
          v-for="v in roles"
          :key="v.roleId"
          :class="
            v.roleId === roleId ? 'li-active flex justify-between items-center' : ' flex justify-between items-center'
          "
          @click="roleId = v.roleId"
        >
          <span>{{ v.roleName }}</span>
          <span>{{ v.userNumber }} 人</span>
        </li>
      </ul>
    </div>
    <div class="right">
      <t-tabs v-model="tabValue">
        <t-tab-panel :value="1" label="功能权限" :destroy-on-hide="false" />
        <t-tab-panel :value="2" label="数据权限" :destroy-on-hide="false" />
      </t-tabs>

      <!-- 功能权限 -->
      <div v-show="tabValue === 1">
        <SearchWithButton
          width="250px"
          class="m-[16px]"
          placeholder="搜索菜单功能名称"
          v-model="condMenuName"
          @on-search="handleSearchTree"
        />
        <Capabilities
          :role-id="roleId"
          :cond-menu-name="condMenuName"
          ref="capabilitiesRef"
          @loading="
            val => {
              submitLoading = val
            }
          "
        />
      </div>
      <!-- 数据权限 -->
      <DataPermissions
        ref="dataPermissionsRef"
        :role-id="roleId"
        :tab-value="tabValue"
        @loading="
          val => {
            submitLoading = val
          }
        "
        @updateMenuId="
          val => {
            sourceMenuId = val
          }
        "
        v-if="tabValue === 2"
      />
    </div>
    <FooterFixBtn>
      <template #button>
        <t-button variant="outline" class="!mr-[16px]" @click="handleClear">{{
          tabValue === 1 ? '清空' : '应用至其他菜单'
        }}</t-button>
        <t-button theme="primary" :loading="submitLoading" @click="handleConfirm"> 保存</t-button></template
      >
    </FooterFixBtn>
  </div>
</template>

<script setup lang="ts" name="authority">
import { useRoute } from 'vue-router'
import { ResRoleList } from '@/api/interface/user-roles/index'
import { getRoleList } from '@/api/modules/user-roles/index'
import Capabilities from './page/capabilities.vue'
import DataPermissions from './page/data-permissions.vue'
import { useBasic } from '@/hooks/useBasic'

defineOptions({
  name: 'authority'
})

const { setBreadcrumb } = useBasic()
// 左边角色相关
const roleName = ref('')
const roleId = ref()
const sourceMenuId = ref('')
const loading = ref(false)
const roles = ref<ResRoleList[]>([])

const route = useRoute()
const handleSearch = () => {
  loading.value = true
  getRoleList({
    roleName: roleName.value,
    status: 2
  })
    .then(res => {
      roles.value = res.data
      // 区分是否有默认值
      if (route.query.roleId) {
        roleId.value = route.query.roleId
      } else {
        roleId.value = res.data[0]?.roleId
      }
    })
    .catch(() => {
      roles.value = []
      roleId.value = undefined
    })
    .finally(() => {
      loading.value = false
    })
}

// 右边相关
const tabValue = ref(1)
const condMenuName = ref('')

const submitLoading = ref(false)

const capabilitiesRef = ref()
const dataPermissionsRef = ref()
// const copyPermissionsRef = ref()
const handleSearchTree = () => {
  if (tabValue.value == 1) {
    capabilitiesRef.value?.getData()
  }
}
// 提交
const handleConfirm = () => {
  if (tabValue.value == 1) {
    capabilitiesRef.value?.submit()
  } else {
    dataPermissionsRef.value?.submit()
  }
}

// 清空
const handleClear = () => {
  if (tabValue.value == 1) {
    capabilitiesRef.value?.clear()
  } else {
    // 应用其他菜单
    if (!sourceMenuId.value) {
      return MessagePlugin.error('请选择菜单')
    }
    dataPermissionsRef.value?.copyPermissions(roleId.value, sourceMenuId.value)
  }
}

onMounted(() => {
  handleSearch()
  setBreadcrumb([
    {
      title: '系统权限'
    },
    {
      title: '权限配置'
    }
  ])
})
</script>

<style lang="less" scoped>
.authority {
  display: flex;
  max-height: calc(100% - 50px);
  width: 100%;

  .left {
    box-sizing: border-box;
    width: 282px;
    padding: 16px;
    border-right: 1px solid var(--td-border);

    &-list {
      padding: 0;
      width: 250px;
      height: calc(100% - 50px);
      overflow: auto;
      padding-right: 8px;

      li {
        list-style: none;
        padding: 8px;
        height: 40px;
        box-sizing: border-box;
        line-height: 40px;
        font-size: 13px;
        cursor: pointer;
        color: var(--td-font-gray-2);
      }

      li:hover {
        border-radius: 8px;
        color: var(--td-font-gray-2);
        background-color: var(--td-gray-color-1);
      }

      .li-active {
        border-radius: 8px;
        background-color: var(--td-brand-color);
        color: var(--td-white);
      }

      .li-active:hover {
        background-color: var(--td-brand-color);
        color: var(--td-white);
      }
    }
  }

  .right {
    flex: 1;
    min-width: 920px;
    overflow: auto;
    height: 100%;
    position: relative;

    .t-tabs {
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 9;
    }
  }
}
</style>
