<template>
  <Card title="帮助文档">
    <div>
      <template v-for="item in helpDoc" :key="item.title">
        <AnchorLink v-bind="item" />
      </template>
    </div>
    <Card
      :tab-list="tabListTitle"
      v-bind="$attrs"
      :active-tab-key="activeKey"
      :bordered="false"
      @tabChange="onTabChange"
      :bodyStyle="{ padding: 0 }"
    >
      <div v-if="activeKey === 'tab1'">
        <List item-layout="horizontal" :data-source="data">
          <template #renderItem="{ item }">
            <ListItem>
              <ListItemMeta :description="item.description">
                <template #title>
                  <a href="https://www.antdv.com/">{{ item.title }}</a>
                </template>
                <template #avatar>
                  <Avatar :src="item.avatar" />
                </template>
              </ListItemMeta>
              <template #extra> {{ item.date }} </template>
            </ListItem>
          </template>
        </List>
      </div>
      <div v-else>222</div>
    </Card>
    <Card hoverable title="联系我们" :bordered="false">
      <template #cover>
        <img :src="getQrCode" alt="" style="width: 150px; height: 150px; margin: 50px auto" />
      </template>
      <CardMeta>
        <template #description>
          <p>联系人: {{ getContacts }}</p>
          <p>联系电话: {{ getTel }}</p>
          <p>联系地址: {{ getAddress }} </p>
        </template>
      </CardMeta>
    </Card>
  </Card>
</template>

<script lang="ts">
  import { defineComponent, ref, computed, onMounted } from 'vue';
  import { Card, AnchorLink, List, ListItem, ListItemMeta, Avatar, CardMeta } from 'ant-design-vue';
  import { useUserStore } from '/@/store/modules/user';
  import { getEnterPriseDetail } from '/@/api/oem';
  export default defineComponent({
    components: {
      Card,
      AnchorLink,
      List,
      ListItem,
      ListItemMeta,
      Avatar,
      CardMeta,
    },
    setup() {
      onMounted(async () => {
        const res = await getEnterPriseDetail();
        userStore.setEnterPriseInfo(res);
      });
      const helpDoc = ref([
        {
          title: '如何接入设备?',
          href: '',
        },
        {
          title: '什么是设备配置?',
          href: '',
        },
        {
          title: '云组态模板如何使用?',
          href: '',
        },
        {
          title: '查看全部>>',
          href: '',
        },
      ]);

      const activeKey = ref('tab1');
      const tabListTitle = [
        {
          key: 'tab1',
          tab: '通知公告',
        },
        {
          key: 'tab2',
          tab: '系统公告',
        },
      ];
      const onTabChange = (key) => {
        activeKey.value = key;
      };

      // 列表
      interface DataItem {
        title: string;
        description: string;
        avatar: string;
        date: string;
      }
      const data: DataItem[] = [
        {
          title: '企业管理员',
          description: '现在就来开创新的记录吧！',
          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          date: '5分钟前',
        },
        {
          title: '企业管理员',
          description: '有新的告警数据需要处理,现在去查看吧',
          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          date: '7小时前',
        },
        {
          title: '管理员',
          description: '有新的告警数据需要处理,现在去查看吧',
          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          date: '6小时前',
        },
        {
          title: '管理员',
          description: '现在就来开创新的记录吧！',
          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          date: '1小时前',
        },
        {
          title: '管理员',
          description: '现在就来开创新的记录吧！',
          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          date: '7小时前',
        },
      ];

      const userStore = useUserStore();
      const getContacts = computed(() => {
        return userStore.enterPriseInfo?.contacts;
      });
      const getAddress = computed(() => {
        return userStore.enterPriseInfo?.address;
      });
      const getTel = computed(() => {
        return userStore.enterPriseInfo?.tel;
      });
      const getQrCode = computed(() => {
        return userStore.enterPriseInfo?.qrCode;
      });

      return {
        activeKey,
        tabListTitle,
        onTabChange,
        data,
        helpDoc,
        getQrCode,
        getContacts,
        getAddress,
        getTel,
      };
    },
  });
</script>

<style lang="less" scoped></style>