<template>
  <view class="container">
    <u-row customStyle="margin-bottom: 10px"  style="width: 100%;" class="flex flex-direction flex-wrap">
      <view  class="usuallyCard margin-bottom-sm boxCss flex justify-between align-center"  v-for="(item,index) of cardList"  :key="index" :style="{marginLeft:index %2 !==0?'5px':'0px'}" >
        <view>
          <view class="titleCss">{{item.title}}</view>
          <view class="directionCss">{{item.direction}}</view>
        </view>
        <u-image :src="item.imgSrc" mode="aspectFit" width="40px" @click="hanldeClick(item)"
                 height="40px"></u-image>
      </view>
    </u-row>

  </view>
</template>

<script>
import shoppingCartImg from '@/static/images/appList/otherImg/shoppingCart.png'
import bluePhoneImg from '@/static/images/appList/otherImg/bluePhone.png'
export default {
  name: "functionCard",
  props:{

  },
  data(){
    return {
      cardList:[
        {
          title:'电话订气',
          direction:'快速联系员工',
          imgSrc:bluePhoneImg
        },
        {
          title:'线上订气',
          direction:'便捷、实时追踪',
          imgSrc:shoppingCartImg
        },
        {
          title:'线上订气',
          direction:'便捷、实时追踪',
          imgSrc:shoppingCartImg
        }
      ]

    }
  },
  methods:{
    handleClick(item){
      console.log('打印item',item);
      if(item.title == '电话订气'){
        // if(this.userInfo.phone){
        //   uni.makePhoneCall({
        //     phoneNumber:this.userInfo.phone,
        //   })
        // }
      }
    },

  },

}
</script>

<style lang="scss" scoped>
.container{
  width: 100%;
  margin-top: 15px;
  .boxCss{
    width:49%;
    padding:20rpx;
    .titleCss{
      font-family: '苹方 粗体', '苹方 中等', '苹方', sans-serif;
      font-weight: 700;
      font-style: normal;
      font-size: 28rpx;
      color: #333333;
    }
    .directionCss{
      font-family: '苹方 中等', '苹方', sans-serif;
      font-weight: 400;
      font-style: normal;
      line-height: 42rpx;
      font-size: 26rpx;
      color: #999999;
    }
  }

}

</style>