<template>
  <!-- 客户管理 -->
  <main-page
    left-arrow
    @click-left="$router.go(-1)"
  >
    <template slot="header">
      <div 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>
    </template>
    <template slot="right">
      <div class="">
        <app-icon
          icon-name="plus-black"
          class-name="h-6.5 w-6.5"
          @click="addClient"
        />
      </div>
    </template>
    <div class="pt-12 px-4 pb-4">
      <div class="grid grid-cols-2 text-text-secondary font-medium text-sm bg-common-bg sticky top-12">
        <div class="flex items-center justify-center py-3" @click="clickTab('search')">
          <app-icon
            icon-name="search-blue"
            class-name="w-6.5 h-6.5"
          />
          <div class="ml-1.5">搜索</div>
        </div>
        <div class="flex items-center justify-center py-3" @click="clickTab('filter')">
          <app-icon
            icon-name="tag"
            class-name="w-5 h-5"
          />
          <div class="ml-2.5">筛选</div>
        </div>
      </div>
      <client-card class="mt-2" @click="$router.push('client-info')" />
      <client-card class="mt-4" @click="$router.push('client-info')" />
      <client-card class="mt-4" @click="$router.push('client-info')" />
      <client-card class="mt-4" @click="$router.push('client-info')" />
    </div>
  </main-page>
</template>

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

export default Vue.extend({
  name: 'ClientManagement',
  components: {
    'app-icon': () => import('@/components/common/Icon.vue'),
    'main-page': () => import('@/layout/main-page.vue'),
    'client-card': () => import('@/views/client/components/client-card.vue')
  },
  data() {
    return {
      tabs: [
        {
          label: '我跟进的',
          key: 'mine'
        },
        {
          label: '公共资源',
          key: 'public'
        }
      ],
      currentKey: 'public'
    }
  },
  methods: {
    clickTab(action: string) {
      if (action === 'search') {
        this.$router.push('/client/search-client')
      } else if (action === 'filter') {
        this.$router.push('/client/filter')
      }
    },
    addClient() {
      console.log('add client')
    }
  }
})
</script>

<style lang="less">

</style>
