<script setup lang="ts">
import { ref } from 'vue';
import type { TreeOption } from 'naive-ui';
import OperateModel from '@/components/advanced/operate-model.vue';
import MenuTree from '@/views/system/role/modules/menuTree.vue';

defineOptions({
  name: 'RoleDataScopeOperateModal',
  inheritAttrs: false
});

defineProps<{ deptOptions: TreeOption[] }>();

const model = ref<Pick<Api.SystemManage.Role, 'roleName' | 'roleKey' | 'dataScope' | 'deptCheckStrictly' | 'deptIds'>>({
  deptIds: [],
  roleName: '',
  roleKey: '',
  dataScope: '2',
  deptCheckStrictly: true
});

const dataScopeOptions = [
  {
    value: '1',
    label: '全部数据权限'
  },
  {
    value: '2',
    label: '自定数据权限'
  },
  {
    value: '3',
    label: '本部门数据权限'
  },
  {
    value: '4',
    label: '本部门及以下数据权限'
  },
  {
    value: '5',
    label: '仅本人数据权限'
  }
];

function handleChange() {
  if (model.value.dataScope !== '2') {
    model.value.deptIds = [];
  }
}
</script>

<template>
  <OperateModel v-model:model="model" model-title="分配数据权限" v-bind="$attrs">
    <template #formItem>
      <NFormItemGi span="24 m:12" :label="$t('page.manage.role.roleName')">
        <NInput v-model:value="model.roleName" disabled :placeholder="$t('page.manage.role.form.roleName')" />
      </NFormItemGi>
      <NFormItemGi span="24 m:12" label="权限字符">
        <NInput v-model:value="model.roleKey" disabled placeholder="请输入权限字符" />
      </NFormItemGi>
      <NFormItemGi span="24 m:12" label="权限范围">
        <NSelect v-model:value="model.dataScope" :options="dataScopeOptions" @update:value="handleChange"></NSelect>
      </NFormItemGi>
      <NFormItemGi v-if="model.dataScope === '2'" span="24" label="数据权限">
        <MenuTree
          v-model:cascade="model.deptCheckStrictly"
          v-model:checked-keys="model.deptIds"
          :menu-options="deptOptions"
          show-cascade
        ></MenuTree>
      </NFormItemGi>
    </template>
  </OperateModel>
</template>

<style scoped></style>
