<template>
  <Layout height="300" width="400" layout="full_screen">
    <layout-item slot="top">
      top
    </layout-item>
    <layout-item slot="left">left</layout-item>
    <layout-item :primary="true" slot="center" class="inner-layout">
      <layout layout="fill_parent">
        <layout-item slot="top">inner-layout: top</layout-item>
        <layout-item slot="left" :primary="true">inner-layout: left1</layout-item>
        <layout-item slot="left" :primary="true">inner-layout: left2</layout-item>
        <layout-item slot="center" :primary="true">
          <sy-select :fetchSuggestions="queryfn" @select="selectItem"></sy-select>
          <p>this is your content!</p>
          <el-cascader
            placeholder="试试搜索：指南"
            filterable
            :options="cascade.options"
            v-model="cascadeValue"
          />
        </layout-item>
        <layout-item slot="right" :primary="true">inner-layout: right</layout-item>
      </layout>
    </layout-item>
    <layout-item slot="right">right</layout-item>
    <layout-item slot="bottom">bottom</layout-item>
  </Layout>
</template>
<script>
/**
 * Created by fuzl on 2017-11-9.
 */
import { cascade } from './data';

export default {
  components: {},
  data() {
    return {
      address: '',
      cascade,
      cascadeValue: '',
    };
  },
  methods: {
    queryfn(queryString, cb) {
      //            console.log(queryString);
      setTimeout(() => {
        cb([{
          key: '1',
          value: '李明1',
        }, {
          key: '2',
          value: '王二1',
        }, {
          key: '3',
          value: '陈四1',
        }]);
      }, 1000);
    },
    selectItem(item) {
      alert(`你选中了 ${item.value}!`);
    },
  },
};
</script>
<style></style>
