<template>
  <div id="CustomerA" v-loading="loading">
      <div class="firstDiv">
          <div class="list">
              <div class="Item" style="padding-top:0">
                <div class="userImg">
                    <img v-if="datainfo.HousePhotos" :src="datainfo.HousePhotos" alt="">
                    <img v-else src="../../assets/img/default.png" alt="">
                </div>
                <div>
                    <p>{{datainfo.CustomerName}}</p>
                    <p style="color:#7F8593;font-size:14px;padding:6px 0">{{datainfo.Contact}}</p>
                </div>
            </div>
          </div>
          <div class="list">
              <div class="Item moneyItem">
              <p>交易累计额</p>
              <div class="des">
                <div class="Img"><img style="width:30px;height:36px" src="../../assets/img/saleRank/jye.png" alt=""></div>
              <div>
                  <p style="color:#5D78FF;font-size:28px"><span style="font-size:14px">￥</span>{{datainfo.TotalPrice}}</p>
              </div>
              </div>
              
          </div>
          </div>
          <div class="list">
              <div class="Item moneyItem">
              <p>交易人头数</p>
              <div class="des">
                <div class="Img"><img style="width:31px;height:36px" src="../../assets/img/saleRank/rt.png" alt=""></div>
              <div>
                  <p style="color:#34BFA3;font-size:24px"><span style="font-size:28px;font-weight:600">{{datainfo.TotalGuestNum}}</span>人</p>
              </div>
              </div>
              
          </div>
          </div>
          <div class="list">
              <div class="Item moneyItem">
              <p>积分</p>
              <div class="des">
                <div class="Img"><img style="width:36px;height:36px" src="../../assets/img/saleRank/jf.png" alt=""></div>
              <div>
                  <p style="color:#FD3995;font-size:24px"><span style="font-size:28px;font-weight:600">{{datainfo.Integral}}</span>分</p>
              </div>
              </div>
              
          </div>
          </div>
          <div class="list">
              <div class="Item moneyItem">
              <p>幸福存折余额</p>
              <div class="des">
                <div class="Img">
                    <img style="width:36px;height:28px" src="../../assets/img/saleRank/cz.png" alt="">
                      
                </div>
              <div>
                  <p style="color:#FFB822;font-size:28px"><span style="font-size:24px">￥</span>{{datainfo.Client_Balance}}</p>
              </div>
              </div>
              
          </div>
          </div>
          <div @click="goCoupons(datainfo.CustomerAccountId)" class="list">
              <div class="Item moneyItem">
              <p>优惠券</p>
              <div class="des">
                <div class="Img">
                    <span style="font-size:36px;color: #e95252;position: relative;top: -10px;" class="iconfont icon-shouru"></span>  
                </div>
                <div>
                  <p style="color:#e95252;font-size:28px;"><span style="text-decoration: underline;">{{datainfo.CouponNum}}</span></p>
              </div>
              </div>
              
          </div>
          </div>
          
          
          
          
      </div>
      <div class="second" style="padding:0 10px;margin-top:10px">
          <el-row :gutter="23" justify="space-between">
              <el-col :span="16"><div id="chartsMap" class="bgDiv" style="height:400px;width:100%;padding:20px 10px"></div> </el-col>
              <el-col :span="8">
                  <div class="bgDiv" style="padding:20px 30px;height:400px;overflow:auto">
                      <p style="color:#2C3343;margin-bottom:30px">价格区间占比</p>
                      <div v-for="(item,index) in datainfo.priceList" :key="index" class="perceItem">
                          <el-row :gutter="22">
                              <el-col style="color:#9D9FA6;font-size:12px;margin-top: 2px;" :span="5"><span>{{item.TypeName}}</span></el-col>
                              <el-col :span="14" style="margin-top:4px"><el-progress :show-text="false" :stroke-width="14" :percentage="Number(item.Total)"></el-progress></el-col>
                              <el-col :span="5"><span style="color:#2C3343;font-size:14px">{{Number(item.Total)}}%,{{item.TotalGuestNum}}人</span></el-col>
                          </el-row>
                      </div>
                      
                  </div>
              </el-col>
          </el-row>
      </div>
      <div class="third" style="padding:0 10px;margin:20px 0 40px 0">
        <el-row :gutter="23" justify="space-between">
            <el-col :span="8">
                <div class="bgDiv" style="padding:20px 30px;height:320px;overflow:auto">
                    <p style="color:#2C3343;margin-bottom:30px">返利红包预期收益</p>
                    <el-row>
                        <el-col :span="6">
                            <div>
                                <p style="color:#5D78FF"><span style="font-size:14px">￥</span><span style="font-size:28px">{{datainfo.yearTotalPrice}}</span></p>
                                <p style="color:#93959A;font-size:10px">本年预计收益</p>
                            </div>
                            <div style="margin-top:20px">
                                <p style="color:#2C3343"><span style="font-size:14px">￥</span><span style="font-size:20px">{{datainfo.allianceTotalYearPrice}}</span></p>
                                <p style="color:#93959A;font-size:10px">本年交易金额</p>
                            </div>
                            <div style="margin-top:20px">
                                <p style="color:#93959A"><span style="font-size:14px">￥</span><span style="font-size:20px">{{datainfo.yeayGoTotalPrice}}</span></p>
                                <p style="color:#93959A;font-size:10px">去年收益</p>
                            </div>
                        </el-col>
                        <el-col :span="18">
                            <div style="margin-bottom:20px" v-for="(item,index) in datainfo.list" :key="index+500">
                                <div>
                                    <p style="color:#7F8593;font-size:12px">年交易额达<span style="color:#7F8593">￥{{item.Money}}</span> 返{{item.Ratio}}‰</p>
                                </div>
                                <div>
                                      <el-row :gutter="23" justify="space-between">
                                        <el-col :span="16">
                                        <p style="margin-top:6px">
                                            <!-- 数据是：{{datainfo.totalYearPrice/item.Money>1?100:(datainfo.totalYearPrice/item.Money)*100}} -->
                                            <el-progress :color="colorMethod(item)" :show-text="false" :stroke-width="12" :percentage="datainfo.totalYearPrice/item.Money>1?100:(datainfo.totalYearPrice/item.Money)*100"></el-progress>
                                        </p>

                                        </el-col>
                                        <el-col :span="8">
                                            <span v-if="item.ActivateState==2"><img  style="width:20px;height:20px" src="../../assets/img/saleRank/gou.png" alt=""></span>
                                            <span style="font-size:14px;font-weight:bold;color:#2C3343" v-if="item.ActivateState==0">未开启</span>
                                            <span style="font-size:14px;font-weight:bold;color:#2C3343" v-if="item.ActivateState==1">还差 ¥{{item.PriceSpread}}满足</span>
                                        </el-col>
                                      </el-row>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="16">
                <div class="bgDiv" style="padding:20px 30px;height:320px;overflow:auto">
                    <p style="color:#2C3343;margin-bottom:30px">交客线路占比</p>
                    <div v-for="(item,index) in datainfo.LineIdList" :key="index+100" class="circleItem">
                        <div style="height:126px;position:relative">
                            <div class="Linetext">
                                <p style="font-size:34px">{{Number(item.Total)}}<span style="font-size:14px">%</span></p>
                                <p style="font-size:14px">{{item.TypeName}}</p>
                            </div>
                            <el-progress :color="item.color" :show-text="false" type="circle" :stroke-width="16" :percentage="Number(item.Total)"></el-progress>
                        </div>
                        <div style="font-size:12px;color:#7F8593;margin-top:20px">收客{{item.TotalGuestNum}}人</div>
                    </div>
                    
                </div>
            </el-col>
        </el-row>
      </div>
  </div>
