<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>顾客信息</span>
    </div>
    <div>
      <div class="box-body">
        <div>
          <span>顾客ID:</span>
          <span>{{customerInfo.id}}</span>
          <el-button type="success" size="mini" @click="fdsfsdf">修改</el-button>
        </div>
        <div>
          <span>系统顾客名称:</span>
          <span style="width: 90px;overflow:hidden;display: inline-block;text-overflow:ellipsis;white-space:nowrap">{{customerInfo.customerName}}</span>
          <a :href="yuyuedan" target="_blank" style="color:#fff"><el-button type="success" size="mini">新建预约单</el-button></a>
        </div>
        <div>
          <span>联系方式:</span>
          <span>{{customerInfo.mobile}}</span>
        </div>
        <div>
          <span>来源:</span>
          <span> {{customerInfo.customerSourceValue}}</span>
        </div>
        <div>
          <span>余额:</span>
          <span> {{customerInfo.balance}}</span>
          <!-- <el-button type="info" size="mini">发送充值链接</el-button> -->
        </div>
        <div>
          <span>6天内预约单数据:</span>
          <span>{{customerInfo.sixDayBookingsCount}}</span>
        </div>
        <div>
          <span>6天前预约单数据:</span>
          <span> {{customerInfo.beforeSixDayBookingsCount}}</span>
        </div>
        <div>
          <span>历史订单:</span>
          <span>{{customerInfo.historyGoodsCount}}</span>
        </div>
        <div>
          <span>返工:</span>
          <span>{{customerInfo.reworkGoodsCount}}</span>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script>
import { mapState, mapActions ,mapGetters } from 'vuex'
export default{
    data(){
      return {
        activeName:'second',
        yuyuedan:process.env.NEW_YUYUEDAN,
        baseInfo:[
          {
            label:'微信昵称',
            value:'李元霸'
          },
          {
            label:'微信号',
            value:'李元霸'
          },
          {
            label:'微信备注',
            value:'李元霸'
          },
          {
            label:'来源',
            value:'李元霸'
          }
        ]
      }    
    },
    computed: {
        ...mapState([   
            'selectId',
            'user',
            'baozheng'
        ]),
        ...mapGetters([
            'customerInfo',
        ]),
    },
    components: {
    },
    methods: {
       ...mapActions('baozheng',[
        'changeCustomerInfo'
      ]),
       fdsfsdf(){
          this.changeCustomerInfo(null)
       },
      handleClick(){
        console.log(43434)
      }
    }
}
</script>

<style lang="stylus" scoped>
.tabs-body
  height:800px;
  width:100%;
  .tool-body
    width:100%;
    height:729px;
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .clearfix{
    span{
      font-weight: 800;
    }
  }
  .box-card {
    width: 100%;
  }
  .box-body{
    padding-left:10px;
    div{
      font-size:15px;
      margin-bottom:10px;
      span{
        margin-right:10px;
      }
    }
  }
</style>