<template>
  <Modal
    :open="visible"
    title="权限设置"
    @ok="handleOk"
    @cancel="handleCancel"
    :maskClosable="false"
  >
    <div class="permission-container">
      <div
        class="permission-item"
        v-for="(allowed, permission) in localPermissionSet"
        :key="permission"
      >
        <Checkbox v-model:checked="localPermissionSet[permission]">
          {{ permissionLabels[permission] }}
        </Checkbox>
        <div class="permission-desc">{{ permissionDescs[permission] }}</div>
      </div>
    </div>
  </Modal>
</template>

<script setup lang="ts">
import { Modal, Checkbox } from "ant-design-vue";
import { ref, reactive } from "vue";
import { Permission } from "../utils/peer";
import { getPermissionSet, setPermissionSet } from "../utils/common";

const visible = ref(false);
const localPermissionSet = reactive({ ...getPermissionSet() });

const permissionLabels = {
  [Permission.edit]: "编辑权限",
  [Permission.view]: "查看权限",
  [Permission.download]: "下载权限",
};

const permissionDescs = {
  [Permission.edit]: "允许创建、修改、删除文件和文件夹",
  [Permission.view]: "允许查看文件内容和目录结构",
  [Permission.download]: "允许传输文件到本地",
};

const handleOk = () => {
  setPermissionSet(localPermissionSet);
  visible.value = false;
};

const handleCancel = () => {
  Object.assign(localPermissionSet, getPermissionSet());
  visible.value = false;
};

const showDialog = () => {
  visible.value = true;
};

defineExpose({
  showDialog,
});
</script>

<style scoped>
.permission-container {
  padding: 10px 0;
}

.permission-item {
  margin-bottom: 20px;
}

.permission-desc {
  margin-left: 24px;
  color: #666;
  font-size: 12px;
}
</style>
