<template>
  <div>
    <el-row type="flex" style="margin-top: 15px;margin-bottom: 15px" justify="center">
      <el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="16">
        <div style="display: flex;justify-content: space-between;align-items: flex-end;">
          <h2>查看</h2>
          <div>
            <el-button type="primary" size="small">添加优惠</el-button>
            <el-button type="primary" size="small" @click="$router.push('/customer/edit/' + customerId)">编辑</el-button>
            <el-button type="primary" size="small">报价</el-button>
            <el-button type="primary" size="small" @click="customerFollow.dialogVisible = true">跟进</el-button>
            <el-button type="primary" size="small">客诉</el-button>
            <el-button type="danger" size="small">删除</el-button>
          </div>
        </div>
        <el-card style="margin-top: 15px;">
          <el-descriptions :column="4" border>
            <el-descriptions-item label="客户编号">{{ customer.number }}</el-descriptions-item>
            <el-descriptions-item label="客户名称">{{ customer.name }}</el-descriptions-item>
            <el-descriptions-item label="结算方式">{{ getDictDataLabel(DICT_TYPE.CUSTOMER_BALANCE, customer.balance) }}</el-descriptions-item>
            <el-descriptions-item label="客户生日">{{ customer.birthday }}</el-descriptions-item>
            <el-descriptions-item label="客户等级">{{ getDictDataLabel(DICT_TYPE.CUSTOMER_LEVEL, customer.level) }}</el-descriptions-item>
            <el-descriptions-item label="国家">{{ getDictDataLabel(DICT_TYPE.COUNTRY, customer.country) }}</el-descriptions-item>
<!--            <el-descriptions-item label="业务员">{{ customer }}</el-descriptions-item>-->
            <el-descriptions-item label="客户来源">{{ getDictDataLabel(DICT_TYPE.CUSTOMER_SOURCE, customer.source) }}</el-descriptions-item>
            <el-descriptions-item label="客户类别">{{ getDictDataLabel(DICT_TYPE.CUSTOMER_TYPE, customer.type) }}</el-descriptions-item>
<!--            <el-descriptions-item label="联系方式">{{ customer }}</el-descriptions-item>-->
            <el-descriptions-item label="推介人">{{ customer.promoter }}</el-descriptions-item>
            <el-descriptions-item label="跟进客服">{{ customer.customerService }}</el-descriptions-item>
            <el-descriptions-item label="公司名称">{{ customer.company }}</el-descriptions-item>
            <el-descriptions-item label="联系地址">{{ customer.address }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ customer.createTime }}</el-descriptions-item>
            <el-descriptions-item label="状态">{{ getDictDataLabel(DICT_TYPE.CUSTOMER_STATUS, customer.status) }}</el-descriptions-item>
            <el-descriptions-item label="主营类别">{{ productType }}</el-descriptions-item>
            <el-descriptions-item label="常提货网点">{{ pickupPoint }}</el-descriptions-item>
            <el-descriptions-item label="图片">
              <el-image :src="customer.picture" style="width: 100px;height: 100px"></el-image>
            </el-descriptions-item>
            <el-descriptions-item label="备注">{{ customer.remarks }}</el-descriptions-item>
<!--            <el-descriptions-item label="信用等级">{{ customer }}</el-descriptions-item>-->
          </el-descriptions>
        </el-card>

        <el-card style="margin-top: 15px">
          <h3>联系人</h3>

          <el-table
            :data="customer.customerContacts"
            style="width: 100%"
            border
          >
            <el-table-column
              prop="department"
              label="部门"
            >
            </el-table-column>
            <el-table-column
              prop="position"
              label="职位"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="联系人"
            >
            </el-table-column>
            <el-table-column
              prop="phoneNew"
              label="联系方式"
            >
            </el-table-column>
            <el-table-column
              prop="username"
              label="关联账号"
            >
            </el-table-column>
            <el-table-column
              prop="social"
              label="社交软件"
            >
            </el-table-column>
            <el-table-column
              prop="socialNumber"
              label="社交软件号码"
            >
            </el-table-column>
            <el-table-column
              prop="email"
              label="邮箱"
            >
            </el-table-column>
          </el-table>
        </el-card>

        <el-tabs style="margin-top: 15px" type="border-card">
          <el-tab-pane label="订单">
            订单
          </el-tab-pane>
          <el-tab-pane label="报价">
            <el-table
              :data="[]"
              style="width: 100%"
            >
              <el-table-column
                prop=""
                label="序号"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="报价单号"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="订单号"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="客户名称"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="目的地"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="销售阶段"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="预计结束时间"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="负责人"
              >
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="跟进">
            <el-table
              :data="customerFollowList"
              style="width: 100%"
            >
              <el-table-column
                prop=""
                label="#"
              >
              </el-table-column>
              <el-table-column
                prop="followType"
                label="跟进类型"
              >
              </el-table-column>
              <el-table-column
                prop="contactName"
                label="联系人"
              >
              </el-table-column>
              <el-table-column
                prop="followMethod"
                label="跟进方式"
              >
              </el-table-column>
              <el-table-column
                prop="followTime"
                label="跟进时间"
              >
              </el-table-column>
              <el-table-column
                prop="feedback"
                label="客户反馈"
              >
              </el-table-column>
              <el-table-column
                prop="result"
                label="处理结果"
              >
              </el-table-column>
              <el-table-column
                prop="followUserId"
                label="跟进业务"
              >
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="客户投诉">
            <el-table
              :data="[]"
              style="width: 100%"
            >
              <el-table-column
                prop=""
                label="序号"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="投诉编号"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="投诉类型"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="投诉时间"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="投诉内容"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="登记客服"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="提单号"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="状态"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="查明原因"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="处理时间"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="处理结果"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="赔偿金额"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="操作"
              >
                <template v-slot="{row}">
                  <el-button size="mini" type="text" icon="el-icon-view" @click=""
                             v-hasPermi="['ecw:customer:query']">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="账单">

          </el-tab-pane>
          <el-tab-pane label="数据">

          </el-tab-pane>
          <el-tab-pane label="品牌授权">

          </el-tab-pane>
          <el-tab-pane label="信用日志">

          </el-tab-pane>
          <el-tab-pane label="等级日志">

          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <el-dialog
      title="客户跟进"
      :visible.sync="customerFollow.dialogVisible"
      :close-on-click-modal="false"
      width="680px">
      <el-form ref="customerFollowForm" :model="customerFollow.form" label-width="80px">
        <el-row :gutter="10">
          <el-col>
            <el-form-item label="跟进类型" required>
              <dict-selector form-type="radio" v-model="customerFollow.form.followType" :type="DICT_TYPE.CUSTOMER_FOLLOW_TYPE"></dict-selector>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="跟进时间" required>
              <el-date-picker v-model="customerFollow.form.followTime" type="datetime" placeholder="选择跟进时间"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" required>
              <el-select v-model="customerFollow.form.contactName" placeholder="请选择">
                <el-option
                  v-for="item in customerContactsList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="跟进业务" required>
              <el-select v-model="customerFollow.form.followUserId" placeholder="请选择">
                <el-option
                  v-for="item in serviceUserList"
                  :key="item.id"
                  :label="item.nickname"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="跟进方式" required>
              <dict-selector v-model="customerFollow.form.followMethod" :type="DICT_TYPE.CUSTOMER_FOLLOW_METHOD"></dict-selector>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="客户反馈" required>
              <el-input type="textarea" v-model="customerFollow.form.feedback"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="处理结果" required>
              <el-input type="textarea" v-model="customerFollow.form.result"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="customerFollow.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="customerFollowSubmit">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { getCustomer } from '@/api/ecw/customer'
