<script lang="ts" setup>
  import { onMounted } from 'vue';
  import { Spin, Modal, Button, Input, Row, Col } from 'ant-design-vue';
  import { ref } from 'vue';
  import { useRoute } from 'vue-router';
  import { checkShareAccessToken, sharePageLogin, getShareContent } from '/@/api/sys/share';
  import { ShareRouteParams } from '/@/api/sys/model/shareModel';
  import { useUserStore } from '/@/store/modules/user';
  import { BasicForm, useForm } from '/@/components/Form';
  import { FieldsEnum } from '/@/views/common/ShareModal/config';
  import BoardDetail from '/@/views/visual/board/detail/index.vue';
  import { useI18n } from '/@/hooks/web/useI18n';

  const loading = ref(true);
  const ROUTE = useRoute();
  const contentData = ref<any>();
  const canLoadComponent = ref(false);

  const modelVisable = ref(false);

  // const [register, { openModal }] = useModal();
  const { t } = useI18n(); // 加载国际化

  const [registerForm, { getFieldsValue }] = useForm({
    schemas: [
      {
        field: FieldsEnum.ACCESS_CREDENTIALS,
        component: 'Input',
        label: t('common.accessToken'),
        slot: 'tokenInput',
        componentProps: {
          placeholder: t('common.placeInputAccessToken'),
        },
      },
    ],
    showActionButtonGroup: false,
    layout: 'vertical',
    baseColProps: { span: 24 },
  });

  const userStore = useUserStore();

  const getShareToken = async () => {
    const { params } = ROUTE;
    const { publicId } = params as Partial<ShareRouteParams>;
    const { token, refreshToken } = await sharePageLogin(publicId!);
    userStore.storeShareToken(token, refreshToken);
  };

  const getCheckNeedAccessToken = async () => {
    const { params } = ROUTE;
    loading.value = true;
    const { viewType, id } = params as Partial<ShareRouteParams>;
    const { data } = await checkShareAccessToken(viewType!, id!);
    data ? (modelVisable.value = true) : await getContentData();
  };

  const getContentLoading = ref(false);
  const getContentData = async () => {
    try {
      getContentLoading.value = true;
      const { params } = ROUTE;
      const { id } = params as unknown as ShareRouteParams;
      const value = getFieldsValue() as Record<'accessCredentials', string>;
      const result = await getShareContent({ id, ...value });
      contentData.value = result;
      loading.value = false;
      canLoadComponent.value = true;
      // openModal(false);
      modelVisable.value = false;
    } catch (error) {
    } finally {
      getContentLoading.value = false;
    }
  };

  const handleSubmit = async () => {
    await getContentData();
  };

  onMounted(async () => {
    await getShareToken();
    await getCheckNeedAccessToken();
  });
</script>

<template>
  <Modal
    v-model:visible="modelVisable"
    centered
    :title="null"
    :close-icon="null"
    width="350px"
    :footer="null"
    wrapClassName="share-page-token-modal"
  >
    <section class="w-full h-full flex flex-col p-8 justify-center items-center">
      <BasicForm @register="registerForm" class="w-full" @keyup.enter="handleSubmit">
        <template #tokenInput="{ field, model }">
          <Input.Group>
            <Row>
              <Col :span="18">
                <Input.Password
                  v-model:value="model[field]"
                  :placeholder="t('common.placeInputAccessToken')"
                />
              </Col>
              <Col :span="6">
                <Button
                  class="w-full !flex justify-center items-center"
                  :loading="getContentLoading"
                  type="primary"
                  @click="handleSubmit"
                >
                  <svg
                    t="1682068997810"
                    class="icon transform rotate-180"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="79416"
                    width="24"
                    height="24"
                  >
                    <path
                      d="M512 928H128c-19.2 0-32-12.8-32-32V128c0-19.2 12.8-32 32-32h384c19.2 0 32 12.8 32 32s-12.8 32-32 32H160v704h352c19.2 0 32 12.8 32 32s-12.8 32-32 32z"
                      fill="#fff"
                      p-id="79417"
                    />
                    <path
                      d="M534.4 736c-9.6 0-16-3.2-22.4-9.6l-192-192c-12.8-12.8-12.8-32 0-44.8l192-192c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L387.2 512l169.6 169.6c12.8 12.8 12.8 32 0 44.8-6.4 6.4-16 9.6-22.4 9.6z"
                      fill="#fff"
                      p-id="79418"
                    />
                    <path
                      d="M896 544H342.4c-19.2 0-32-12.8-32-32s12.8-32 32-32H896c19.2 0 32 12.8 32 32s-12.8 32-32 32z"
                      fill="#fff"
                      p-id="79419"
                    />
                  </svg>
                </Button>
              </Col>
            </Row>
          </Input.Group>
        </template>
      </BasicForm>
    </section>
  </Modal>
  <Spin
    :spinning="loading"
    tip="正在加载中..."
    size="large"
    class="!flex justify-center items-center w-full h-full share-full-loading"
  >
    <BoardDetail v-if="canLoadComponent" :value="contentData" />
  </Spin>
</template>

<style lang="less">
  .share-page-token-modal {
    .ant-modal-close {
      display: none;
    }
  }
</style>