<template>
  <el-popover placement="top-start" width="400" height="180" trigger="hover" @show="getSingleInfo">
    <div class="corsur-pointer" @click="linkDetail">
      <div class="singelinfo">
        <div class="singelinfo-img">
          <!-- <img width="100" height="100" :src="singleInfo.thirdImgUrl || defaultAvatar" alt="" /> -->
          <img width="100" height="100" v-if="singleInfo.thirdImgUrl" :src="singleInfo.thirdImgUrl" alt="" />
          <img width="100" height="100" v-else src="../../../../static/img/head_default.png" alt="" />
        </div>
        <div class="singelinfo-content pl10 pr10">
          <span class="lheigt"
            >{{ singleInfo.memberName }}
            <!-- <img :title="singleInfo.status == 0 ? '已取消关注公众号' : singleInfo.status == 1 ? '已关注公众号' : '未关注公众号'" class="fr" :src="singleInfo.status == 0 ? gzhiconcanclegray : singleInfo.status == 1 ? gzhicon : gzhicongray" style="margin-right:5px" />      -->
            <!-- <img :title="singleInfo.usedMiniProgram ? '使用过小程序' : '未使用小程序'" class="channelicon fr mr6" :src="singleInfo.usedMiniProgram ? xcxicon : xcxicongray" style="margin-right:5px" /> -->
            <!-- <img :title="singleInfo.bindPhone ? '已绑定手机号' : '未绑定手机号'" class="channelicon fr mr6" :src="singleInfo.bindPhone ? bphone : ubphone" style="margin-right:5px" /> -->
            <!-- <img :title="singleInfo.authStatus ? '已认证' : '未认证'" class="channelicon fr mr6" :src="singleInfo.authStatus ? autoIcon : unAutoIcon" style="margin-right:5px" /> -->
            <img title="已取消关注公众号" class="fr" v-if="singleInfo.status == 0" src="../../../../static/img/status@gzhcanclegray.png" style="margin-right:5px" />
            <img title="已关注公众号" class="fr" v-else-if="singleInfo.status == 1" src="../../../../static/img/status@gzh.png" style="margin-right:5px" />
            <img title="未关注公众号" class="fr" v-else src="../../../../static/img/status@gzhgray.png" style="margin-right:5px" />
            <img title="使用过小程序" class="channelicon fr mr6" v-if="singleInfo.usedMiniProgram" src="../../../../static/img/status@xcx.png" style="margin-right:5px" />
            <img title="未使用小程序" class="channelicon fr mr6" v-else src="../../../../static/img/status@xcxgray.png" style="margin-right:5px" />
            <img title="已绑定手机号" class="channelicon fr mr6" v-if="singleInfo.bindPhone" src="../../../../static/img/phone_icon.png" style="margin-right:5px" />
            <img title="未绑定手机号" class="channelicon fr mr6" v-else src="../../../../static/img/phone_icon_gray.png" style="margin-right:5px" />
            <img title="已认证" class="channelicon fr mr6" v-if="singleInfo.authStatus" src="../../../../static/img/member_icon.png" style="margin-right:5px" />
            <img title="未认证" class="channelicon fr mr6" v-else src="../../../../static/img/member_icon_gray.png" style="margin-right:5px" />
          </span>
          <p class="lheigt">
            <span style="margin-right:5px;">{{ singleInfo.memberGender }}</span>
            <span style="margin-right:5px;">{{ singleInfo.memberAge }}</span>
            <span :title="singleInfo.cardNo">{{ singleInfo.cardNum | formatCardName }}</span>
          </p>
          <p class="lheigt">
            <span>{{ singleInfo.mainStoreName }}</span>
          </p>
          <div class="singelinfo-cost">
            <div class="singelinfo-costitem">
              <p>{{ singleInfo.costFee || 0 }}</p>
              <p>消费总额</p>
            </div>
            <div class="singelinfo-costitem">
              <p>{{ singleInfo.costTimes || 0 }}</p>
              <p>消费次数</p>
            </div>
            <div class="singelinfo-costitem">
              <p class="no-wrap">{{ singleInfo.lastCostTime || '--' }}</p>
              <p>最近消费</p>
            </div>
          </div>
        </div>
      </div>
      <div class="singelinfo-jl mb20 mt20">
        <a class="singelinfo-jlitem">消费记录 ({{ singleInfo.numOfSale }})</a>
        <a class="singelinfo-jlitem">营销记录 ({{ singleInfo.numOfMarketing }})</a>
        <a class="singelinfo-jlitem">卡券记录 ({{ singleInfo.numOfCard }})</a>
      </div>
    </div>
    <span slot="reference">
      <a :href="'/member/#/wechatmemberDetail?memberId=' + row.memberId" target="_blank">
        <!-- <img class="vertical-middle table__avatar" :src="filterAvatar(row.photoUrl)" width="60" height="60" alt="" srcset="" /> -->
        <img class="vertical-middle table__avatar" v-if="row.photoUrl" :src="row.photoUrl" width="60" height="60" alt="" srcset="" />
        <img class="vertical-middle table__avatar" v-else src="../../../../static/img/head_default.png" width="60" height="60" alt="" srcset="" />
        <div class="inline-block vertical-middle">
          <p class="table-name--ellipsis">{{ row.memberName || '--' }}</p>
          <p class="table-name--ellipsis fz13">{{ row.cardNum || '--' }}</p>
        </div>
      </a>
    </span>
  </el-popover>
