<template>
  <div class="demo-empty-builtin">
    <h3>Select</h3>
    <ui-select :options="[]"></ui-select>

    <h3>TreeSelect</h3>
    <ui-tree-select
      :tree-data="[]">
    </ui-tree-select>

    <h3>Cascader</h3>
    <ui-cascader
      filterable
      :options="cascaderOptions">
    </ui-cascader>

    <h3>Transfer</h3>
    <ui-transfer
      filterable
      :data="transferOptions">
    </ui-transfer>

    <h3>Table</h3>
    <ui-table
      :data-source="[]"
      :columns="colmuns">
    </ui-table>
  </div>
</template>

<script>
import { Select, Transfer, Cascader, Table, TreeSelect } from "amumu-ui"
export default {
  components: {
    "ui-select": Select,
    "ui-tree-select": TreeSelect,
    "ui-cascader": Cascader,
    "ui-transfer": Transfer,
    "ui-table": Table,
  },
  data() {
    const transferOptions = []
    const cities = ["上海", "北京", "广州", "深圳", "南京", "西安", "成都"]
    const pinyin = [
      "shanghai",
      "beijing",
      "guangzhou",
      "shenzhen",
      "nanjing",
      "xian",
      "chengdu",
    ]
    cities.forEach((city, index) => {
      transferOptions.push({
        label: city,
        key: index,
        pinyin: pinyin[index],
      })
    })

    return {
      colmuns: [
        {
          title: "ID",
          key: "id",
        },
        {
          title: "标题",
          key: "title",
        },
        {
          title: "状态",
          key: "status",
        },
        {
          title: "处理人",
          key: "handler",
        },
      ],
      transferOptions,
      cascaderOptions: [
        {
          value: "zhejiang",
          label: "Zhejiang",
          children: [
            {
              value: "hangzhou",
              label: "Hangzhou",
              children: [
                {
                  value: "xihu",
                  label: "West Lake",
                },
              ],
            },
          ],
        },
      ],
    }
  },
}
</script>

<style lang="scss">
.demo-empty-builtin {
}
</style>
