<template>
  <view class="container">
    <view class="topInfoCss">
      <view class="flex justify-between">
        <view class="flex ">
          <u-avatar size="60" shape="square" :src="userInfo.imgSrc" ></u-avatar>
          <view class="flex flex-direction margin-left-sm">
            <view class="textCss">{{userInfo.name}}</view>
            <view class="addressCss">{{userInfo.address}}</view>
          </view>
        </view>
        <view class="flex align-center">
          <view class="margin-right-sm">{{userInfo.phone}}</view>
          <u-image src="/static/images/appList/otherImg/phone-fill.png" mode="aspectFit" width="32px"
                   height="32px" @click="handleCallPhone"></u-image>
        </view>
      </view>
    </view>
    <view class="flex justify-between margin-top">
      <view class="flex flex-direction justify-center align-center " style="width: 50%;" v-for="(item,index) of orderList1" :key="index">
        <u-image :src="item.imgSrc" mode="aspectFit" width="51px"
                 height="60px"></u-image>
        <view class="titleCss">{{item.name}}</view>
        <view class="numCss">{{item.value}}</view>
      </view>
    </view>

  </view>
</template>

<script>
import orderImg from '@/static/images/appList/otherImg/order.png'
import smokeAlarmImg from '@/static/images/appList/otherImg/smokeAlarm.png'
export default {
  name: "userInfoCard",
  props:{
    userInfo:{
      type:Object,
      default:{
        name:'ce'
      }
    },
    orderList:{
      type:Array,
      default: []
    }
  },
  data(){
    return{
      orderList1:[
        {
          key:'ljpsdd',
          imgSrc:orderImg,
          name:'累计配送订单',
          value:25
        }, {
          key:'ljpsqp',
          imgSrc:smokeAlarmImg,
          name:'累计配送气瓶',
          value:25
        }
      ]
    }
  },
  onLoad(){

  },
  mounted(){
    console.log('打印tis.orderList',this.orderList);
    this.orderList1 = this.orderList;
  },
  methods:{
    handleCallPhone(){
      if(this.userInfo.phone){
        uni.makePhoneCall({
          phoneNumber:this.userInfo.phone,
        })
      }
    },

  }
}
</script>

<style lang="scss" scoped>
.container{
  //margin: 0 10px;
  padding: 10px;
  background: #ffffff;
  border-radius: 10px;
  .topInfoCss{
    .textCss{
      font-family: '苹方 中等', '苹方', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 52rpx;
    }
    .addressCss{
      font-family: '苹方 中等', '苹方', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 26rpx;
      line-height: 60rpx;
      color: #666666;
    }
  }
  .titleCss{
    font-family: '苹方 中等', '苹方', sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 60rpx;
    font-size: 26rpx;
    color: #999DB0;
  }
  .numCss{
    font-family: '苹方 粗体', '苹方 中等', '苹方', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 34rpx;
    color:#333333
  }
}

</style>