<template>
  <!-- 编辑客户 -->
  <main-page
    left-arrow
    @click-left="$router.go(-1)"
  >
    <div class="pt-14 px-4 pb-16">
      <input-cell
        v-model="name"
        required
        label="姓名"
        placeholder="请输入姓名(必填)"
        :limit="20"
      />
      <group-cell
        dot
        title="标签"
        class="mt-4"
        @click="$router.push('/client/filter')"
      >
        <span slot="prefix" class="text-color-primary mr-0.5">*</span>
        <div class="bg-white px-4 py-2">
          <div v-if="tags.length > 0" class="">
            <c-tag
              v-for="(tag, index) in tags"
              :key="index"
              :label="tag.label"
              :color="tag.color"
              class="mr-1.5 mb-1"
            />
          </div>
          <div v-else class="text-sm text-red-400">请选择标签</div>
        </div>
      </group-cell>
      <input-cell
        v-model="phone"
        label="电话"
        placeholder="请输入电话号码"
      >
        <app-icon
          slot="prefix"
          icon-name="plus-round"
          class-name="w-6.5 h-6.5 mr-4"
        />
      </input-cell>
      <input-cell
        v-model="address"
        label="地址"
        type="textarea"
        class="mt-4"
        :limit="50"
      />
      <c-cell dot>
        <div
          slot="content"
          class="w-full flex items-center"
        >
          <app-icon
            icon-name="location"
            class-name="w-4"
          />
          <span class="ml-2 text-sm text-text-secondary">显示定位</span>
        </div>
      </c-cell>
      <input-cell
        v-model="company"
        label="公司"
        class="mt-4"
      />
      <input-cell
        v-model="position"
        label="职位"
        class="mt-4"
      />
      <div class="mt-4">
        <div
          class="px-4 py-2 bg-white mb-px rounded flex items-center justify-between"
          @click="$router.push({
            path: '/team/team-frame',
            query: {
              transfer: 1
            }
          })"
        >
          <div class="title">跟进人</div>
          <div class="flex items-center">
            <div class="text-sm text-text-secondary mr-1.5">共{{ follows.length }}人</div>
            <app-icon
              icon-name="dot"
              class-name="w-1 h-5"
            />
          </div>
        </div>
        <div class="bg-white rounded px-4 py-2.5">
          <div v-if="follows.length < 1" class="text-sm text-text-secondary">暂无跟进人</div>
          <div v-else class="flex">
            <div
              v-for="follow in follows"
              :key="follow.id"
              class="flex flex-col items-center mt-2 mr-4"
            >
              <app-icon
                icon-name="avator"
                class-name="h-12 w-12"
              />
              <div class="text-xs text-text-secondary mt-1">{{ follow.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fixed bottom-0 left-0 bg-common-bg w-full px-4 py-1.5">
      <c-button>完成</c-button>
    </div>
  </main-page>
</template>

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

export default Vue.extend({
  name: 'EditClient',
  components: {
    'app-icon': () => import('@/components/common/Icon.vue'),
    'main-page': () => import('@/layout/main-page.vue'),
    'input-cell': () => import('@/components/common/input-cell.vue'),
    'c-button': () => import('@/components/common/c-button.vue'),
    'group-cell': () => import('@/components/common/group-cell.vue'),
    'c-tag': () => import('@/components/common/c-tag.vue'),
    'c-cell': () => import('@/components/common/c-cell.vue')
  },
  data() {
    return {
      name: '刘强',
      phone: '13112345678',
      address: '单行高度100，这里是输入的客户地址，没有地址不用显示',
      company: '杭州复杂美科技有限公司',
      position: '市场经理',
      tags: [
        {
          color: 'primary',
          label: '合作伙伴'
        },
        {
          color: 'orange',
          label: '核心'
        },
        {
          color: 'green',
          label: '洽谈'
        },
        {
          color: 'primary',
          label: '这里是标签最多十个字'
        }
      ],
      follows: [
        { name: '跟进人', id: 1 },
        { name: '真实姓名', id: 2 }
      ]
    }
  },
  methods: {
    clickTab(action: string) {
      console.log(action)
    },
    addClient() {
      console.log('add client')
    }
  }
})
</script>

<style lang="less">

</style>
