<script lang="ts" setup>
  import { h } from 'vue';
  import { useI18n } from 'vue-i18n';
  import { Description, useDescription } from '/@/components/Description';
  import { BasicModal, useModal } from '/@/components/Modal';
  import { cacheCipher } from '/@/settings/encryptionSetting';
  import { AesEncryption } from '/@/utils/cipher';
  import { useGlobSetting } from '/@/hooks/setting';

  const encryption = new AesEncryption(cacheCipher);

  const { t } = useI18n();

  enum FiledKey {
    COPYRIGHT = 'field1',
    WEBSITE = 'filed2',
    AUTHORIZATION = 'field3',
    VERSION = 'field4',
  }

  // const handleEncode = (string: string) => {
  //   return encryption.encryptByAES(string);
  // };

  const handleDecode = (encodeString: string) => {
    return encryption.decryptByAES(encodeString);
  };

  const [register] = useModal();

  const { softwareVersionNumber } = useGlobSetting();

  const [registerDes] = useDescription({
    bordered: false,
    column: 1,
    labelStyle: {
      width: '100px',
      textAlign: 'right',
      justifyContent: 'right',
      paddingRight: '20px',
    },
    data: {
      [FiledKey.COPYRIGHT]: handleDecode(t('routes.aboutSoftware.copyright')),
      [FiledKey.WEBSITE]: handleDecode(t('routes.aboutSoftware.website')),
      [FiledKey.AUTHORIZATION]: handleDecode(t('routes.aboutSoftware.authorization')),
      [FiledKey.VERSION]: softwareVersionNumber,
    },
    schema: [
      {
        field: FiledKey.COPYRIGHT,
        label: handleDecode(t('routes.aboutSoftware.copyrightLabel')),
      },
      {
        field: FiledKey.WEBSITE,
        label: handleDecode(t('routes.aboutSoftware.websiteLabel')),
        render: (val: string) => {
          let joinWww = val.substring(0, 8) + 'www.' + val.substring(8);
          return h(
            'span',
            { class: 'text-blue-500 cursor-pointer', onClick: () => open(joinWww) },
            joinWww
          );
        },
      },
      {
        field: FiledKey.AUTHORIZATION,
        label: handleDecode(t('routes.aboutSoftware.authorizationLabel')),
        render: (val: string) => {
          // https://community.thingskit.com/question/20.html
          return h('div', {}, [
            h('span', val),
            h(
              'span',
              {
                class: 'text-blue-500 cursor-pointer',
                onClick: () => open('https://community.thingskit.com/question/20.html'),
              },
              '点击前往'
            ),
          ]);
        },
      },
      {
        field: FiledKey.VERSION,
        label: handleDecode(t('routes.aboutSoftware.versionLabel')),
        render: () => {
          return softwareVersionNumber;
        },
      },
    ],
  });
</script>

<template>
  <BasicModal
    @register="register"
    :title="handleDecode(t('routes.aboutSoftware.aboutSoftware'))"
    width="50%"
    cancel-text="关闭"
    :show-ok-btn="false"
  >
    <Description @register="registerDes" />
  </BasicModal>
</template>