<template>
  <!-- 搜索 -->
  <main-page
    left-arrow
    @click-left="goBack"
  >
    <div slot="header" class="text-text-secondary flex items-center">
      <div
        v-for="tab in tabs"
        :key="tab.key"
        class="py-1.5 px-4"
        :class="currentKey === tab.key ? 'rounded-full bg-color-primary text-white' : ''"
        @click="currentKey = tab.key"
      >
        {{ tab.label }}
      </div>
    </div>
    <div class="pt-12 px-4 pb-4">
      <search-bar
        v-model="search"
        placeholder="客户姓名、公司名称"
        class="sticky top-12"
        @search="handleSearch"
      >
        <div
          slot="action"
          class="text-color-primary font-medium"
          @click="$router.go(-1)"
        >
          取消
        </div>
      </search-bar>
      <search-history
        :history.sync="history"
        @search="searchHistory"
      />
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from 'vue'
import Mock from 'mockjs'

const length = Mock.mock({
  'number|1-10': 2
}).number
const history: Array<string> = []
for (let i = 0; i <= length; i++) {
  history.push(Mock.mock('@ctitle'))
}

export default Vue.extend({
  name: 'Search',
  components: {
    'search-bar': () => import('@/components/common/search-bar.vue'),
    'main-page': () => import('@/layout/main-page.vue'),
    // 'app-icon': () => import('@/components/common/Icon.vue'),
    'search-history': () => import('@/views/client/components/search-history.vue')
    // 'client-card': () => import('@/views/client/components/client-card.vue')
  },
  data() {
    return {
      history,
      tabs: [
        {
          label: '我跟进的',
          key: 'mine'
        },
        {
          label: '公共资源',
          key: 'public'
        }
      ],
      currentKey: 'public',
      search: ''
    }
  },
  methods: {
    handleSearch() {
      console.log(this.search, 'val')
      this.$router.push({
        path: '/client/search-result',
        query: {
          keyword: this.search
        }
      })
    },
    searchHistory(keyword: string) {
      this.search = keyword
      this.$router.push({
        path: '/client/search-result',
        query: {
          keyword: this.search
        }
      })
    },
    goBack() {
      this.$router.go(-1)
    }
  }
})
</script>

<style lang="less">

</style>
