<template>
  <div class="main">
    <div class="mengBox" v-if="showMeng" @click.stop="handleNoShow"></div>
      <div class="yesterday">
          <div class="top">
              <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/datePortrait.svg"></image>
              <p class="title">昨日客单量</p>
          </div>
          <div class="bottom">
              <div class="item">
                <div class="top">
                  <p class="price">{{ info.TicketCount?$util.getMoneyNoDecimal(info.TicketCount):'-' }}</p>
                  <view class="right" v-if="info.TicketCount">
                    <image class="arrowTop" :src="Number((info.TicketCount / info.TicketAvgCount)-1)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
                    <text class="text">{{orderTransaction+'%'}}</text>
                  </view>
                </div>
                  <p class="text">客单交易 <text class="unit">/笔</text></p>
              </div>
              <div class="item">
                <div class="top">
                  <p class="price">{{ info.AvgTicketPrice?info.AvgTicketPrice:'-' }}</p>
                  <view class="right" v-if="info.AvgTicketPrice">
                    <image class="arrowTop" :src="Number((info.AvgTicketPrice / info.MonthAvgTicketPrice)-1)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
                    <text class="text">{{orderAveragePrice+'%'}}</text>
                  </view>
                </div>
                <p class="text">客单均价 <text class="unit">/元</text></p>
              </div>
              <div class="item">
                <div class="top">
                  <p class="price">{{ info.VehicleCount?$util.getMoneyNoDecimal(info.VehicleCount):'-' }}</p>
                  <view class="right" v-if="addAreaCarNumber">
                    <image class="arrowTop" :src="((info.VehicleCount / info.MonthVehicleCount)-1)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
                    <text class="text">{{addAreaCarNumber ? addAreaCarNumber + '%':'-' + '%'}}</text>
                  </view>
                </div>
                  <p class="text">入区车辆 <text class="unit">/辆</text></p>
              </div>
              <div class="item">
                <div class="top">
                  <p class="price">{{ info.AvgVehicleAmount ?info.AvgVehicleAmount :'-' }}</p>
                  <view class="right" v-if="oneCarPrice">
                    <image class="arrowTop" :src="Number((info.AvgVehicleAmount / info.MonthVehicleAmount)-1)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
                    <text class="text">{{oneCarPrice?oneCarPrice + '%':'-' + '%'}}</text>
                  </view>
                </div>
                  <p class="text">单车价值 <text class="unit">/元</text></p>
              </div>
          </div>
      </div>
      <div class="month">
          <div class="top">
              <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/change.svg"></image>
              <p class="title">月均客单量</p>
          </div>
          <div class="bottom">
              <div class="item">
                  <p class="price">{{ info.TicketAvgCount?$util.getMoneyNoDecimal(info.TicketAvgCount):'-' }}</p>
                  <p class="text">客单交易 <text class="unit">/笔</text></p>
              </div>
              <div class="item">
                  <p class="price">{{ info.MonthAvgTicketPrice?info.MonthAvgTicketPrice:'-' }}</p>
                  <p class="text">客单均价 <text class="unit">/元</text></p>
              </div>
              <div class="item">
                  <p class="price">{{ info.MonthVehicleCount?$util.getMoneyNoDecimal(info.MonthVehicleCount):'-' }}</p>
                  <p class="text">入区车辆 <text class="unit">/辆</text></p>
              </div>
              <div class="item">
                  <p class="price">{{ info.MonthVehicleAmount?info.MonthVehicleAmount:'-' }}</p>
                  <p class="text">单车价值 <text class="unit">/元</text></p>
              </div>
          </div>
          <div class="progress">
              <div class="box">
                  <div class="pro">
                      <div class="big" :style="{width:info.transactionLevel.HighConsumption_Rate +'%'}" @click="handleShow(0)">
                          <view class="meng" :style="Number(info.transactionLevel.HighConsumption_Rate)<10?'right: 0':'left:0'" v-if="genderList[0]">高消费: {{info.transactionLevel.HighConsumption_Count }}笔</view>
                      </div>
                      <div class="normal" :style="{width:info.transactionLevel.NormalConsumption_Rate +'%',left:info.transactionLevel.HighConsumption_Rate+'%'}" @click="handleShow(1)">
                          <view class="meng" :style="Number(info.transactionLevel.HighConsumption_Rate)<10?'left: 0':'right:0'" v-if="genderList[1]">普通消费: {{info.transactionLevel.NormalConsumption_Count }}笔</view>
                      </div>
                      <div class="small" @click="handleShow(2)" :style="{width:info.transactionLevel.LowConsumption_Rate +'%',left:(Number(info.transactionLevel.HighConsumption_Rate) + Number(info.transactionLevel.NormalConsumption_Rate))+'%'}">
                          <view class="meng" :style="Number(info.transactionLevel.LowConsumption_Rate)<10?'right: 0':'left:0'" v-if="genderList[2]">低消费: {{info.transactionLevel.LowConsumption_Count }}笔</view>
                      </div>
                  </div>
                  <div class="type">
                      <text class="item big">高消费 {{info.transactionLevel.HighConsumption_Rate?info.transactionLevel.HighConsumption_Rate:'-'}}%</text>
                      <text class="item normal">普通消费 {{info.transactionLevel.NormalConsumption_Rate?info.transactionLevel.NormalConsumption_Rate:'-'}}%</text>
                      <text class="item small">低消费 {{info.transactionLevel.LowConsumption_Rate?info.transactionLevel.LowConsumption_Rate:'-' }}%</text>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name: "customerFirst",
    data() {
        return {
            info:{
                transactionLevel:{
                    HighConsumption_Rate:0,
                    NormalConsumption_Rate:0,
                    LowConsumption_Rate:0
                }
            },
            genderList:[false,false,false],
            addAreaCarNumber:'',//入区车辆增长
            oneCarPrice:'',//单车价值
            orderTransaction:'',
          orderAveragePrice:'',
          showMeng:false
        }
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data: {
            handler(value) {
                console.log('value111',value)
                this.info = value
                this.addAreaCarNumber = this.info.VehicleCount ? Math.abs((this.info.VehicleCount / this.info.MonthVehicleCount - 1)*100).toFixed(2):''
                this.oneCarPrice = this.info.MonthVehicleAmount?Math.abs(((this.info.AvgVehicleAmount / this.info.MonthVehicleAmount) - 1) *100).toFixed(2):''
                this.orderTransaction = this.info.TicketAvgCount? Math.abs((((this.info.TicketCount / this.info.TicketAvgCount) - 1) *100).toFixed(2)):'-'
                this.orderAveragePrice = this.info.MonthAvgTicketPrice? Math.abs((((this.info.AvgTicketPrice / this.info.MonthAvgTicketPrice) - 1) *100).toFixed(2)):'-'
                this.$forceUpdate()
            },
            deep:true
        }
    },
    methods:{
        handleShow(num){
            let list = []
            this.genderList.forEach(()=>{
                list.push(false)
            })
            this.genderList = list
            this.genderList[num] = true
          this.showMeng = true
        },
      handleNoShow(){
        this.genderList = []
        this.showMeng = false
      }
    }
}
</script>

