<template>
  <a-card
    :active-tab-key="key"
    :bodyStyle="{ padding: 0 }"
    :bordered="false"
    :tab-list="tabList"
    @tabChange="key => onTabChange(key, 'key')"
  >
    <a-table :columns="columns" :data-source="data" :pagination="false" />
  </a-card>
</template>
<script>
export default {
  data() {
    return {
      key: '1',
      tabList: [
        {
          key: '1',
          tab: '新建项目',
        },
        {
          key: '2',
          tab: '正在签约项目',
        },
        {
          key: '3',
          tab: '完成签约项目',
        },
        {
          key: '4',
          tab: '项目进度',
        },
      ],

      columns: [
        {
          title: '区域',
          dataIndex: 'area',
        },
        {
          title: '项目名称',
          dataIndex: 'title',
        },
        {
          title: '户数',
          dataIndex: 'count',
        },
        {
          title: '时间',
          dataIndex: 'date',
        },
      ],
      data: [
        {
          key: '1',
          area: '海曙区',
          title: '曙光电影院地块',
          count: 13,
          date: '2021-01-01',
        },
        {
          key: '2',
          area: '江北区',
          title: '大庆新村地块旧城区改建项目',
          count: 322,
          date: '2021-01-01',
        },
        {
          key: '3',
          area: '宁海县',
          title: '桥头胡街道旧城区改造华驰文教地块',
          count: 1,
          date: '2021-01-01',
        },
        {
          key: '4',
          area: '慈溪市',
          title: '七二三南延道路工程',
          count: 1,
          date: '2021-01-01',
        },
        {
          key: '5',
          area: '北仑区',
          title: '原粮食局宿舍楼1号、2号楼（太河路北延工程）',
          count: 32,
          date: '2021-01-01',
        },
      ],
    };
  },
  methods: {
    onTabChange(key, type) {
      this[type] = key;
    },
  },
};
</script>