<template>
    <div class="main">
        <div class="yesterday">
            <div class="top">
                <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/money.svg"></image>
                <p class="title">客单均价<text class="unit">/元</text></p>
            </div>
            <div class="bottom">
                <div class="item">
                    <p class="price">{{ info.MonthAvgTicketPrice?info.MonthAvgTicketPrice:'-' }}</p>
                    <p class="text">该服务区</p>
                </div>
                <div class="item">
                    <p class="price">{{ info.ProvinceAvgTicketPrice?info.ProvinceAvgTicketPrice:'-' }}</p>
                    <p class="text">省级平均</p>
                </div>
            </div>
        </div>
<!--        <div class="month">-->
<!--            <div class="top">-->
<!--                <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/converRate.svg"></image>-->
<!--                <p class="title">消费转化率<text class="unit">/%</text></p>-->
<!--            </div>-->
<!--            <div class="bottom">-->
<!--                <div class="item">-->
<!--                    <p class="price">{{ info.ConvertRate?info.ConvertRate:'-' }}</p>-->
<!--                    <p class="text">该服务区</p>-->
<!--                </div>-->
<!--                <div class="item">-->
<!--                    <p class="price">{{ info.ConvertProvinceRate?info.ConvertProvinceRate:'-'}}</p>-->
<!--                    <p class="text">省级平均</p>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
    </div>
</template>

<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
    name: "transactionAnalysis",
    data() {
        return {
            info:{} //数据内容
        }
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data: {
            handler(value) {
                if (value){
                    console.log('bianle',value)
                    this.info = value
                    console.log('this.info',this.info)
                    this.$forceUpdate()
                }else{
                    this.info = {}
                }
            },
            deep:true,
            immediate:true,
        },

    },
    methods: {
    }
}
</script>

<style scoped lang="scss">
.main{
  width: 100%;
  .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;
          .unit{
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #A69E9F;
              line-height: 20px;
              margin-left: 2px;
          }
      }
    }
    .bottom{
      margin-top: 12px;
      width: 100%;
      display: flex;
      box-sizing: border-box;
      .item{
        width:50%;
        padding-left: 26px;
        .price{
          font-size: 16px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #341D00;
          line-height: 20px;
          margin-bottom: 2px;
        }
        .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;
          }
        }
      }
    }
  }
}
</style>
