<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=""></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" />
                    <img :title="singleInfo.wxStatus == 0 ? '未使用小程序' : singleInfo.wxStatus == 1 ? '使用过小程序' : ''" class="channelicon fr mr6"
                        :src="singleInfo.wxStatus == 0 ? xcxicongray : singleInfo.wxStatus == 1 ? xcxicon : ''"/>
                </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="">
                <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 {formateDateTimeByType} from '@/utils/index.js';
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'),
        }
    },
    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>

