<template>
  <div class="customer-details" v-loading.fullscreen.lock="fullscreenLoading">
    <v-nav :navpath="navpath" />
    <div class="customer-contain-wrap">
      <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'" @click="baseinfoDialogVisible=true">
            编辑
          </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-descriptions :column="3" labelClassName="info-lebel"
                  contentClassName="info-content">
                  <el-descriptions-item label="姓名">
                    {{ member.memberName||'--' }}<span
                      class="gray-font">（昵称:{{ member.thirdNickname||'--' }}）</span>
                    <el-tag type="success" v-if="member.customerType" class="tag">
                      {{ member.customerType|customerTypeFilter }}
                    </el-tag>
                    <span title="取消关注公众号" v-if="member.status==0" style="margin-right: 6px;">
                      <icon-svg icon-class="icon-weixinquguan" class="status-icon" />
                    </span><i :title="member.status==1?'已关注公众号':'未关注公众号'" v-if="member.status==1"
                      class="iconfont status-icon icon-weixin1 follow" /><i title="已使用小程序"
                      v-if="member.wxStatus==1" class="iconfont status-icon icon-xiaochengxu1" />
                  </el-descriptions-item>
                  <el-descriptions-item label="性别">
                    {{ member.memberGender|genderFilter }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`出生日期（${member.birthType==0?'农历':'阳历'}）`">
                    {{ member.memberBirthdayValue||'--' }}
                  </el-descriptions-item>
                  <el-descriptions-item label="手机号">
                    {{ member.phoneNumber ||'--' }}
                  </el-descriptions-item>
                  <el-descriptions-item label="常驻城市">
                    {{ member.memberMainStoreArea||'--' }}
                  </el-descriptions-item>
                  <el-descriptions-item label="关注来源">
                    {{ member.attentionChannelDict||'--' }}
                  </el-descriptions-item>
                  <el-descriptions-item label="首次关注时间">
                    {{ member.attentionTime|formatTime }}
                  </el-descriptions-item>
                  <el-descriptions-item label="达摩同意协议时间">
                    {{ member.memberProtocolInfo.consentPrivacyProtocolTime|formatTime }}
                  </el-descriptions-item>
                  <el-descriptions-item label="微盟同意协议时间">
                    <p style="margin:0;line-height:20px;">
                      访问：{{ member.memberProtocolInfo.visitConsentPrivacyProtocolTime|formatTime }}
                    </p>
                    <p style="margin:0;line-height:20px;">
                      登录：{{ member.memberProtocolInfo.loginConsentPrivacyProtocolTime|formatTime }}
                    </p>
                  </el-descriptions-item>
                </el-descriptions>
              </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"></span>
                  <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 v-show="toggleTag" class="max1600">
                <div class="extend-description">
                  <!-- 开卡拓展字段 -->
                  <template
                    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">
                        {{ item.fieldValue }}
                      </el-descriptions-item>
                      <el-descriptions-item label="宝宝信息" v-if="babyStr">
                        {{ 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;" />
                          </span>
                        </el-tooltip>
                      </el-descriptions-item>
                    </el-descriptions>
                  </template>
                  <!-- 会员信息字段 -->
                  <template 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>
                  </template>
                  <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>
              </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-descriptions-item>
                <el-descriptions-item label="集团会员等级:">
                  {{ memberInfo.cliqueGradeName||'--' }}
                </el-descriptions-item>
                <el-descriptions-item label="" />
              </template>
              <el-descriptions-item label="商户会员卡号:">
                {{ memberInfo.cardNum||'--' }}
              </el-descriptions-item>
              <el-descriptions-item label="商户会员等级:">
                {{ memberInfo.gradeName||'--' }}
                <template v-if="memberInfo.gradeName">
                  <el-popconfirm v-if="memberInfo.erpCalcGrade" popper-class="grade-confirm-wrap"
                    placement="top" width="184" @confirm="gradeDialogVisible=true"
                    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" /></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="gradeDialogVisible=true"><i
                        class="el-icon-edit" /></span>
                  </el-tooltip>
                </template>
              </el-descriptions-item>
              <el-descriptions-item label="认证时间:">
                {{ memberInfo.authTime|formatTime }}
              </el-descriptions-item>
              <el-descriptions-item label="开卡方式:">
                {{ memberInfo.openCardChannelDict||'--' }}
              </el-descriptions-item>
              <el-descriptions-item label="开卡时间:">
                {{ memberInfo.cardGivingTime|formatTime }}
              </el-descriptions-item>
              <el-descriptions-item label="等级到期时间:">
                {{ memberInfo.limitTime|formatTime }}
              </el-descriptions-item>
            </el-descriptions>
          </template>
          <!-- 会员卡信息end -->

          <!-- 客户记录 -->
          <template v-if="section.name==='customerRecord'">
            <div class="flex-wrap">
              <!-- 资产信息 -->
              <div class="flex-moudle-item">
                <div :class="['flex-item assets-item',item.iconTheme!=='balance'||(item.iconTheme==='balance'&&memberInfo.storedValueFlag)?'hover':'']"
                  v-for="item in section.childrenList.assets" :key="item"
                  @click="item.iconTheme==='balance'?goStoreValue():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 }}
                      </div>
                      <div class="num">
                        {{ memberInfo[item.key]
                          ?(item.key==='storedValue'?(memberInfo[item.key]|storedValue):(memberInfo[item.key]))
                          :0 }}
                      </div>
                    </div>
                  </div>
                  <div class="el-icon-arrow-right"
                    v-if="item.iconTheme!=='balance'||(item.iconTheme==='balance'&&memberInfo.storedValueFlag)" />
                </div>
              </div>
              <!-- 交易记录 -->
              <div class="flex-moudle-item">
                <div class="flex-item hover transaction-item" @click="goLink(item.path)"
                  v-for="item in section.childrenList.transaction" :key="item">
                  <div class="left">
                    <p class="icon-wrap">
                      <i v-if="item.icon" :class="['iconfont',item.icon]" />
                      <img v-else :src="require('../../../static/img/logo-blue.png')" alt="">
                    </p>
                    <div class="label">
                      {{ item.label }}
                    </div>
                    <div class="num">
                      {{ memberInfo[item.key]||0 }}
                    </div>
                  </div>
                  <div class="el-icon-arrow-right" />
                </div>
              </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 }}
                      </div>
                      <div class="num">
                        {{ memberInfo[item.key]
                          ?(item.key==='storedValue'?(memberInfo[item.key]|storedValue):(memberInfo[item.key]))
                          :0 }}
                      </div>
                    </div>
                  </div>
                  <div class="el-icon-arrow-right" v-if="item.key==='numOfTel'" />
                </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 class="item" effect="dark" open-delay="200" content="修改服务门店"
                    placement="top-start">
                    <span 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" />
                      <p :key="item" class="store-name">
                        {{ item.storeName }}
                      </p>
                    </template>
                    <el-tooltip class="item" effect="dark" open-delay="200" content="修改协管门店"
                      placement="top-start">
                      <span 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 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" @click="labelDialogVisible=true">
                      编辑手工标签
                    </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="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">
                          <img :alt="item.dictName"
                            :src="`./static/img/body-shape-${member.memberGender===1?'man':'woman'}/${item.imageUrl}`">
                        </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 -->

          <!-- 客户日志 -->
          <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="operContent" label="日志详情" />
              <el-table-column prop="operReason" 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>
    <!-- 基本信息修改弹窗 -->
    <baseinfo-dialog :dialogVisible.sync="baseinfoDialogVisible" :baseInfo="member"
      :nationCodeList="nationCodeList" @refresh="initData" />
    <!-- 宝宝信息弹窗 -->
    <babyinfo-dialog :dialogVisible.sync="babyDialogVisible"
      :childFieldsList="extendInfo.openChildrenField||[]" />
    <!-- 等级修改弹窗 -->
    <customergrade-dialog :dialogVisible.sync="gradeDialogVisible" :memberId="memberId"
      :gradeId="memberInfo.gradeId" :gradeList="gradeList" @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">
.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;
}
</style>
