<template>
  <div class="customer-details">
    <div class="customer-contain-wrap" v-loading="fullscreenLoading">
      <div class="customer-info-item" v-for="section in customerInfoItemList" :key="section">
        <div class="info-item-header">
          <h2 class="item-title">
            <i class="vertical-line" /><span>{{ section.title }}</span>
          </h2>
          <el-button type="text" v-if="section.name==='basic' && getCodeAuth('memberEditInfo')"
            @click="baseinfoDialogVisible=true" :limit-code="getCode('memberEditInfo')">
            编辑
          </el-button>
        </div>
        <div :class="[section.class]">
          <!-- 基本信息 -->
          <template v-if="section.name==='basic'">
            <div class="flex-wrap max1600">
              <div class="left">
                <div class="user-avatar" v-loading="imgLoading">
                  <div class="tag" v-if="member.frozenStatus">
                    冻结
                  </div>
                  <div class="maskOperation">
                    <!-- <span @click="updateImgUrl">刷新头像</span><i class="vertical-line" /> -->
                    <router-link tag="span" :to="`/photo-album?memberId=${memberId}&from=1`">
                      客户相册
                    </router-link>
                  </div>
                  <el-image
                    fit="cover"
                    class="user-avatar-img"
                    :src="member.thirdImgUrl ? member.thirdImgUrl : defaultImg"
                  >
                    <div slot="error" class="image-slot">
                      <img width="120" :src="require('../../../static/img/broke-img.png')" alt="">
                    </div>
                  </el-image>
                </div>
              </div>
              <div class="right">
                <el-row class="member-info-row">
                  <el-col span="11">
                    <span class="info-lebel">姓名:</span>
                    <div class="info-content">
                      <el-tooltip v-if="member.memberNameOverflow" placement="top" :content="member.memberName">
                        <span class="member-info-name">{{ member.memberName||'--' }}</span>
                      </el-tooltip>
                      <span v-else class="member-info-name">{{ member.memberName||'--' }}</span>
                      <span class="gray-font">
                        (昵称:
                        <el-tooltip v-if="member.thirdNicknameOverflow" placement="top" :content="member.thirdNickname">
                          <span class="member-info-name">{{ member.thirdNickname||'--' }}</span>
                        </el-tooltip>
                        <span v-else class="member-info-name">{{ member.thirdNickname||'--' }}</span>)
                      </span>
                      <el-tag type="success" v-if="member.customerType" class="tag">
                        {{ member.customerType|customerTypeFilter }}
                      </el-tag>
                      <div class="channel-box" v-for="channel in member.memberSources" :key="channel.parentSourceCode">
                        <!-- {{member.memberSources}} -->
                        <el-popover popper-class="channel-info-popover" v-if="channel.highlight == 1" trigger="hover" placement="top">
                          <div class="channel-info">
                            <div class="channel-title">{{ channel.sourceName }}<span v-if="channel.parentSourceCode == 1304 && channel.activeFlag != 1" class="channel-title-tip"> (未激活)</span></div>
                            <div class="channel-info-item" v-if="!channel.event || channel.event != '-'">
                              <span class="channel-info-label">来 源：</span>
                              <span class="channel-info-value">{{ channel.event || '--' }}</span>
                            </div>
                            <div class="channel-info-item">
                              <span class="channel-info-label">最近关联时间：</span>
                              <span class="channel-info-value">{{ channel.lastEffectiveTime }}</span>
                            </div>
                          </div>
                          <template slot="reference">
                            <img class="channel-icon" v-if="channel.parentSourceCode == 1100" src="../../../static/img/channel-icon/weixin-1.png" alt="">
                            <img class="channel-icon" v-if="channel.parentSourceCode == 1600"  src="../../../static/img/channel-icon/xiaochengxu-1.png" alt="">
                            <img class="channel-icon" v-if="channel.parentSourceCode == 1700" src="../../../static/img/channel-icon/qiyeweixin-1.png" alt="">
                            <img class="channel-icon" v-if="channel.parentSourceCode == 1303" src="../../../static/img/channel-icon/weimen-1.png" alt="">
                            <img class="channel-icon" v-if="channel.parentSourceCode == 1302" src="../../../static/img/channel-icon/tianmao-1.png" alt="">
                            <!-- <img class="channel-icon" v-if="channel.parentSourceCode == 1304" src="../../../static/img/channel-icon/douyin-1.png" alt=""> -->
                             <span  v-if="channel.parentSourceCode == 1304">
                               <img class="channel-icon" v-if="channel.activeFlag == 1" src="../../../static/img/channel-icon/douyin-1.png" alt="">
                               <img class="channel-icon" v-else src="../../../static/img/channel-icon/douyin-0.png" alt="">
                            </span>
                          </template>
                        </el-popover>
                        <template v-if="channel.highlight == 2">
                          <el-popover popper-class="channel-info-popover" v-if="[1100, 1302, 1700, 1304].some(code => code == channel.parentSourceCode)" trigger="hover" placement="top">
                            <template v-if="channel.parentSourceCode == 1100">
                              <div class="channel-info">
                                <div class="channel-title">
                                  {{ channel.sourceName }}
                                  <span class="channel-title-tip">(已取关)</span>
                                </div>
                                <div class="channel-info-item">
                                  <span class="channel-info-label">取关时间：</span>
                                  <span class="channel-info-value">{{ channel.lastUnEffectiveTime }}</span>
                                </div>
                              </div>
                              <img slot="reference" class="channel-icon" src="../../../static/img/channel-icon/weixin-2.png" alt="">
                            </template>
                            <template v-if="channel.parentSourceCode == 1700">
                              <div class="channel-info">
                                <div class="channel-title">
                                  {{ channel.sourceName }}
                                  <span class="channel-title-tip">(好友关系已解除)</span>
                                </div>
                                <div class="channel-info-item">
                                  <span class="channel-info-label">解除时间：</span>
                                  <span class="channel-info-value">{{ channel.lastUnEffectiveTime }}</span>
                                </div>
                              </div>
                              <img slot="reference" class="channel-icon" src="../../../static/img/channel-icon/qiyeweixin-2.png" alt="">
                            </template>
                            <template v-if="channel.parentSourceCode == 1302">
                              <div class="channel-info">
                                <div class="channel-title">
                                  {{ channel.sourceName }}
                                  <span class="channel-title-tip">(已解绑)</span>
                                </div>
                                <div class="channel-info-item">
                                  <span class="channel-info-label">解绑时间：</span>
                                  <span class="channel-info-value">{{ channel.lastUnEffectiveTime }}</span>
                                </div>
                              </div>
                              <img slot="reference" class="channel-icon" src="../../../static/img/channel-icon/tianmao-2.png" alt="">
                            </template>
                            <template v-if="channel.parentSourceCode == 1304">
                              <div class="channel-info">
                                <div class="channel-title">
                                  {{ channel.sourceName }}
                                </div>
                                <div class="channel-info-item">
                                  <span class="channel-info-label">解绑时间：</span>
                                  <span class="channel-info-value">{{ channel.lastUnEffectiveTime }}</span>
                                </div>
                              </div>
                              <img slot="reference" class="channel-icon" src="../../../static/img/channel-icon/douyin-2.png" alt="">
                            </template>
                          </el-popover>
                          <img class="channel-icon" v-if="channel.parentSourceCode == 1600" src="../../../static/img/channel-icon/xiaochengxu-2.png" alt="">
                          <img class="channel-icon" v-if="channel.parentSourceCode == 1303" src="../../../static/img/channel-icon/weimen-2.png" alt="">
                        </template>
                      </div>
                    </div>
                  </el-col>
                  <el-col span="6">
                    <span class="info-lebel">性别:</span>
                    <div class="info-content">{{ member.memberGender|genderFilter }}</div>
                  </el-col>
                  <el-col span="7">
                    <span class="info-lebel">{{ `出生日期（${member.birthType==0?'农历':'阳历'}）:` }}</span>
                    <div class="info-content">{{ member.memberBirthdayValue||'--' }}</div>
                  </el-col>
                </el-row>
                <el-row class="member-info-row">
                  <el-col span="11">
                    <span class="info-lebel">手机号:</span>
                    <div class="info-content">
                      {{ member.phoneNumber ||'--' }}
                      <el-tooltip v-if="typeof member.phoneNumber == 'string' && member.phoneNumber.indexOf('*') == -1" placement="top" content="复制手机号">
                        <i class="iconfont icon-fuzhi copy-btn" v-clipboard:copy="member.phoneNumber" v-clipboard:success="onCopy"></i>
                      </el-tooltip>
                    </div>
                  </el-col>
                  <el-col span="6">
                    <span class="info-lebel">常驻城市:</span>
                    <div class="info-content">{{ member.memberMainStoreArea||'--' }}</div>
                  </el-col>
                  <el-col span="7">
                    <!-- <span class="info-lebel">关注来源:</span>
                    <div class="info-content">{{ member.attentionChannelDict||'--' }}</div> -->
                    <span class="info-lebel">客户来源:</span>
                    <div class="info-content">{{ member.firstMemberSource ? member.firstMemberSource.sourceName || '--' : '--' }}</div>
                  </el-col>
                </el-row>
                <el-row class="member-info-row">
                  <el-col span="11">
                    <span class="info-lebel">最近关注时间:</span>
                    <div class="info-content">
                      {{ Array.isArray(member.memberSources) ? (member.memberSources.find(el => el.parentSourceCode == 1100) || { lastEffectiveTime: '--' }).lastEffectiveTime : '--' }}
                    </div>
                  </el-col>
                  <el-col span="6">
                    <span class="info-lebel">达摩同意协议时间:</span>
                    <div class="info-content">{{ member.memberProtocolInfo.consentPrivacyProtocolTime|formatTime }}</div>
                  </el-col>
                  <el-col span="7">
                    <span class="info-lebel">微盟同意协议时间:</span>
                    <div class="info-content">
                      <p>
                        访问：{{ member.memberProtocolInfo.visitConsentPrivacyProtocolTime|formatTime }}
                      </p>
                      <p>
                        登录：{{ member.memberProtocolInfo.loginConsentPrivacyProtocolTime|formatTime }}
                      </p>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="extended-field-wrap">
              <div class="flex-header">
                <div class="tab-button-wrap">
                  <el-button
                    type="text"
                    @click="changeExtendFieldTab(1)"
                    :class="showFieldType===1?'':'no-active'"
                  >
                    开卡拓展字段
                  </el-button><span
                    class="line"
                  />
                  <el-button
                    type="text"
                    @click="changeExtendFieldTab(2)"
                    :class="showFieldType===2?'':'no-active'"
                  >
                    会员信息字段
                  </el-button>
                </div>
                <div class="vertical-line" />
                <!-- <div class="toggleTag" @click="toggleTag=!toggleTag">
                  {{ toggleTag?'收起':'展开' }}<i
                    :class="toggleTag ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
                </div>-->
              </div>
              <div class="max1600">
                <div :class="['extend-description']">
                  <!-- 开卡拓展字段 -->
                  <div :class="[toggleTag?'':'shrink']"
                    v-if="showFieldType===1&&(extendInfo.openField||extendInfo.openChildrenField)">
                    <el-descriptions :column="3" labelClassName="info-lebel"
                      contentClassName="info-content">
                      <el-descriptions-item v-for="item in extendInfo.openField" :key="item"
                        :label="item.fieldName">
                        {{ (typeof item.fieldValue == 'string' && item.fieldValue.length > 0) || typeof item.fieldValue == 'number' ? item.fieldValue : '--' }}
                      </el-descriptions-item>
                      <el-descriptions-item label="宝宝信息" v-if="babyStr && extendInfo.babyConfigTemplate && extendInfo.babyConfigTemplate.template.length>0">
                        {{ babyStr }} <el-tooltip
                          class="item"
                          effect="dark"
                          open-delay="200"
                          content="编辑宝宝信息"
                          placement="top-start"
                        >
                          <span class="edit-span" @click="babyDialogVisible=true">
                            <!-- <icon-svg
                              icon-class="icon-chakanxiangqing-copy"
                              style="width:13px;height:14px;"
                            /> -->
                            <i class="el-icon-edit"></i>
                          </span>
                        </el-tooltip>
                      </el-descriptions-item>
                    </el-descriptions>

                  </div>
                  <!-- 会员信息字段 -->
                  <div  :class="[toggleTag?'':'shrink']" v-if="showFieldType===2&&extendInfo.fieldList">
                    <el-descriptions
                      :column="3"
                      labelClassName="info-lebel"
                      contentClassName="info-content"
                    >
                      <el-descriptions-item
                        v-for="item in extendInfo.fieldList"
                        :key="item"
                        :label="item.fieldName"
                      >
                        {{ item.fieldValue }}
                      </el-descriptions-item>
                    </el-descriptions>

                  </div>
                  <div
                    class="empty-block"
                    v-if="(showFieldType===1&&!extendInfo.openField&&!extendInfo.openChildrenField)||(showFieldType===2&&!extendInfo.fieldList)"
                  >
                    <!-- <img :src="require('../../../static/img/no-data_icon.png')" alt=""> -->
                    <p>暂无数据</p>
                  </div>
                  <div class="toggleTag" @click="toggleTag=!toggleTag" v-if="toggleShow">
                      {{ toggleTag?'收起':'展开更多' }}<i
                        :class="toggleTag ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 基本信息end -->

          <!-- 会员卡信息 -->
          <template v-if="section.name==='card'">
            <el-descriptions
              :column="3"
              :colon="false"
              labelClassName="info-lebel"
              contentClassName="info-content"
            >
              <template v-if="showClique">
                <el-descriptions-item label="集团会员卡号:">
                  {{ memberInfo.cliqueCardNo||'--' }}
                  <el-tooltip v-if="typeof memberInfo.cliqueCardNo == 'string' && memberInfo.cliqueCardNo.indexOf('*') == -1" placement="top" content="复制会员卡号">
                    <i class="iconfont icon-fuzhi copy-btn" v-clipboard:copy="memberInfo.cliqueCardNo" v-clipboard:success="onCopy"></i>
                  </el-tooltip>
                </el-descriptions-item>
                <el-descriptions-item label="集团会员等级:">
                  {{ memberInfo.cliqueGradeName||'--' }}
                  <el-tooltip
                    v-if="showEditClique"
                    class="item"
                    effect="dark"
                    open-delay="200"
                    content="编辑集团会员等级"
                    placement="top-start"
                  >
                    <span class="edit-span" @click="showGradeDialog(true)"><i
                      class="el-icon-edit"
                    /></span>
                  </el-tooltip>
                </el-descriptions-item>
                <el-descriptions-item></el-descriptions-item>
                <!-- <el-descriptions-item label="集团会员积分:">
                  {{ memberInfo.cliqueMemberIntegral||'--' }}
                </el-descriptions-item> -->
              </template>
              <el-descriptions-item label="会员卡号:">
                {{ memberInfo.cardNum||'--' }}
                <el-tooltip v-if="typeof memberInfo.cardNum == 'string' && memberInfo.cardNum.indexOf('*') == -1" placement="top" content="复制会员卡号">
                  <i class="iconfont icon-fuzhi copy-btn" v-clipboard:copy="memberInfo.cardNum" v-clipboard:success="onCopy"></i>
                </el-tooltip>
              </el-descriptions-item>
              <el-descriptions-item label="会员等级:">
                {{ memberInfo.gradeName||'--' }}
                <template v-if="memberInfo.gradeName && getCodeAuth('memberEditGrade')">
                  <el-popconfirm v-if="memberInfo.erpCalcGrade" popper-class="grade-confirm-wrap"
                    placement="top" width="184" @confirm="showGradeDialog(false)"
                    confirm-button-text="继续修改" title="等级由ERP计算，建议前往ERP修改等级，以确保双方等级一致">
                    <el-tooltip slot="reference" class="item" effect="dark" open-delay="200"
                      content="编辑商户会员等级" placement="top-start">
                      <span class="edit-span"><i class="el-icon-edit"
                          :limit-code="getCode('memberEditGrade')" /></span>
                    </el-tooltip>
                  </el-popconfirm>
                  <el-tooltip v-else class="item" effect="dark" open-delay="200" content="编辑商户会员等级"
                    placement="top-start">
                    <span class="edit-span" @click="showGradeDialog(false)"><i class="el-icon-edit"
                        :limit-code="getCode('memberEditGrade')" /></span>
                  </el-tooltip>
                </template>
              </el-descriptions-item>
              <el-descriptions-item label="微信认证时间:">
                {{ memberInfo.authTime|formatTime }}
              </el-descriptions-item>
              <el-descriptions-item label="开卡渠道:">
                <!-- {{ memberInfo.openCardChannelDict||'--' }} -->
                {{ memberInfo.newOpenCardChannelDict||'--' }}
              </el-descriptions-item>
              <el-descriptions-item label="开卡时间:">
                {{ memberInfo.cardGivingTime|formatTime }}
              </el-descriptions-item>
              <el-descriptions-item label="等级到期时间:">
                <template v-if="memberInfo.limitTime == -1">永久有效</template>
                <template v-else>{{memberInfo.limitTime|formatTime}}</template>
              </el-descriptions-item>
            </el-descriptions>
          </template>
          <!-- 会员卡信息end -->

          <!-- 客户记录 -->
          <template v-if="section.name==='customerRecord'">
            <div class="flex-wrap">
              <!-- 积分相关 -->
              <div :class="['scores', { 'is-clique': showClique }]">
                <div class="scores-box" v-if="showClique" @click="goLinkWithClique('/enterpriseIntegralDataPage')">
                  <div class="scores-info" style="width: 368px;">
                    <icon-label-value label="集团积分" :value="memberInfo.totalPointEnterprise || 0" style="width: 51%;">
                    <div class="score-icon" slot="icon">
                      <i class="iconfont icon-jifenjiabei"></i>
                    </div>
                  </icon-label-value>
                   <div class="score-detail" style="margin-left: 0;width: 49%;">
                     <p class="score-detail-item flex">
                       <span class="score-detail-label width-84">可用积分</span>
                       <span class="score-detail-value text-over">{{ memberInfo.cliqueMemberIntegral ? memberInfo.cliqueMemberIntegral : 0 }}</span>
                     </p>
                     <p class="score-detail-item flex">
                       <span class="score-detail-label width-84">
                         不可用积分
                        <el-tooltip  content="不可用原因：积分为冻结/预扣状态，详情可查看客户日志" placement="top">
                          <i class="iconfont icon-QuestionCircleOutlined" style="font-size: 14px;color: #606266"/>
                        </el-tooltip>
                        </span>
                       <span class="score-detail-value text-over">{{ memberInfo.cliqueMemberInvalidIntegral ? memberInfo.cliqueMemberInvalidIntegral : 0 }}</span>
                     </p>
                    </div>
                  </div>
                  <i class="el-icon-arrow-right" style="font-size: 16px;color: #909399"></i>
                </div>
                <div class="scores-box" @click="goLink('/integralDataPage')" >
                  <div class="scores-info"  style="width: 368px;">
                    <icon-label-value label="积分" :value="memberInfo.totalPoint || 0" style="width: 51%;">
                      <div class="score-icon" slot="icon">
                        <i class="iconfont icon-jifenduihuan"></i>
                      </div>
                    </icon-label-value>
                   <div class="score-detail" style="margin-left: 0;width: 49%;">
                     <p class="score-detail-item flex">
                       <span class="score-detail-label width-84">可用积分</span>
                       <span class="score-detail-value text-over">{{ memberInfo.accumulatPoints ? memberInfo.accumulatPoints : 0 }}</span>
                     </p>
                     <p class="score-detail-item flex">
                       <span class="score-detail-label width-84">
                         不可用积分
                        <el-tooltip  content="不可用原因：积分为冻结/预扣状态，详情可查看客户日志" placement="top">
                          <i class="iconfont icon-QuestionCircleOutlined" style="font-size: 14px;color: #606266"/>
                        </el-tooltip>
                        </span>
                       <span class="score-detail-value text-over">{{ memberInfo.invalidIntegral ? memberInfo.invalidIntegral : 0 }}</span>
                     </p>
                    </div>
                  </div>
                  <i class="el-icon-arrow-right" style="font-size: 16px;color: #909399"></i>
                </div>
                <div class="cards-box">
                  <div class="card-item" @click="goLink('/cardvoucher')">
                    <icon-label-value label="卡券" :value="memberInfo.couponCount ? memberInfo.couponCount : 0">
                      <div class="card-icon" slot="icon">
                        <i class="iconfont icon-01_kaquanguanli"></i>
                      </div>
                    </icon-label-value>
                    <i class="el-icon-arrow-right" style="font-size: 16px;color: #909399"></i>
                  </div>
                  <div :class="['balance-item', { 'has-balance': memberInfo.storedValueFlag }]" @click="goStoreValue">
                    <icon-label-value label="储值余额" :value="memberInfo.storedValue ? memberInfo.storedValue : 0">
                      <div class="balance-icon" slot="icon">
                        <i class="iconfont icon-chuzhizhanghu"></i>
                      </div>
                    </icon-label-value>
                    <i v-if="memberInfo.storedValueFlag" class="el-icon-arrow-right" style="font-size: 16px;color: #909399"></i>
                  </div>
                </div>
              </div>
              <!-- 订单相关 -->
              <div class="flex-moudle-item orders">
                <template v-for="(item, index) in section.childrenList.transaction">
                  <div v-if="index == 0" :key="index" class="order-total" @click="goLink(item.path)">
                    <icon-label-value :label="item.label" :value="memberInfo[item.key] || 0">
                      <div slot="icon" class="order-total-icon">
                        <i :class="['iconfont', item.icon]"></i>
                      </div>
                    </icon-label-value>
                    <i class="el-icon-arrow-right" style="font-size: 16px;color: #909399"></i>
                  </div>
                  <div v-else :key="index" class="order-item" @click="goLink(item.path)">
                    <div class="order-item-label">{{ item.label }}</div>
                    <div class="order-item-count">{{ memberInfo[item.key]||0 }}</div>
                  </div>
                </template>
              </div>
              <!-- 交互记录 -->
              <ul class="flex-column-wrap">
                <li
                  v-for="item in section.childrenList.interactive"
                  :class="['flex-column-item flex-item',item.path?'hover':'']"
                  :key="item"
                  @click="goLink(item.path)"
                >
                  <div class="left">
                    <p :class="['icon-wrap', item.iconTheme]">
                      <i :class="['iconfont', item.icon]" />
                    </p>
                    <div class="middle">
                      <div class="label">
                        {{ item.label }}
                       <el-tooltip v-if="item.key == 'numOfMarket'" content="只统计近半年的数据" placement="top">
                          <i class="iconfont icon-QuestionCircleOutlined" style="font-size: 14px;color: #606266" />
                       </el-tooltip>
                      </div>
                      <div class="num">
                        {{
                          item.key === "storedValue"
                            ? memberInfo[item.key] || storedValue
                            : item.key == "numOfMarket"
                            ? marketingRecordNum || 0
                            : memberInfo[item.key] || 0
                        }}
                        <!-- {{
                          memberInfo[item.key]
                            ? item.key === "storedValue"
                              ? memberInfo[item.key] || storedValue
                              : item.key == "numOfMarket"
                              ? marketingRecordNum
                              : memberInfo[item.key]
                            : 0
                        }} -->
                      </div>
                    </div>
                  </div>
                  <div class="el-icon-arrow-right" style="font-size: 16px;color: #909399"/>
                </li>
              </ul>
            </div>
          </template>
          <!-- 客户记录end -->

          <!-- 归属信息 -->
          <template v-if="section.name==='ascription'">
            <div class="max1600">
              <el-descriptions
                :column="1"
                labelClassName="info-lebel"
                contentClassName="info-content"
              >
                <el-descriptions-item label="开卡门店">
                  {{ member.openStoreName||'--' }}<el-tag
                    v-if="member.openStoreClerkName"
                    type="info"
                  >
                    开卡导购：{{ member.openStoreClerkName }}<span
                      v-if="member.openStoreClerkCode"
                    >（{{ member.openStoreClerkCode }}）</span>
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="服务门店">
                  {{ member.mainStoreName }}<el-tag
                    v-if="member.mainClerkName"
                    :type="member.clerkInStore==0?'warning':'info'"
                    :title="member.clerkInStore==0?'非服务门店下导购':''"
                  >
                    专属导购：{{ member.mainClerkName }}<span
                      v-if="member.mainClerkCode"
                    >（{{ member.mainClerkCode }}）</span>
                  </el-tag>
                  <el-tooltip v-if="$getButtonLimit($buttonCode.memberEditStore)" class="item" effect="dark" open-delay="200" content="修改服务门店"
                    placement="top-start">
                    <span :limit-code="$buttonCode.memberEditStore" class="edit-span" @click="mainStoreDialogVisible=true"><i
                        class="el-icon-edit" /></span>
                  </el-tooltip>
                </el-descriptions-item>
                <el-descriptions-item label="协管门店">
                  <!-- <div class="assist-store-list"> -->
                    <template v-for="(item,index) in member.shopNames">
                      <span v-if="index>0" :key="item" class="vertical-line" />
                      <span :key="item">
                        {{ item.storeName }}<span v-if="index<member.shopNames.length-1">&nbsp;&nbsp;</span>
                      </span>
                    </template>
                    <el-tooltip v-if="$getButtonLimit($buttonCode.memberEditStore)" class="item" effect="dark" open-delay="200" content="修改协管门店"
                      placement="top-start">
                      <span :limit-code="$buttonCode.memberEditStore" class="edit-span" @click="subStoreDialogVisible=true"><i
                          class="el-icon-edit" /></span>
                    </el-tooltip>
                  <!-- </div> -->
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </template>
          <!-- 归属信息end -->

          <!-- 标签备注 -->
          <template v-if="section.name==='label'">
            <div class="tabs-wrap max1600">
              <el-tabs
                tab-position="left"
                style="height: 200px;"
                v-model="labelTabsActive"
                stretch
              >
                <!-- 客户分组 -->
                <el-tab-pane label="客户分组" name="memberTagGroup">
                  <div class="hand-label-item member-tag-group" :key="item">
                    <p>金字塔分层：</p>
                    <div
                      class="flex-tag-wrap"
                      v-if="tagAndRemarkInfo.memberGroup.memberGradeGroup.groupName"
                    >
                      <el-tag type="info">
                        {{ tagAndRemarkInfo.memberGroup.memberGradeGroup.groupName }}
                      </el-tag>
                    </div>
                    <div class="no-data" v-else>
                      无
                    </div>
                  </div>
                  <div v-if="tagAndRemarkInfo.memberGroup.showMemberTagGroupList" class="hand-label-item member-tag-group" :key="item">
                    <p>其他分组：</p>
                    <div
                      class="flex-tag-wrap"
                      v-if="tagAndRemarkInfo.memberGroup.memberTagGroupList.length"
                    >
                      <el-tag
                        type="info"
                        v-for="item in tagAndRemarkInfo.memberGroup.memberTagGroupList"
                        :key="item"
                      >
                        {{ item.groupName }}
                      </el-tag>
                    </div>
                    <div class="no-data" v-else>
                      无
                    </div>
                  </div>
                </el-tab-pane>
                <!-- 手工标签 -->
                <el-tab-pane label="手工标签" name="tag">
                  <div style="padding:0 0 23px;text-align: right;">
                    <el-button type="text" v-if="getCodeAuth('memberEditManualTag')"
                      @click="labelDialogVisible=true" :limit-code="getCode('memberEditManualTag')">
                      编辑手工标签
                    </el-button>
                  </div>
                  <template v-for="item in section.childrenList">
                    <div
                      v-if="tagAndRemarkInfo.tag[item.key]&&tagAndRemarkInfo.tag[item.key].length"
                      class="hand-label-item"
                      :key="item"
                    >
                      <p>{{ item.title }}：</p>
                      <div class="flex-tag-wrap">
                        <el-tag
                          type="info"
                          v-for="tag in tagAndRemarkInfo.tag[item.key]"
                          :key="tag"
                        >
                          {{ tag.tagsName }}
                        </el-tag>
                      </div>
                    </div>
                  </template>
                  <div
                    class="empty-block"
                    style="height:131px;"
                    v-if="!tagAndRemarkInfo.tag.tagsList.length&&!tagAndRemarkInfo.tag.otherTagsList.length&&!tagAndRemarkInfo.tag.weimobTagsList.length"
                  >
                    <img :src="require('../../../static/img/no-data_icon.png')" alt="">
                    <p>暂无数据</p>
                  </div>
                </el-tab-pane>
                <!--活动标签-->
                <el-tab-pane label="活动标签" name="activeTag">
                  <template v-for="item in section.childrenList">
                    <div
                      v-if="tagAndRemarkInfo.activityTag[item.key]&&tagAndRemarkInfo.activityTag[item.key].length"
                      class="hand-label-item"
                      :key="item"
                    >
                      <p>{{ item.title }}：</p>
                      <div class="flex-tag-wrap">
                        <el-tag
                          type="info"
                          v-for="tag in tagAndRemarkInfo.activityTag[item.key]"
                          :key="tag"
                        >
                          {{ tag.tagsName }}
                        </el-tag>
                      </div>
                    </div>
                  </template>
                  <div v-if="!tagAndRemarkInfo.activityTag.marketingTagList.length&&!tagAndRemarkInfo.activityTag.sourceTagList.length" class="empty-block" style="height:186px;">
                    <img :src="require('../../../static/img/no-data_icon.png')" alt="">
                    <p>暂无数据</p>
                  </div>
                </el-tab-pane>
                <!-- 导购备注 -->
                <el-tab-pane label="导购备注" name="remarkList">
                  <ul v-if="tagAndRemarkInfo.remarkList.length" class="clerk-remarks-wrap">
                    <li
                      class="clerk-remarks-item"
                      v-for="remark in tagAndRemarkInfo.remarkList"
                      :key="remark"
                    >
                      <div class="one-line">
                        <p class="store-name">
                          {{ remark.storeName }}
                        </p>
                        <el-tag type="info">
                          {{ remark.clerkName }}
                        </el-tag>
                        <p class="create-time">
                          {{ remark.createTime|formatTime }}
                        </p>
                      </div>
                      <div class="remark-content">
                        {{ remark.remark }}
                      </div>
                    </li>
                  </ul>
                  <div v-else class="empty-block" style="height:186px;">
                    <img :src="require('../../../static/img/no-data_icon.png')" alt="">
                    <p>暂无数据</p>
                  </div>
                </el-tab-pane>
                <!-- 身形字段 -->
                <el-tab-pane label="身形字段" name="dictFigureList">
                  <ul v-if="tagAndRemarkInfo.dictFigureList.length" class="dictFigure-wrap">
                    <template v-for="item in tagAndRemarkInfo.dictFigureList">
                      <li :key="item" class="dictFigure-item">
                        <div v-if="item.imageUrl" class="img-wrap">
                          <el-image
                            style="width: 68px; height: 68px"
                            :src="require(`../../../static/img/body-shape-woman/${item.imageUrl}`)"
                            fit="contain"
                          >
                            <div slot="error" class="image-slot">
                              <img style="width:100%;height:100%;" :src="require('../../../static/img/failed-load_img.png')" alt="">
                            </div>
                          </el-image>
                        </div>
                        <div class="right">
                          <p class="dict-name">
                            {{ item.dictName }}
                          </p>
                          <p class="dictFigure-name">
                            {{ item.dictFigureName }}
                          </p>
                        </div>
                      </li>
                    </template>
                  </ul>
                  <div v-else class="empty-block" style="height:186px;">
                    <img :src="require('../../../static/img/no-data_icon.png')" alt="">
                    <p>暂无数据</p>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </template>
          <!-- 标签备注end -->

          <!-- 客户日志 -->
          <!-- <customer-log style="padding:0" v-if="section.name==='log'" :memberId="memberId"></customer-log> -->
          <!-- <template v-if="section.name==='log'">
            <el-table :data="tableData" v-loading="tableLoading" style="width: 100%">
              <el-table-column prop="createTime" label="时间">
                <template slot-scope="scope">
                  {{ scope.row.createTime | formatTime }}
                </template>
              </el-table-column>
              <el-table-column prop="operType" label="日志类型" />
              <el-table-column prop="operReason" label="事由" />
              <el-table-column prop="operContent" label="日志详情" />
              <el-table-column prop="operRemark" label="备注">
                <template slot-scope="{ row }">
                  <span v-html="row.operRemark" />
                </template>
              </el-table-column>
            </el-table>
            <div class="page mTop20" v-if="totalCount > 0">
              <dm-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="logPageParam.currentPage"
                :page-sizes="[20, 40, 60, 80]"
                :page-size="logPageParam.pageSize"
                layout="total, sizes, prev, pager, next"
                :total="totalCount"
              />
            </div>
          </template> -->
          <!-- 客户日志end -->
        </div>
        
      </div>
      <div class="info-item-header" style="margin-bottom: 20px;">
          <h2 class="item-title">
            <i class="vertical-line" /><span>客户日志</span>
            <span style="margin-left: 10px; color: #909399;font-size:12px">(展示近一年的日志)</span>
          </h2>
        </div>
      <customer-log style="padding:0" :memberId="memberId"></customer-log>
    </div>
    <!-- 基本信息修改弹窗 -->
    <baseinfo-dialog
      :dialogVisible.sync="baseinfoDialogVisible"
      :baseInfo="member"
      :nationCodeList="nationCodeList"
      @refresh="initData"
    />
    <!-- 宝宝信息弹窗 -->
    <babyinfo-dialog
      :dialogVisible.sync="babyDialogVisible"
      :childFieldsList="extendInfo.openChildrenField||[]"
      :babyConfigTemplate="extendInfo.babyConfigTemplate || {}"
    />
    <!-- 等级修改弹窗 -->
    <customergrade-dialog
      :dialogVisible.sync="gradeDialogVisible"
      :memberId="memberId"
      :isClique="isClique"
      :gradeId="memberInfo.gradeId"
      :cliqueGradeId="memberInfo.cliqueGradeId"
      :gradeList="gradeList"
      :cliqueGradeList="cliqueGradeList"
      @refresh="initData"
    />
    <!-- 服务门店、专属导购修改弹窗 -->
    <customermainstore-dialog
      :dialogVisible.sync="mainStoreDialogVisible"
      @refresh="initData"
      :obj="{...member}"
    />
    <!-- 协管门店修改弹窗 -->
    <customersubstore-dialog
      :dialogVisible.sync="subStoreDialogVisible"
      @refresh="initData"
      :obj="{...member}"
    />
    <!-- 手工标签修改弹窗 -->
    <customerlabel-dialog
      :dialogVisible.sync="labelDialogVisible"
      :memberId="memberId"
      @refresh="initData"
    />
  </div>
