<template>
  <div>
    <a-tabs default-active-key="inform" size="large" :class="$style.tabs" @change="callback">
      <a-tab-pane key="inform">
        <span slot="tab"> 待阅<a-badge :count="userInfo.toReadNumbers"> </a-badge> </span>
        <todo-list list-type="inform" />
      </a-tab-pane>
      <a-tab-pane key="replied-inform" tab="已阅">
        <todo-list list-type="replied-inform" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import list from '@/todo/sd-todo-list'
import storeMixin from '@/common/store-mixin'
import components from './_import-components/sd-mytoread-tabs-import'

export default {
  name: 'SdMytoreadTabs',
  components: {
    'todo-list': list,
    ...components,
  },
  mixins: [storeMixin],
  data() {
    return {
      type: 'inform',
      toReadNumbers: 0,
    }
  },
  methods: {
    callback(key) {
      this.type = key
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.tabs {
  :global(.ant-tabs-bar) {
    margin: 0;
  }
}
</style>
