<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
                :title="singleInfo.wxStatus == 0 ? '未使用小程序' : singleInfo.wxStatus == 1 ? '使用过小程序' : ''"
                class="channelicon fr mr6"
                :class="singleInfo.wxStatus == 0 ? 'xcxicongray' : singleInfo.wxStatus == 1 ? 'xcxicon' : ''"
              />
            </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',
  props: {
    scopeData: Object,
    singleInfo: Object,
  },
  methods: {
    showSingleInfo () {
      this.$emit('showSingleInfo');
    },
    linkDetail () {
      this.$emit('linkDetail');
    },
  },
};
</script>
<style lang="scss" scoped>
#UserInfoCard {
  display: inline-block;
}
</style>
