<template>
  <div class="select-team  bg-common-bg px-4">
    <div class="header px-4 fixed top-0 left-0 w-full z-10">
      <search-bar
        v-model="search"
        placeholder="搜索团队名称、团队号"
        @search="handleSearch"
        @cancel="$router.go(-1)"
      />
    </div>
    <div class="content pt-14">
      <div class="mt-2.5">
        <div
          v-for="(item, index) in result"
          :key="index"
          class="bg-white p-4 rounded flex items-center mb-px"
          @click="$router.push('/team/join-team')"
        >
          <div class="w-10 h-10 mr-6 flex-shrink-0">
            <img src="@/assets/images/33.png" alt="" class="max-w-full">
          </div>
          <div class="flex-1 overflow-hidden">
            <div class="font-medium truncate">{{ item.name }}</div>
            <div class="text-sm text-text-secondary font-medium truncate">团队号 {{ item.number }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default Vue.extend({
  name: 'SearchTeam',
  components: {
    // 'main-page': () => import('@/layout/main-page.vue'),
    // 'app-icon': () => import('@/components/common/Icon.vue'),
    'search-bar': () => import('@/components/common/search-bar.vue')
    // 'c-button': () => import('./components/c-button.vue')
  },
  data() {
    return {
      search: '',
      result: [
        {
          name: '杭州复杂美科技有限公司',
          number: 'HZFZM0001'
        },
        {
          name: '杭州复杂美科技有限公司',
          number: 'HZFZM0001'
        }
      ]
    }
  },
  methods: {
    handleSearch() {
      console.log('search ' + this.search)
    }
  }
})
</script>

<style>

</style>
