<template>
  <div class="add-client">
    <main-page left-arrow @click-left="handleClickLeft">
      <div class="px-4 pt-14 pb-16">
        <input-cell
          v-model="name"
          required
          :limit="20"
          label="真实姓名"
          placeholder="请输入客户姓名(必填)"
          error-msg="姓名不能为空"
        />
        <c-cell
          dot
          title="标签"
          class="mt-4"
          @click="$router.push('/client/select-tag')"
        />
        <input-cell
          v-model="tel"
          label="电话号码"
          placeholder="添加电话号码"
          class="mt-4"
        >
          <app-icon
            slot="prefix"
            type="png"
            :path="require('@/assets/icons/y-add.png')"
            class-name="w-6.5 h-6.5 mr-3"
          />
        </input-cell>
        <input-cell
          v-model="address"
          :limit="50"
          label="地址"
          placeholder="请输入客户地址"
          class="mt-4"
        />
        <c-cell dot>
          <div slot="prefix" class="flex ">
            <div class="flex items-center">
              <app-icon
                type="png"
                :path="require('@/assets/icons/location.png')"
                class-name="w-4 h-5 self-center"
              />
            </div>
            <div class="text-text-secondary mx-2">支持地图定位</div>
          </div>
        </c-cell>
        <input-cell
          v-model="company"
          label="公司"
          placeholder="请输入客户公司"
          class="mt-4"
        />
        <input-cell
          v-model="position"
          label="职位"
          placeholder="请输入客户职位"
          class="mt-4"
        />
        <input-cell
          v-model="remarks"
          label="备注"
          placeholder="请输入备注"
          class="mt-4"
        />
        <div class="mb-8">
          <c-cell dot title="跟进人" class="mt-4" />
        </div>
        <div class="fixed px-4 py-1.5 bottom-0 left-0 w-full">
          <c-button> 完成 </c-button>
        </div>
      </div>
    </main-page>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'AddClient',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'input-cell': () => import('@/components/common/input-cell.vue'),
    'c-cell': () => import('@/components/common/c-cell.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'c-button': () => import('@/components/common/c-button.vue')
  },
  data() {
    return {
      name: '',
      tel: '',
      address: '',
      location: '',
      company: '',
      position: '',
      remarks: ''
    }
  },
  created() {
    // console.log(Mock, 'mock')
  },
  methods: {
    handleClickLeft() {
      this.$router.go(-1)
    }
  }
})
</script>

<style>
</style>
