<script setup>
const props = defineProps({
  isDialogVisible: {
    type: Boolean,
    required: true,
  },
  userId: {
    type: String,
    required: true,
    default: "",
  },
  currentRoleList: {
    type: Array,
    required: true,
    default: [],
  },
  roleList: {
    type: Array,
    required: true,
    default: [],
  },
});

const emit = defineEmits(["update:isDialogVisible", "update:currentRoleList"]);

const currentRoleList = ref([]);

const onReset = () => {
  emit("update:isDialogVisible", false);
  currentRoleList.value = "";
};

const onSubmit = async () => {
  const userId = props.userId; // 假設 userId 是要更新的用戶的 ID
  const roles = currentRoleList.value; // 從 props 中獲得當前選擇的角色列表

  try {
    const response = await $api(`/account-panel/users/${userId}/update-role`, {
      method: "POST", // 或 "PATCH"，取決於你的後端 API 設計
      body: JSON.stringify({ roles }), // 確保發送正確的數據格式，這裡假設後端期待一個包含角色名稱數組的對象
      headers: {
        "Content-Type": "application/json",
      },
    });

    // 更新成功後的處理，例如關閉對話框、發出更新成功的事件等
    emit("update:isDialogVisible", false);
    emit("user-roles-updated");
    // 可能需要重新加載或更新當前頁面上的用戶角色數據
    // fetchUsers(); // 假設有一個 fetchUsers 方法來重新加載用戶數據
  } catch (error) {
    console.error("更新用戶角色失敗：", error);
    // 處理錯誤，例如顯示錯誤消息給用戶
  }
};

watch(props, () => {
  currentRoleList.value = props.currentRoleList;
});
</script>

<template>
  <VDialog
    :width="$vuetify.display.smAndDown ? 'auto' : 900"
    :model-value="props.isDialogVisible"
    @update:model-value="onReset"
  >
    <!-- 👉 dialog close btn -->
    <DialogCloseBtn @click="onReset" />

    <VCard class="pa-sm-8 pa-5">
      <!-- 👉 Title -->
      <VCardItem class="text-center">
        <VCardTitle class="text-h5"> 編輯角色 </VCardTitle>
        <VCardSubtitle> 根據您的需求編輯角色 </VCardSubtitle>
      </VCardItem>

      <VCardText class="mt-1">
        <!-- 👉 Form -->
        <VForm>
          <!-- 👉 Role name -->
          <div class="d-flex align-end gap-3 mb-3">
            <AppAutocomplete
              v-model="currentRoleList"
              chips
              closable-chips
              multiple
              :items="roleList"
              item-title="title"
              item-value="value"
              placeholder="選擇角色..."
              label="選擇角色"
            >
              <template #chip="{ props, item }">
                <VChip v-bind="props" :text="item.raw.title" />
              </template>

              <template #item="{ props, item }">
                <VListItem
                  v-bind="props"
                  :title="item?.raw?.title"
                  :subtitle="item?.raw?.value"
                />
              </template>
            </AppAutocomplete>

            <VBtn @click="onSubmit"> 更新 </VBtn>
          </div>
        </VForm>
      </VCardText>
    </VCard>
  </VDialog>
</template>

<style lang="scss">
.permission-table {
  td {
    border-block-end: 1px solid
      rgba(var(--v-border-color), var(--v-border-opacity));
    padding-block: 0.5rem;
    padding-inline: 0;
  }
}
</style>
