<script setup lang="ts">
import type { FormInstance } from 'element-plus';

import { ref } from 'vue';

import { Delete, MoreFilled, Plus } from '@element-plus/icons-vue';
import {
  ElButton,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  ElForm,
  ElFormItem,
  ElInput,
  ElMessage,
  ElMessageBox,
  ElTable,
  ElTableColumn,
} from 'element-plus';

import { api } from '#/api/request';
import ListPageShell from '#/components/page/ListPageShell.vue';
import PageData from '#/components/page/PageData.vue';
import { $t } from '#/locales';

import SysApiKeyResourcePermissionModal from './SysApiKeyResourcePermissionModal.vue';

const formRef = ref<FormInstance>();
const pageDataRef = ref();
const saveDialog = ref();
const formInline = ref({
  id: '',
  title: '',
});
function search(formEl: FormInstance | undefined) {
  formEl?.validate((valid) => {
    if (valid) {
      pageDataRef.value.setQuery(formInline.value);
    }
  });
}
function reset(formEl: FormInstance | undefined) {
  formEl?.resetFields();
  pageDataRef.value.setQuery({});
}
function showDialog(row: any) {
  saveDialog.value.openDialog({ ...row });
}
function remove(row: any) {
  ElMessageBox.confirm($t('message.deleteAlert'), $t('message.noticeTitle'), {
    confirmButtonText: $t('message.ok'),
    cancelButtonText: $t('message.cancel'),
    type: 'warning',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true;
        api
          .post('/api/v1/sysApiKeyResourcePermission/remove', { id: row.id })
          .then((res) => {
            instance.confirmButtonLoading = false;
            if (res.errorCode === 0) {
              ElMessage.success(res.message);
              reset(formRef.value);
              done();
            }
          })
          .catch(() => {
            instance.confirmButtonLoading = false;
          });
      } else {
        done();
      }
    },
  }).catch(() => {});
}
</script>

<template>
  <div class="page-container !m-0 !pl-0">
    <SysApiKeyResourcePermissionModal ref="saveDialog" @reload="reset" />
    <ListPageShell dense>
      <template #filters>
        <div class="flex items-center justify-between gap-4">
          <ElForm ref="formRef" :inline="true" :model="formInline">
            <ElFormItem prop="title" class="!mr-3">
              <ElInput
                v-model="formInline.title"
                :placeholder="$t('sysApiKeyResourcePermission.title')"
              />
            </ElFormItem>
            <ElFormItem>
              <ElButton @click="search(formRef)" type="primary">
                {{ $t('button.query') }}
              </ElButton>
              <ElButton @click="reset(formRef)">
                {{ $t('button.reset') }}
              </ElButton>
            </ElFormItem>
          </ElForm>
          <ElButton @click="showDialog({})" type="primary">
            <ElIcon class="mr-1">
              <Plus />
            </ElIcon>
            {{ $t('button.add') }}
          </ElButton>
        </div>
      </template>
      <PageData
        ref="pageDataRef"
        page-url="/api/v1/sysApiKeyResourcePermission/page"
        :page-size="10"
      >
        <template #default="{ pageList }">
          <ElTable :data="pageList" border>
            <ElTableColumn
              prop="requestInterface"
              :label="$t('sysApiKeyResourcePermission.requestInterface')"
            >
              <template #default="{ row }">
                {{ row.requestInterface }}
              </template>
            </ElTableColumn>
            <ElTableColumn
              prop="title"
              :label="$t('sysApiKeyResourcePermission.title')"
            >
              <template #default="{ row }">
                {{ row.title }}
              </template>
            </ElTableColumn>
            <ElTableColumn
              :label="$t('common.handle')"
              width="90"
              align="right"
            >
              <template #default="{ row }">
                <div class="flex items-center gap-3">
                  <ElButton link type="primary" @click="showDialog(row)">
                    {{ $t('button.edit') }}
                  </ElButton>

                  <ElDropdown>
                    <ElButton link :icon="MoreFilled" />

                    <template #dropdown>
                      <ElDropdownMenu>
                        <ElDropdownItem @click="remove(row)">
                          <ElButton link :icon="Delete" type="danger">
                            {{ $t('button.delete') }}
                          </ElButton>
                        </ElDropdownItem>
                      </ElDropdownMenu>
                    </template>
                  </ElDropdown>
                </div>
              </template>
            </ElTableColumn>
          </ElTable>
        </template>
      </PageData>
    </ListPageShell>
  </div>
</template>

<style scoped></style>
