<template>
  <PageWrapper>
    <a-card>
      <a-tabs :animated="false">
        <template v-for="item in achieveList" :key="item.key">
          <a-tab-pane>
            <template #tab>
              <span>
                <component :is="item.iconComponent" />
                {{ item.name }}</span
              >
            </template>
            <component :is="item.component" />
          </a-tab-pane>
        </template>
      </a-tabs>
    </a-card>
  </PageWrapper>
</template>

<script lang="ts">
  import { VideoCameraOutlined, PlayCircleOutlined } from '@ant-design/icons-vue';
  import { PageWrapper } from '/@/components/Page';
  import { Card, Tabs } from 'ant-design-vue';
  import { defineComponent, ref } from 'vue';
  import LiveBroadcast from './components/LiveBroadcast.vue';
  import Playback from './components/Playback.vue';
  export interface TabItem {
    key: string;
    name: string;
    component: string;
    iconComponent: string;
  }
  const achieveList: TabItem[] = [
    {
      key: '1',
      name: '监控',
      component: 'LiveBroadcast',
      iconComponent: 'VideoCameraOutlined',
    },
    {
      key: '2',
      name: '视频',
      component: 'Playback',
      iconComponent: 'PlayCircleOutlined',
    },
  ];
  export default defineComponent({
    components: {
      [Card.name]: Card,
      [Tabs.name]: Tabs,
      [Tabs.TabPane.name]: Tabs.TabPane,
      PageWrapper,
      VideoCameraOutlined,
      PlayCircleOutlined,
      LiveBroadcast,
      Playback,
    },
    setup() {
      return {
        achieveList,
        activeKey: ref('1'),
      };
    },
  });
</script>

<style scoped></style>
