<!--
 * @Author: xiejiang
 * @Date: 2024-11-11 09:38:40
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-08 10:28:35
 * @Description: 权限配置
 * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
-->
<template>
  <div class="authority h-full bg-white">
    <div class="left">
      <SearchWithButton width="240px" 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' : ''"
          @click="roleId = v.roleId"
        >
          {{ v.roleName }}
        </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="240px"
          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-show="tabValue === 2"
      />
    </div>

    <CopyPermissions ref="copyPermissionsRef" />

    <!-- 添加角色 -->
    <!-- <Dialog :dialog-visible="dialogVisible" width="480px" title="添加角色" :footer="true" @close="close">
      <template #body>
        <t-form ref="formRef" label-align="top" :rules="rules" :data="formData">
          <t-form-item label="角色名称" name="roleName">
            <t-input maxlength="20" v-model="formData.roleName" placeholder="请输入内容"> </t-input>
          </t-form-item>
          <t-form-item label="角色描述" name="description">
            <t-textarea maxlength="200" v-model="formData.description" placeholder="请输入内容"> </t-textarea>
          </t-form-item> </t-form
      ></template>
      <template #footer>
        <div class="flex items-center justify-center">
          <t-button shape="round" variant="outline" @click="close">取消</t-button>
          <t-button shape="round" @click="handleConfirm" :loading="submitLoading">保存</t-button>
        </div>
      </template>
    </Dialog> -->

    <FooterFixBtn>
      <template #button>
        <t-button shape="round" variant="outline" class="mr-[16px]" @click="handleClear">{{
          tabValue === 1 ? '清空' : '应用至其他菜单'
        }}</t-button>
        <t-button shape="round" 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 CopyPermissions from './page/copy-permissions.vue'
import { useBasic } from '@/hooks/useBasic'

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 dialogVisible = ref(false)
// const submitLoading = ref(false)

// const formRef = useTemplateRef<FormInstanceFunctions>('formRef')
// const formData: FormProps<ReqRole>['data'] = reactive({
//   description: '',
//   roleName: ''
// })

// const rules: FormProps['rules'] = {
//   roleName: [
//     {
//       required: true,
//       message: '请填写角色名称！',
//       trigger: 'blur'
//     }
//   ]
// }

// const close = () => {
//   formRef.value?.reset()
//   dialogVisible.value = false
// }

// const handleConfirm = () => {
//   submitLoading.value = true
//   postRoleAddUpd(formData)
//     .then(() => {
//       close()
//       handleSearch()
//     })
//     .finally(() => {
//       submitLoading.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('请选择菜单')
    }
    copyPermissionsRef.value?.open(roleId.value, sourceMenuId.value)
  }
}

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

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

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

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

      li {
        list-style: none;
        padding: 8px;
        font-size: 13px;
        cursor: pointer;
        color: var(--td-font-color-2);
      }

      li:hover {
        border-radius: 8px;
        color: var(--td-font-color-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;
  }
}
</style>
