<script lang="ts" setup>
  import { h } from 'vue';
  import { Description, useDescription } from '/@/components/Description';
  import { BasicModal, useModal } from '/@/components/Modal';

  const [register] = useModal();

  const [registerDes] = useDescription({
    bordered: false,
    column: 1,
    labelStyle: {
      width: '100px',
      textAlign: 'right',
      justifyContent: 'right',
      paddingRight: '20px',
    },
    data: {
      copyright:
        'ThingsKit物联网平台版权归成都云腾五洲科技有限公司所有,您可以任意商用,但请注意保留本版权声明',
      website: 'https://thingskit.com',
      authorization: '若不想保留本版权声明,请前往以下链接查看移出方法,',
    },
    schema: [
      {
        field: 'copyright',
        label: '版权声明',
      },
      {
        field: 'website',
        label: '官网',
        render: (val: string) => {
          return h(
            'span',
            { class: 'text-blue-500 cursor-pointer', onClick: () => open(val) },
            val
          );
        },
      },
      {
        field: 'authorization',
        label: '商业授权',
        render: (val: string) => {
          console.log(val);
          // 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%">
    <Description @register="registerDes" />
  </BasicModal>
</template>