<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" :dataSource="dataSource">
          <template #renderItem="{ item }">
            <ListItem>
              <ListItemMeta>
                <template #avatar>
                  <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                </template>
                <template #description>
                  <span
                    @click="go('/stationnotification/mynotification')"
                    class="cursor-pointer noticeTitle"
                    >{{ item.sysNotice.title }}
                  </span>
                </template>
                <template #title>
                  <span>{{ item.user.realName }}</span>
                </template>
              </ListItemMeta>
              <template #extra>
                <Time :value="item.sysNotice.senderDate" />
              </template>
            </ListItem>
          </template>
        </List>
        <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>
      </div>
    </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';
  import { notifyMyGetrPageApi } from '/@/api/stationnotification/stationnotifyApi';
  import { Time } from '/@/components/Time';
  import { useGo } from '/@/hooks/web/usePage';
  export default defineComponent({
    components: {
      Card,
      AnchorLink,
      List,
      ListItem,
      ListItemMeta,
      Avatar,
      Time,
      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: '我的通知',
        },
      ];
      const onTabChange = (key) => {
        activeKey.value = key;
      };

      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;
      });

      // 通知数据
      const dataSource = ref([]);
      const go = useGo();
      onMounted(async () => {
        const res = await notifyMyGetrPageApi({ page: 1, pageSize: 5 });
        dataSource.value = res.items;
      });

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

<style lang="less" scoped>
  .noticeTitle:hover {
    border-bottom: 1px solid #ccc;
  }
</style>