<template>
  <container>
    <br />
    <a-card :bordered="false">
      <div class="yo-query-bar">
        <a-form-model :model="query" layout="inline">
          <a-form-model-item label="区域">
            <a-select :style="{ width: '100px' }" v-model="query.area">
              <a-select-option value="宁波市">宁波市</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="年份">
            <a-select :style="{ width: '100px' }" v-model="query.year">
              <a-select-option value="2020">2020</a-select-option>
              <a-select-option value="2021">2021</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item>
            <a-button html-type="submit" type="primary">查询</a-button>
          </a-form-model-item>
        </a-form-model>
      </div>

      <a-table
        :bordered="true"
        :columns="columns"
        :data-source="data"
        :pagination="{ pageSize: 20}"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
        <div class="yo-action-bar" slot="title">
          <div class="yo-action-bar--actions">
            <a-button>Button</a-button>
            <a-button>Button</a-button>
            <a-button :disabled="true">Button</a-button>
            <a-button>Button</a-button>
            <a-button-group>
              <a-button>Button</a-button>
              <a-button>Button</a-button>
              <a-button>Button</a-button>
            </a-button-group>
            <a-dropdown>
              <a-menu slot="overlay">
                <a-menu-item key="1">1st item</a-menu-item>
                <a-menu-item key="2">2nd item</a-menu-item>
                <a-menu-item key="3">3rd item</a-menu-item>
              </a-menu>
              <a-button>
                Actions
                <a-icon type="down" />
              </a-button>
            </a-dropdown>
            <a-dropdown-button>
              Dropdown
              <a-menu slot="overlay">
                <a-menu-item key="1">
                  <a-icon type="user" />1st menu item
                </a-menu-item>
                <a-menu-item key="2">
                  <a-icon type="user" />2nd menu item
                </a-menu-item>
                <a-menu-item key="3">
                  <a-icon type="user" />3rd item
                </a-menu-item>
              </a-menu>
            </a-dropdown-button>
          </div>
        </div>
      </a-table>
    </a-card>
    <br />
  </container>
</template>
<script>
const _data = [
  {
    area: '海曙区',
    title: '曙光电影院地块',
    count: 13,
    date: '2021-01-01',
  },
  {
    area: '江北区',
    title: '大庆新村地块旧城区改建项目',
    count: 322,
    date: '2021-01-01',
  },
  {
    area: '宁海县',
    title: '桥头胡街道旧城区改造华驰文教地块',
    count: 1,
    date: '2021-01-01',
  },
  {
    area: '慈溪市',
    title: '七二三南延道路工程',
    count: 1,
    date: '2021-01-01',
  },
  {
    area: '北仑区',
    title: '原粮食局宿舍楼1号、2号楼（太河路北延工程）',
    count: 32,
    date: '2021-01-01',
  },
];

const data = Object.assign([], _data, _data, _data);
data.map((p, i) => (p.key = 'abcdefghijklmnopqrstuvwxyz'[i]));

export default {
  data() {
    return {
      query: {
        area: '宁波市',
        year: '2021',
      },
      columns: [
        {
          title: '区域',
          dataIndex: 'area',
        },
        {
          title: '项目名称',
          dataIndex: 'title',
        },
        {
          title: '户数',
          dataIndex: 'count',
        },
        {
          title: '时间',
          dataIndex: 'date',
        },
      ],
      data,
      selectedRowKeys: [],
    };
  },
  methods: {
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
  },
};
</script>