<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.replace('/client/search-client')"
        >
          取消
        </div>
      </search-bar>
      <div class="mt-2">
        <div class="result">
          <!-- 客户 -->
          <div class="text-sm text-text-secondary py-1.5">客户姓名</div>
          <div class="list">
            <div
              v-for="(client, index) in matchedResult.client"
              :key="index"
              class="flex items-center py-2"
              @click="$router.push('/client/client-info')"
            >
              <app-icon
                icon-name="avator"
                class-name="h-9 w-9"
              />
              <div class="ml-2.5 flex-1 truncate" v-html="client.name" />
            </div>
          </div>
          <!-- 公司 -->
          <div class="text-sm text-text-secondary py-1.5">公司名称</div>
          <div class="list">
            <div
              v-for="(client, index) in matchedResult.company"
              :key="index"
              class="flex items-center py-2"
            >
              <div class="h-9 w-9 flex items-center justify-center">
                <app-icon
                  icon-name="location"
                  class-name="h-4 w-4"
                />
              </div>
              <div class="ml-2.5 flex-1 truncate" v-html="client.name" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </main-page>
</template>

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

interface Result {
  [key: string]: Array<{name: string}>
}

export default Vue.extend({
  name: 'SearchResult',
  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')
  },
  beforeRouteLeave(to, from, next) {
    if (to.fullPath !== this.$route.fullPath) {
      next()
    } else {
      next(false)
    }
  },
  data() {
    return {
      tabs: [
        {
          label: '我跟进的',
          key: 'mine'
        },
        {
          label: '公共资源',
          key: 'public'
        }
      ],
      currentKey: 'public',
      result: {
        client: [
          { name: '客户姓名' },
          { name: '刘强刘' },
          { name: '刘一只鱼' }
        ],
        company: [
          { name: '刘大强信息咨询公司' },
          { name: '刘阿姨煎饼摊' }
        ]
      },
      search: '刘'
    }
  },
  computed: {
    matchedResult() {
      const obj: Result = JSON.parse(JSON.stringify(this.result))
      for (const key in obj) {
        const reg = new RegExp(this.search, 'g')
        obj[key].forEach(item => {
          item.name = item.name.replace(reg, result => {
            return `<span class="text-color-primary">${result}</span>`
          })
          return item
        })
      }
      return obj
    }
  },
  watch: {
    search(newVal) {
      if (newVal.length < 1) {
        this.$router.replace('/search-client')
      }
    }
  },
  created() {
    console.log('reas')
  },
  mounted() {
    // this.search = this.$route.query.keyword as string
    // this.changeResult(this.result)
  },
  methods: {
    handleSearch() {
      this.$router.replace({
        path: '/search-result',
        query: {
          keyword: this.search
        }
      })
      // this.changeResult(this.result)
    },
    goBack() {
      this.$router.go(-1)
    }
  }
})
</script>

<style lang="less">

</style>
