<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';

  const encryption = new AesEncryption(cacheCipher);

  const { t } = useI18n();

  enum FiledKey {
    copyright = 'field1',
    website = 'filed2',
    authorization = 'field3',
  }

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

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

  const [register] = useModal();

  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')),
    },
    schema: [
      {
        field: FiledKey.copyright,
        label: handleDecode(t('routes.aboutSoftware.copyrightLabel')),
      },
      {
        field: FiledKey.website,
        label: handleDecode(t('routes.aboutSoftware.websiteLabel')),
        render: (val: string) => {
          return h(
            'span',
            { class: 'text-blue-500 cursor-pointer', onClick: () => open(val) },
            val
          );
        },
      },
      {
        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'),
              },
              '点击前往'
            ),
          ]);
        },
      },
    ],
  });
</script>

<template>
  <BasicModal
    @register="register"
    title="关于我们"
    width="50%"
    cancel-text="关闭"
    :show-ok-btn="false"
  >
    <Description @register="registerDes" />
  </BasicModal>
</template>