import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './index.module.less';
import { NTabs, NTabPane, NImage } from 'naive-ui';
import iconLogo from './images/icon-logo.png';
import { api_getCustomerServiceContact } from './api';
export default defineComponent({
  name: 'aboutUs',
  setup() {
    const activeTab = ref('person' as any);
    const state = reactive({
      email: '',
      phone: ''
    });

    const getAboutUsInfo = async () => {
      try {
        const { data } = await api_getCustomerServiceContact({});
        state.email = data.email;
        state.phone = data.phone;
      } catch {
        //
      }
    };

    onMounted(() => {
      getAboutUsInfo();
    });

    return () => (
      <div class={styles.listWrap}>
        <NTabs
          class={styles.customTabs}
          v-model:value={activeTab.value}
          size="large"
          // animated
          pane-wrapper-style="margin: 0 -4px"
          pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
          <NTabPane name="person" tab="关于我们"></NTabPane>
        </NTabs>

        <div class={styles.content}>
          <div class={styles.information}>
            <div class={styles.logoContainer}>
              <NImage src={iconLogo} class={styles.iconLogo} />
              <p>版本号 1.1.4</p>
            </div>

            <div class={styles.infos}>
              <div class={styles.info}>
                <p class={styles.title}>客服电话：</p>
                <p>{state.phone || '--'}</p>
              </div>
              <div class={styles.info}>
                <p class={styles.title}>E-mail：</p>
                <p>{state.email || '--'}</p>
              </div>
            </div>
          </div>
          <div class={styles.copyright}>
            <a target="_blank" href="https://beian.miit.gov.cn/">
              网站备案：鄂ICP备2021020787号-1
            </a>
            ｜增值电信业务经营许可证：鄂B2-20231246｜教育移动互联网应用备案：教APP备4200212号｜网络安全等级保护备案号：42010043158-24001{' '}
            <br />
            Copyright@2021-2024｜酷乐秀 colexiu.com 版权所有
          </div>
        </div>
      </div>
    );
  }
});
