<template>
  <div>
    <a-tabs default-active-key="todo" size="large" :class="$style.tabs" @change="callback">
      <a-tab-pane key="todo">
        <span slot="tab"> 待处理<a-badge :count="userInfo.todoNumbers"> </a-badge> </span>
        <todo-list list-type="todo" />
      </a-tab-pane>
      <a-tab-pane key="processed" tab="已处理"><todo-list list-type="processed"/></a-tab-pane>
      <a-tab-pane key="completed" tab="已办结"><todo-list list-type="completed"/></a-tab-pane>
    </a-tabs>
  </div>
</template>

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

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

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