<template>
  <div class="detail-box">
    <el-row :gutter="24">
      <el-col :span="9">
        <div class="grid-content">
          <p class="title">置业顾问信息</p>
          <img class="touxiang" :src="customerDetail.consultant === null ? '' :  customerDetail.consultant.picture" alt="">
          <p class="name">{{  customerDetail.consultant === null ? '' :  customerDetail.consultant.name }}</p>
          <p class="phone">{{ customerDetail.consultant === null ? '' :  customerDetail.consultant.phone }}</p>
          <div class="info">
            <p>部门：{{ customerDetail.consultant === null ? '' :  customerDetail.consultant.department }}</p>
            <p>岗位：{{ customerDetail.consultant === null ? '' :  customerDetail.consultant.post }}</p>
            <p>公司：{{ customerDetail.consultant === null ? '' :  customerDetail.consultant.company }}</p>
          </div>
          <p class="project">所属项目：
            <span v-if="customerDetail.consultant === null"></span>
            <span v-else v-for="(item, index) in customerDetail.consultant.projects" :key="index">{{ item }}</span>
          </p>
        </div>
      </el-col>
      <el-col :span="15">
        <div class="grid-content">
          <p class="title">客户信息</p>
          <div style="display:flex">
            <img class="touxiang" :src="customerDetail.picture" alt="">
            <div style="width:100%">
              <p class="info-box">用户名称：<span>{{ customerDetail.name }}</span></p>
              <p class="info-box">国家：<span>{{ customerDetail.country }}</span></p>
              <p class="info-box">手机号：<span>{{ customerDetail.phone }}</span></p>
              <p class="info-box">省份：<span>{{ customerDetail.province }}</span></p>
            </div>       
          </div>
          <div class="other-info">
              <p class="info-box">访问时长：<span>{{ customerDetail.duration / 60 }} 分钟</span></p>
              <p class="info-box">城市：<span>{{ customerDetail.city }}</span></p>
              <p class="info-box">访问次数：<span>{{ customerDetail.visitTimes }}</span></p>
              <p class="info-box">来访渠道：<span>活动分享</span></p>
              <p class="info-box">首次访问时间：<span>{{ formateDate(customerDetail.visitTime) }}</span></p>
          </div>
          <p style="line-height:1.8">详细信息：</p>
          <div class="flex-box" style="display:flex;justify-content: space-between;">
            <p>意向项目：<span>{{ customerDetail.intention }}</span></p>
            <p>需求类型：<span>{{ customerDetail.demandType }}</span></p>
            <p>物业类型：<span>{{ customerDetail.realtyManageType }}</span></p>
          </div>
          <div class="flex-box" style="display:flex;justify-content: space-between;">
            <p>价格区间：<span>{{ customerDetail.priceRange }}</span></p>
            <p>预约到访时间：<span>{{ formateDate(customerDetail.appointmentTime) }}</span></p>
            <p>预约人数：<span>{{ customerDetail.visiteNum }}</span></p>
          </div>
          <p class="flex-box">客户说明：<span>{{ customerDetail.verifyRemark }}</span></p>
          <p class="flex-box">客户描述：<span>{{ customerDetail.describe }}</span></p>
          
        </div>
      </el-col>
    </el-row>
    <div class="access-records">
      <p class="title">访问记录</p>
      <el-table
      :data="customerDetail.visitRecords || []"
      class="table-box"
      style="width: 100%;">
      <el-table-column
        prop="event"
        label="访问事件">
      </el-table-column>
      <el-table-column
        prop="visitTime"
        label="访问时间">
        <template slot-scope="scope">{{ formateDate(scope.row.visitTime) }}</template>
      </el-table-column>
      <el-table-column
        prop="visitDuration"
        label="停留时间">
        <template slot-scope="scope">{{ scope.row.visitDuration / 60 }}分钟</template>
      </el-table-column>
    </el-table>
    </div>
  
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex"
import dayjs from 'dayjs'

export default {
  data() {
    return {
      customerId: '',
      customerDetail: '',
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          time: "10分30秒"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          time: "17分43秒"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          time: "05分26秒"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          time: "1时24分27秒"
        }
      ]
    };
  },
  computed: {},
  methods: {
    formateDate(dt) {
      return !dt ? '' : dayjs(dt).format('YYYY-MM-DD HH:mm')
    },
    getCustomerDetail() {
      let data = { customerId: this.customerId }
      this.$store.dispatch('customer/getCustomerDetail',data).then((res) => {
        this.customerDetail = res
        console.log('customer/getCustomerDetail: ', this.customerDetail)
      }).catch(() => {
        console.log('customer/getCustomerDetail err')
      })
    }
  },
  created() {
    this.customerId = this.$route.query.id
    this.getCustomerDetail()
  }
};
</script>
<style lang="scss">
.detail-box {
  .el-table th.is-leaf,
  .el-table td {
    border-bottom: 0px !important;
    text-align: center;
  }
  .el-table::before {
    background-color: #fff;
  }
}
</style>


<style lang="scss" scoped>
.detail-box {
  .access-records {
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    padding: 12px 15px;
    margin-bottom: 26px;
  }
  .grid-content {
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    height: 400px;
    overflow: hidden;
    padding: 12px 15px;
    position: relative;
    margin-bottom: 26px;
    p {
      margin: 0;
      font-size: 15px;
    }
    .title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 30px;
    }
    .touxiang {
      width: 90px;
      height: 80px;
      display: inline-block;
      margin-right: 26px;
    }
    .name {
      position: absolute;
      top: 80px;
      left: 130px;
      font-weight: 600;
    }
    .phone {
      position: absolute;
      top: 116px;
      left: 130px;
    }
    .info {
      margin: 20px 0;
      p {
        color: #666;
        line-height: 1.8;
      }
    }
    .info-box {
      display: inline-block;
      width: 50%;
      line-height: 2.4;
      span {
        color: #555;
      }
    }
    .other-info {
      margin-left: 96px;
      width: 100%;
      span {
        color: #555;
      }
    }
    .flex-box {
      line-height: 2.2;
      span {
        color: #555;
      }
    }
  }
}
</style>