</template>
<script>
import action from './info.js';
export default { ...action };
</script>
<style lang="less" scoped>
@import './customerDetail.less';
</style>
<style lang="less">
.customer-details .el-descriptions-item__container {
  height: 24px;
  line-height: 24px;
}
.channel-info-popover {
  width: atuo;
  .channel-info {
    .channel-title {
      margin-bottom: 4px;
      font-size: 12px;
      font-weight: 600;
      color: #303133;
      line-height: 18px;
      .channel-title-tip {
        font-size: 12px;
        font-weight: 400;
        color: #FA8C16;
      }
    }
    .channel-info-item {
      +.channel-info-item {
        margin-top: 2px;
      }
      .channel-info-label, .channel-info-value {
        font-size: 12px;
        font-weight: 400;
        color: #303133;
        line-height: 17px;
      }
      .channel-info-label {
        word-spacing: 1.7em;
        width: 60px;
      }
    }
  }
}
.channel-box {
  display: inline-block;
  +.channel-box {
    margin-left: 6px;
  }
  .channel-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }
}
.copy-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 6px;
  width: 24px;
  height: 24px;
  color: #606266;
  cursor: pointer;
  font-size: 14px;
  &:hover {
    background-color: #F2F3F5;
  }
}
.grade-confirm-wrap {
  .el-popconfirm__main {
    align-items: flex-start;
    .el-popconfirm__icon.el-icon-question {
      margin-top: 2px !important;
    }
  }
}
.label-remarks-contain .el-tabs--left .el-tabs__active-bar.is-left {
  height: 22px !important;
  top: 9px;
}
// .subTitle .text {
//   font-size: 14px !important;
// }
// .subTitle .line {
// margin-right: 8px !important;
// }
.text-over{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: wrap;
}
.width-84{
  min-width: 100px;
  max-width: 100px
}
.flex{
  display: flex;
}
</style>
