<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="有新的告警数据需要处理，现在就去查看吧">
                <template #title>
                  <a href="https://www.antdv.com/">{{ item.title }}</a>
                </template>
                <template #avatar>
                  <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                </template>
              </ListItemMeta>
              <template #extra> 7小时前 </template>
            </ListItem>
          </template>
        </List>
      </div>
      <div v-else>222</div>
    </Card>
    <Card hoverable title="联系我们" :bordered="false">
      <template #cover>
        <QrCode :value="qrCodeUrl" />
      </template>
      <CardMeta>
        <template #description>
          <p>联系人: 张三</p>
          <p>联系电话: 15912341234</p>
          <p>联系地址: 四川省成都市剑南大道北段中1533号 </p>
        </template>
      </CardMeta>
    </Card>
  </Card>
</template>

<script lang="ts">
  import { defineComponent, ref, unref } from 'vue';
  import { Card, AnchorLink, List, ListItem, ListItemMeta, Avatar, CardMeta } from 'ant-design-vue';
  import { QrCode, QrCodeActionType } 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;
      }
      const data: DataItem[] = [
        {
          title: '企业管理员',
        },
        {
          title: '企业管理员',
        },
        {
          title: '管理员',
        },
        {
          title: '管理员',
        },
        {
          title: '管理员',
        },
      ];

      const qrRef = ref<Nullable<QrCodeActionType>>(null);
      const qrCodeUrl = 'https://www.vvbin.cn';
      const download = () => {
        const qrEl = unref(qrRef);
        if (!qrEl) return;
        qrEl.download('文件名');
      };

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

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