<template>
  <div>
    <div>
      <ShowCode :formatCode="formatCode"
                :subTitle="$t('demo.selectListSearch.text_2')"
                :title="$t('demo.selectListSearch.text_1')">
        <HtSelectSearch :curValue.sync="curValue"
                        @select="selectHandler"
                        @onRichBottom="richBottomHandler"></HtSelectSearch>
      </ShowCode>
    </div>
    <div class="demo-block">
      <ShowCode :formatCode="noSearchCode"
                :title="$t('demo.selectListSearch.text_3')"
                :subTitle="$t('demo.selectListSearch.text_4')">
        <HtSelectSearch :isShowSearch="false"
                        @onRichBottom="richBottomHandler"></HtSelectSearch>

      </ShowCode>
    </div>
    <div class="demo-block">
      <ShowCode :formatCode="loadCompeted"
                :title="$t('demo.selectListSearch.text_5')"
                :subTitle="$t('demo.selectListSearch.text_5')">
        <HtSelectSearch :isShowSearch="false"
                        :total="5"
                        @onRichBottom="richBottomHandler"></HtSelectSearch>

      </ShowCode>
    </div>
    <div class="demo-block">
      <h2 class="demo-header-text">Attributes</h2>
      <MdViews url="md/select-search/attributes.md">

      </MdViews>
    </div>
    <div>
      <h2 class="demo-header-text">Events</h2>
      <MdViews url="md/select-search/event.md">

      </MdViews>
    </div>
    <div>
      <h2 class="demo-header-text">Slot</h2>
      <MdViews url="md/select-search/slot.md">

      </MdViews>
    </div>

  </div>
</template>

<script>
import { searchCode, noSearchCode, loadCompeted } from './html/search.code'
export default {
  name: 'htSelect',
  data () {
    return {
      formatCode: searchCode,
      curValue: '',
      noSearchCode: noSearchCode,
      loadCompeted
    }
  },
  watch: {
    curValue (val) {
      console.log(val)
    }
  },
  components: {
    ShowCode: () => import('@/components/common/show-code'),
    MdViews: () => import('@/views/MdView')
  },
  methods: {
    selectHandler (obj) {
      console.log(obj)
    },
    richBottomHandler () {
      console.log('加载更多>>>>')
    }
  }
}
</script>

<style scoped lang="scss">
</style>