</template>

<script>
import { getMemberInfo } from '@/service/api/mallApi.js';

export default {
  name: 'member-info',
  props: {
    row: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      singleInfo: {},
      // defaultAvatar: require('../../../assets/img/head_default.png'),
      // gzhiconcanclegray: require('../../../assets/img/status@gzhcanclegray.png'), //取消关注微信公众号
      // gzhicon: require('../../../assets/img/status@gzh.png'), //已关注微信公众号
      // gzhicongray: require('../../../assets/img/status@gzhgray.png'), //未关注微信公众号
      // xcxicongray: require('../../../assets/img/status@xcxgray.png'), //未使用小程序
      // xcxicon: require('../../../assets/img/status@xcx.png'), //已使用小程序
      // bphone: require('../../../assets/img/phone_icon.png'), //绑定手机
      // ubphone: require('../../../assets/img/phone_icon_gray.png'), //未绑定手机
      // autoIcon: require('../../../assets/img/member_icon.png'), //已认证
      // unAutoIcon: require('../../../assets/img/member_icon_gray.png') //未认证
      defaultAvatar: '../../../../static/img/head_default.png',
      gzhiconcanclegray: '../../../../static/img/status@gzhcanclegray.png', //取消关注微信公众号
      gzhicon: '../../../../static/img/status@gzh.png', //已关注微信公众号
      gzhicongray: '../../../../static/img/status@gzhgray.png', //未关注微信公众号
      xcxicongray: '../../../../static/img/status@xcxgray.png', //未使用小程序
      xcxicon: '../../../../static/img/status@xcx.png', //已使用小程序
      bphone: '../../../../static/img/phone_icon.png', //绑定手机
      ubphone: '../../../../static/img/phone_icon_gray.png', //未绑定手机
      autoIcon: '../../../../static/img/member_icon.png', //已认证
      unAutoIcon: '../../../../static/img/member_icon_gray.png' //未认证
    };
  },
  methods: {
    filterAvatar(img) {
      return img ? img.replace(/^http(s)?/, 'https') : this.defaultAvatar;
    },
    getSingleInfo() {
      getMemberInfo({ memberId: this.row.memberId }).then(res => {
        if (res.errorCode === 0) {
          this.singleInfo = res.result || {};
        }
      });
    },
    linkDetail() {
      window.open(`/member/#/wechatmemberDetail?memberId=${this.row.memberId}`);
    }
  },
  filters: {
    formatCardName(val) {
      if (val) {
        if (val.length > 10) {
          val = val.substr(0, 10) + '...';
        }
      }
      return val;
    }
  }
};
</script>
