<template>
  <!-- 客户信息 -->
  <main-page
    header-bg="bg-color-primary"
    title-color="text-white"
  >
    <app-icon
      slot="left"
      icon-name="left-arrow-white"
      class-name="w-6.5 h-6.5"
      @click="$router.go(-1)"
    />
    <div slot="right" class="h-6.5 w-6.5 flex items-center justify-end">
      <app-icon
        icon-name="dot-white"
        class-name="w-1 h-5"
        @click="show = true"
      />
    </div>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      @select="onSelect"
    />
    <!-- 头像名称 -->
    <div class="content">
      <div class="pt-14 header bg-color-primary px-4 pb-16">
        <div class="info flex">
          <app-icon
            icon-name="avator"
            class-name="h-12 w-12 flex-shrink-0"
          />
          <div class="text-white ml-4">
            <div class="title">客户姓名什么什么什么什么什么什么什什么什</div>
            <div class="text-sm mt-1">最后跟进时间：03-19 12:23</div>
            <div class="text-sm mt-1">添加人：真实姓名</div>
          </div>
        </div>
      </div>
      <!-- 信息 -->
      <div class="px-4 -mt-11 pb-20">
        <!-- 跟进 -->
        <c-cell
          dot
          title-color="text-text-secondary"
          title="跟进"
          content="2"
          @click="$router.push('/client/follows')"
        >
          <div slot="content" class="w-full flex items-center mr-4 overflow-hidden">
            <app-icon
              icon-name="avator"
              class-name="h-6 w-6 mr-1"
            />
            <app-icon
              icon-name="avator"
              class-name="h-6 w-6"
            />
          </div>
        </c-cell>
        <!-- 标签 -->
        <c-cell
          title-color="text-text-secondary"
          title="标签"
          content-class="items-start"
        >
          <div slot="content" class="w-full flex flex-wrap items-center">
            <c-tag class="mr-1.5 mb-1.5" label="客户" />
            <c-tag
              class="mr-1.5 mb-1.5"
              label="重要"
              color="red"
            />
            <c-tag
              class="mr-1.5 mb-1.5"
              label="洽谈"
              color="green"
            />
            <c-tag
              class="mr-1.5 mb-1.5"
              label="洽谈"
              color="purple"
            />
            <c-tag
              label="这里是标签最多十个字"
              color="green"
            />
          </div>
        </c-cell>
        <!-- 电话 -->
        <c-cell
          title-color="text-text-secondary"
          title="电话"
          content-class="items-start"
        >
          <div slot="content" class="w-full flex">
            <div class="flex-1">13112345678</div>
            <div class="flex-shrink-0 grid grid-cols-2 gap-2.5">
              <app-icon
                icon-name="message"
                class-name="w-5 h-5"
              />
              <app-icon
                icon-name="phone"
                class-name="w-5 h-5"
              />
            </div>
          </div>
        </c-cell>
        <!-- 邮箱 -->
        <c-cell
          title-color="text-text-secondary"
          title="邮箱"
          content-class="items-start"
        >
          <div slot="content" class="w-full break-all">
            123456789@disanbo.com12
          </div>
        </c-cell>
        <!-- 地址 -->
        <c-cell
          title-color="text-text-secondary"
          title="地址"
          content-class="items-start"
        >
          <div slot="content" class="w-full break-all">
            单行高度100，这里是输入的客户地址，没有地址不用显示
          </div>
        </c-cell>
        <!-- 定位 -->
        <c-cell dot>
          <div slot="prefix" class="px-2">
            <app-icon
              icon-name="location"
              class-name="w-4 h-4.5"
            />
          </div>
          <div slot="content" class="w-full text-text-secondary">
            显示定位
          </div>
        </c-cell>
        <!-- 公司 -->
        <c-cell
          title-color="text-text-secondary"
          title="地址"
          content-class="items-start"
        >
          <div slot="content" class="w-full break-all">
            杭州复杂美科技有限公司
          </div>
        </c-cell>
        <!-- 职位 -->
        <c-cell
          title-color="text-text-secondary"
          title="职位"
          content-class="items-start"
        >
          <div slot="content" class="w-full break-all">
            市场经理
          </div>
        </c-cell>
        <!-- 备注 -->
        <c-cell
          title-color="text-text-secondary"
          title="备注"
          content-class="items-start"
        >
          <div slot="content" class="w-full break-all">
            这里是备注备注
          </div>
        </c-cell>
        <!-- 跟进信息 -->
        <div class="grid grid-cols-1 gap-y-4 mt-6">
          <template v-for="(record, index) in records">
            <follow-record
              :key="index"
              :record="record"
            />
          </template>
        </div>
      </div>
    </div>
    <div class="fixed bottom-0 left-0 w-full px-4 py-2 bg-common-bg">
      <c-button round>添加跟进记录</c-button>
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from 'vue'
import * as Records from '@/DTO/follow-records'
import { ActionSheet } from 'vant'
Vue.use(ActionSheet)

export default Vue.extend({
  name: 'ClientManagement',
  components: {
    'app-icon': () => import('@/components/common/Icon.vue'),
    'main-page': () => import('@/layout/main-page.vue'),
    'c-cell': () => import('@/components/common/c-cell.vue'),
    'c-tag': () => import('@/components/common/c-tag.vue'),
    'follow-record': () => import('@/views/client/components/follow-record.vue'),
    'c-button': () => import('@/components/common/c-button.vue')
  },
  data() {
    return {
      records: Records.records,
      show: false,
      actions: [
        { name: '编辑', type: 'edit' },
        { name: '删除', type: 'delete' },
        { name: '退回公共资源', type: 'back' }
      ]
    }
  },
  methods: {
    onSelect(item: {name: string, type: string}) {
      this.show = false
      console.log(item.type, 'item')
      if (item.type === 'edit') {
        this.$router.push('/client/edit-client')
      }
    }
  }
})
</script>

<style lang="less">

</style>