import { DICT_TYPE, getDictDataLabel } from '@/utils/dict'
import { getProductTypeList } from '@/api/ecw/productType'
import { getNodeList } from '@/api/ecw/node'
import DictSelector from "@/components/DictSelector"
import {getCustomerContactsList} from "@/api/ecw/customerContacts"
import {listServiceUser} from "@/api/system/user"
import {createCustomerFollow, getCustomerFollowPage} from "@/api/ecw/customerFollow"

export default {
  name: 'query',
  props: {
    customerId: String
  },
  components: {
    DictSelector
  },
  created() {
    getNodeList().then(r => {
      this.nodeList = r.data
    })
    getCustomer(this.customerId).then(response => {
      this.customer = { ...this.customer, ...response.data }
    })
    getProductTypeList().then(r => {
      this.productTypeList = r.data
    })

    this.resetCustomerFollowForm()
    getCustomerContactsList().then(r => {
      // todo 接口不对，分页了
      this.customerContactsList = r.data.list
    })
    listServiceUser().then(r => {
      this.serviceUserList = r.data
    })
    this.getCustomerFollowList()
  },
  data() {
    return {
      DICT_TYPE,
      getDictDataLabel,
      nodeList: [],
      productTypeList: [],
      customerContactsList: [],
      serviceUserList: [],
      customerFollowList: [],
      customer: {
        id: undefined,
        number: undefined,
        name: undefined,
        level: undefined,
        country: undefined,
        type: undefined,
        agentId: undefined,
        company: undefined,
        address: undefined,
        productType: undefined,
        productId: undefined,
        pickupPoint: undefined,
        memberId: undefined,
        birthday: undefined,
        balance: undefined,
        source: undefined,
        picture: undefined,
        customerService: undefined,
        customerContacts: [],
        customerLines: [],
        promoter: undefined,
        status: undefined,
        founder: undefined,
        department: undefined,
        invoiceTitle: undefined,
        licenseNumber: undefined,
        bank: undefined,
        bankNumber: undefined,
        project: undefined,
        billingAddress: undefined,
        billingTell: undefined,
        taxRate: undefined,
        remarks: undefined,
        arrivalConfirm: undefined,
        weightUnit: undefined,
        createTime: undefined
      },

      customerFollow: {
        dialogVisible: true,
        form: {}
      },

    }
  },
  methods: {
    customerFollowSubmit() {
      this.$refs["customerFollowForm"].validate(valid => {
        if (!valid) {
          return
        }

        createCustomerFollow(this.customerFollow.form).then(r => {
          this.resetCustomerFollowForm()
          this.getCustomerFollowList()
          this.customerFollow.dialogVisible = false
        })
      })
    },

    resetCustomerFollowForm() {
      this.customerFollow.form = {
        "bizId": this.customerId,
        "contactName": undefined,
        "feedback": undefined,
        "followMethod": undefined,
        "followTime": undefined,
        "followType": undefined,
        "followUserId": undefined,
        "result": undefined
      }
    },
    getCustomerFollowList() {
      getCustomerFollowPage({bizId: this.customerId}).then(r => {
        this.customerFollowList = r.data.list
      })
    }
  },
  computed: {
    productType(){
      const productType = this.productTypeList.find(p => p.id === parseInt(this.customer.productType))
      return productType ? productType.titleZh : ''
    },
    pickupPoint(){
      const pickupPoint = this.nodeList.find(p => p.id === parseInt(this.customer.pickupPoint))
      return pickupPoint ? pickupPoint.titleZh : ''
    }
  }
}
</script>

<style scoped>

</style>
