<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>
        <QrCode :value="qrCodeUrl" class="flex justify-center" />
      </template>
      <CardMeta>
        <template #description>
          <p>联系人: 张三</p>
          <p>联系电话: 15912341234</p>
          <p>联系地址: 四川省成都市剑南大道北段中1533号 </p>
        </template>
      </CardMeta>
    </Card>
  </Card>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { Card, AnchorLink, List, ListItem, ListItemMeta, Avatar, CardMeta } from 'ant-design-vue';
  import { QrCode } from '/@/components/Qrcode/index';
  export default defineComponent({
    components: {
      Card,
      AnchorLink,
      List,
      ListItem,
      ListItemMeta,
      Avatar,
      CardMeta,
      QrCode,
    },
    setup() {
      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 qrCodeUrl = 'https://www.vvbin.cn';

      return {
        activeKey,
        tabListTitle,
        onTabChange,
        data,
        helpDoc,
        qrCodeUrl,
      };
    },
  });
</script>

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