</template>


<script>
export default {

  
  data () {
    return {
        percentage:20,
        customerId:"",
        loading:false,
        datainfo:{},
        colorList:["#FFB822","#FD3995","#5D78FF","#59C5F8","#34BFA3"],
        date:[],
        datedata:[],
    }
  },
  created() {
      if(this.$route.query.customerId){
          this.customerId=Number(this.$route.query.customerId);
      }

  },
  mounted() {
      this.getData();
      
  },
  methods: {
      goCoupons(id){
          this.$router.push({
            name: 'CouponsList',
            query: { 
                blank: "y", 
                "customerId": id,
                tab:'优惠券列表' 
            }
         });
      },
      colorMethod(item){
          if(item.ActivateState==2){
              return '#34BFA3';
          }
          if(item.ActivateState==1){
              return '#FFB822';
          }else{
              return '#ebeef5';
          }
      },
      getData(){
          this.loading=true;
          this.apipost('app_customer_GetCustomerOrderInfo', {customerId:this.customerId}, res => {
              this.loading=false;
          if (res.data.resultCode == 1) {
            res.data.data.LineIdList.forEach(item => {
                this.colorList.forEach(color=>{
                    item.color=color;
                })
            });
            this.datainfo = res.data.data;
            res.data.data.yearMonthList.forEach(item=>{
                this.date.push(item.TypeName.substr(2,8));
                this.datedata.push(item.Total);
            })
            this.LineChart();
          } else {
          }
        }, err => {
        })
      },
      LineChart(){
        var that = this;

        var myChart = this.$echarts.init(document.getElementById('chartsMap'));
        var option={
            title: {
                text: '近12月交易走势',
                color:"#2C3343"
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: this.date
            },
            yAxis: {
                type: 'value',
                splitLine:{
                show:true,
                lineStyle:{
                    type:'dashed'
                }
                }
            },
            series: [{
                data: that.datedata,
                type: 'line',
                smooth: true,
                areaStyle: {
                    normal: {
                        color: '#DBE1FF' //改变区域颜色
                    },
                },
                symbolSize: 0,
                itemStyle : { 
                normal : { 
                    color:'#fff', //改变折线点的颜色
                    lineStyle:{ 
                        color:'#5D78FF' //改变折线颜色
                        } 
                    } 
                } 
            }]
        };
        myChart.setOption(option);
      },

  },
  
}
</script>
<style>
#CustomerA .third .circleItem .Linetext{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin:auto;
    color:#2C3343;
    width: 100px;
    height:70px;
    
}
#CustomerA .third .circleItem{
    width: 20%;
    text-align:center;
    display: inline-block;
}
#CustomerA .third  .perRow{
    display: flex;
    align-items: center;
}
#CustomerA .second .el-progress-bar__inner{
    background-color: #34BFA3;
}
#CustomerA .second .perceItem{
    margin-bottom: 25px;
}
#CustomerA .bgDiv{
    background:rgba(255,255,255,1);
    box-shadow:0px 3px 14px 0px rgba(193,198,221,1);
    border-radius:6px;
}
#CustomerA .firstDiv  .moneyItem p{
    width: 100%;
    text-align: left;
    font-size: 14px;
}
#CustomerA .firstDiv  .moneyItem .des>div{
    display: inline-block;
    
}
#CustomerA .firstDiv  .moneyItem .des{
    display:flex;
    justify-content: space-between;
    margin-top:35px;
    width: 100%;
}
#CustomerA .firstDiv  .moneyItem{
    flex-direction: column;
}
#CustomerA .firstDiv .Item .userImg img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
#CustomerA .firstDiv .Item .userImg{
    width: 70px;height: 70px;
    margin-right:10px;
    
}
#CustomerA .firstDiv .list{
    width: 16.66%;
    padding: 10px;
    box-sizing: border-box;
    display: inline-block;
    cursor: pointer;
}
#CustomerA .firstDiv .Item{
    width: 100%;
    height: 154px;
    margin-right: 10px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    padding: 0 25px;
    box-sizing: border-box;
    float: left;
    padding-top:20px;
}
#CustomerA .firstDiv {
    display: flex;
    justify-content: space-between;
}

#CustomerA{
    padding:10px;
    background: #F2F3F8;
}


</style>