<style scoped lang="scss">
.main{
  width: 100%;
  .mengBox{
    position: fixed;
    top: 0;left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9;
  }
  .yesterday,.month{
    margin-top: 12px;
    width: 100%;
    box-sizing: border-box;
    background: #F7F7F7;
    border-radius: 4px;
    padding: 12px;
    .top{
      display: flex;
      .icon{
        width: 18px;
        height: 18px;
        margin-right: 9px;
      }
      .title{
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #160002;
        line-height: 20px;
      }
    }
    .bottom{
        margin-top: 12px;
        width: 100%;
        display: flex;
        flex-flow: wrap;
        box-sizing: border-box;
        .item{
            width:50%;
            padding-left: 26px;
            box-sizing: border-box;
            margin-bottom: 12px;
          .price{
            font-size: 16px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #341D00;
            line-height: 20px;
            margin-bottom: 2px;
          }
          .top{
            display: flex;
            .price{
              font-size: 16px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #341D00;
              line-height: 20px;
              margin-bottom: 2px;
            }
            .right{
              margin-left: 4px;
              display: flex;
              align-items: center;
              .arrowTop {
                width: 14px;
                height: 14px;
                margin-right: 4px;
              }
              .text {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #782717;
                line-height: 20px;
                margin-right: 4px;
              }
              .compare {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #a69e9f;
                line-height: 20px;
              }
            }
          }
            .text{
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 20px;
                .unit{
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #A69E9F;
                    line-height: 20px;
                }
            }
        }
    }
    .progress{
        width: calc(100% - 8px);
        box-sizing: border-box;
        padding-left: 26px;
        margin-top: 12px;
        .box{
            width: 100%;
            .pro{
                width: 100%;
                height: 16px;
                border-radius: 2px 0 0 2px;
                position: relative;
                .big{
                    position: absolute;
                    height: 100%;
                    background: #1E80FF;
                    border-radius: 2px 0 0 2px;
                    .meng{
                        width: 120px;
                        height: 20px;
                        line-height: 20px;
                        position: absolute;
                        display: inline-block;
                        padding: 0 5px;
                        z-index: 9;
                        left: 0;top: -20px;
                        background: rgba(0,0,0,0.6);
                        color:#fff;
                        border-radius: 2px;
                        text-align: center;
                    }
                }
                .normal{
                    position: absolute;
                    height: 100%;
                    background: #ACB9CD;
                    border-radius: 2px 0 0 2px;
                    .meng{
                        width: 120px;
                        height: 20px;
                        line-height: 20px;
                        position: absolute;
                        display: inline-block;
                        padding: 0 5px;
                        z-index: 9;
                        right: 0;top: -20px;
                        background: rgba(0,0,0,0.6);
                        color:#fff;
                        border-radius: 2px;
                      text-align: center;
                    }
                }
                .small{
                    position: absolute;
                    height: 100%;
                    background: #CAD0DA;
                    border-radius: 2px 0 0 2px;
                    .meng{
                        width: 120px;
                        height: 20px;
                        line-height: 20px;
                        position: absolute;
                        display: inline-block;
                        padding: 0 5px;
                        z-index: 9;
                        right: 0;top: -20px;
                        background: rgba(0,0,0,0.6);
                        color:#fff;
                        border-radius: 2px;
                        text-align: center;
                    }
                }
            }
            .type{
                display: flex;
                justify-content: space-between;
                margin-top: 4px;
                .item{
                    display: inline-block;
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786B6C;
                    line-height: 18px;
                    position: relative;
                    text-align: left;
                    padding-left: 8px;
                }
                .item:last-child{
                    margin-right: 0px;
                }
                .big:before{
                    content:'';
                    width: 4px;
                    height: 12px;
                    background: #1E80FF;
                    position: absolute;
                    left: 0;top: 50%;
                    transform: translateY(-50%);
                }
                .normal:before{
                    content:'';
                    width: 4px;
                    height: 12px;
                    background: #ACB9CD;
                    position: absolute;
                    left: 0;top: 50%;
                    transform: translateY(-50%);
                }
                .small:before{
                    content:'';
                    width: 4px;
                    height: 12px;
                    background: #CAD0DA;
                    position: absolute;
                    left: 0;top: 50%;
                    transform: translateY(-50%);
                }
            }
        }
    }
  }
}
</style>
