<template>
  <div id="UserInfoCard">
    <el-popover
      placement="top-start"
      width="400"
      height="180"
      trigger="hover"
      @show="showSingleInfo">
      <div
        class="pointer"
        @click="linkDetail"
      >
        <div class="singelinfo">
        <div class="singelinfo-img"><img
          width="100"
          height="100"
          :src="scopeData.thirdImgUrl ? scopeData.thirdImgUrl : './static/img/default.png'"
          alt=""
          ></div>
        <div class="singelinfo-content pLeft10 pRight10">
          <span class="lheigth0">{{ scopeData.memberName }}
          <span
            :title="singleInfo.status == 0 ? '取消关注公众号' : singleInfo.status == 1 ? '已关注公众号' : '未关注公众号'"
            class="channelicon fr"
            :class="singleInfo.status == 0 ? 'gzhiconcanclegray' : singleInfo.status == 1 ? 'gzhicon' : 'gzhicongray'"
          ></span>
          <span
            :title="singleInfo.wxStatus == 0 ? '未使用小程序' : singleInfo.wxStatus == 1 ? '使用过小程序' : ''"
            class="channelicon fr mr6"
            :class="singleInfo.wxStatus == 0 ? 'xcxicongray' : singleInfo.wxStatus == 1 ? 'xcxicon' : ''"
          ></span>
          </span>
          <p class="lheigth0">
          <span class="evl-right">{{ singleInfo.sex}}</span>
          <span class="evl-right">{{ singleInfo.age }}</span>
          <span :title="singleInfo.cardNo">{{ singleInfo.cardNo | formatCardName }}</span></p>
          <p class="lheigth0"><span>{{ singleInfo.mainStoreName }}</span></p>
          <div class="singelinfo-cost">
          <div class="singelinfo-costitem">
            <p>{{ singleInfo.costFee }}</p>
            <p>消费总额</p>
          </div>
          <div class="singelinfo-costitem">
            <p>{{ singleInfo.costTimes }}</p>
            <p>消费次数</p>
          </div>
          <div class="singelinfo-costitem">
            <p>{{ singleInfo.lastCost }}</p>
            <p>最近消费</p>
          </div>
          </div>
        </div>
        </div>
        <div class="singelinfo-jl mBottom20 mTop20">
        <a class="singelinfo-jlitem">消费记录 ({{ singleInfo.numOfSale }})</a>
        <a class="singelinfo-jlitem">营销记录 ({{ singleInfo.numOfmarket }})</a>
        <a class="singelinfo-jlitem">卡券记录 ({{ singleInfo.couponCount }})</a>
        </div>
      </div>
      <span slot="reference" class="member-span"><img
        class="tablecontent-cellimg mr6"
        width="60"
        height="60"
        :src="scopeData.thirdImgUrl ? scopeData.thirdImgUrl : './static/img/default.png'"
        alt=""
        ></span>
    </el-popover>
  </div>
</template>
<script>
export default {
  name: 'UserInfoCard',
  methods: {
    showSingleInfo() {
      this.$emit('showSingleInfo')
    },
    linkDetail() {
      this.$emit('linkDetail')
    }
  },
  props: {
    scopeData: Object,
    singleInfo: Object
  }
}
</script>
<style lang="scss" scoped>
#UserInfoCard {
  display: inline-block;
}
</style>
