<template>
  <div v-loading="loading" class="app-container">
    <el-card class="card-box" header="客户详情">
      <el-descriptions :column="4">
        <el-descriptions-item label="客户编号">{{ detail.id | dv }}</el-descriptions-item>
        <el-descriptions-item label="客户名称">{{ detail.name | dv }}</el-descriptions-item>
        <el-descriptions-item label="客户状态">
          <dict-tag :options="dict.type.customer_status" :value="detail.status" size="small"/>
        </el-descriptions-item>
        <el-descriptions-item label="意向强度">
          <dict-tag :options="dict.type.customer_intent_level" :value="detail.intentLevel" size="small"/>
        </el-descriptions-item>
        <el-descriptions-item label="手机号码">{{ detail.mobile | dv }}</el-descriptions-item>
        <el-descriptions-item label="微信号">{{ detail.wechat | dv }}</el-descriptions-item>
        <el-descriptions-item label="来源">{{ detail.source | dv }}</el-descriptions-item>
        <el-descriptions-item label="意向">{{ detail.intents.join(',') | dv }}</el-descriptions-item>
        <el-descriptions-item label="跟进人">{{ detail.followName | dv }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ detail.remark | dv }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detail.createTime | dv }}</el-descriptions-item>
        <el-descriptions-item label="最后跟进时间">{{ detail.lastFollowTime | dv }}</el-descriptions-item>
        <el-descriptions-item label="顾虑点">{{ detail.concern | dv }}</el-descriptions-item>
        <el-descriptions-item label="痛点">{{ detail.pain | dv }}</el-descriptions-item>
        <el-descriptions-item label="关注点">{{ detail.attention | dv }}</el-descriptions-item>
        <el-descriptions-item label="需求点">{{ detail.demand | dv }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="card-box" v-if="detail.id">
      <el-tabs lazy>
        <el-tab-pane label="跟进记录" v-if="checkPermi(['bst:customerFollow:list'])">
          <customer-follow 
            :query="{customerId: detail.id}" 
            :hide-columns="['customerName']" 
            :init-data="{customerId: detail.id, customerName: detail.name}" />
        </el-tab-pane>
        <el-tab-pane label="项目列表" v-if="checkPermi(['bst:project:list'])">
          <project
            :query="{customerId: detail.id}" 
            :hide-columns="['customerName']" 
            :init-data="{customerId: detail.id, customerName: detail.name}" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getCustomer } from '@/api/bst/customer'
import CustomerFollow from '@/views/bst/customerFollow/index.vue'
import Project from '@/views/bst/project/index.vue'
import { checkPermi } from '@/utils/permission'

export default {
  name: 'CustomerView',
  dicts: ['customer_status', 'customer_intent_level'],
  components: {
    CustomerFollow,
    Project
  },
  data() {
    return {
      detail: {
        intents: []
      },
      loading: false
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    checkPermi,
    getDetail() {
      this.loading = true
      getCustomer(this.$route.params.id).then(res => {
        this.detail = res.data;
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>