<template>
  <div class="customer-details" v-loading.fullscreen.lock="fullscreenLoading">
    <v-nav :navpath="navpath"></v-nav>
    <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"></i><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"></i>
                    <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>（昵称:{{member.thirdNickname}}）</span>
                    <el-tag type="success" v-if="member.customerType" class="tag">
                      {{member.customerType|customerTypeFilter}}</el-tag><i v-if="member.status==1"
                      class="iconfont status-icon icon-weixin1" title="微信会员"></i><i
                      v-if="member.wxStatus==1" class="iconfont status-icon icon-xiaochengxu1"
                      title="小程序"></i>
                  </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">
                <el-radio-group v-model="showFieldType">
                  <el-radio-button :label="1">开卡拓展字段</el-radio-button>
                  <el-radio-button :label="2">会员信息字段</el-radio-button>
                </el-radio-group>
                <div class="vertical-line"></div>
                <div class="toggleTag" @click="toggleTag=!toggleTag">展开<i
                    :class="toggleTag ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                </div>
              </div>
              <div v-show="toggleTag" class="max1600">
                <div class="extend-description">
                  <!-- 开卡拓展字段 -->
                  <template v-if="showFieldType===1&&extendInfo.openField">
                    <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>
                  </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)||(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=""></el-descriptions-item>
              </template>
              <el-descriptions-item label="商户会员卡号:">{{memberInfo.cardNum||'--'}}
              </el-descriptions-item>
              <el-descriptions-item label="商户会员等级:">{{memberInfo.gradeName||'--'}}
                <el-popconfirm 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"></i></span>
                  </el-tooltip>
                </el-popconfirm>
              </el-descriptions-item>
              <el-descriptions-item label="等级到期时间:">{{memberInfo.limitTime|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.authTime|formatTime}}
              </el-descriptions-item>
            </el-descriptions>
          </template>
          <!-- 会员卡信息end -->

          <!-- 资产信息 -->
          <template v-if="section.name==='assets'">
            <ul class="card-list-wrap max1600">
              <li :class="['card-item',item.iconTheme,memberInfo.storedValueFlag?'':'nohover']" v-for="item in section.childrenList"
                :key="item" @click="item.iconTheme==='balance'?goStoreValue():goLink(item.path)">
                <p :class="['icon-wrap', item.iconTheme]"><i :class="['iconfont', item.icon]"></i>
                </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 class="el-icon-arrow-right"></div>
              </li>
            </ul>
          </template>
          <!-- 资产信息end -->

          <!-- 归属信息 -->
          <template v-if="section.name==='ascription'">
            <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="info">专属导购：{{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"></i></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>
                    <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"></i></span>
                  </el-tooltip>
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </template>
          <!-- 归属信息end -->

          <!-- 交易记录 -->
          <template v-if="section.name==='transaction'">
            <ul class="card-list-wrap max1600">
              <li class="card-item" v-for="item in section.childrenList" :key="item"
                @click="goLink(item.path)">
                <div class="one-line">
                  <icon-svg v-if="item.icon" :icon-class="item.icon" :class="['svg', item.icon]" />
                  <img v-else :src="require('../../../static/img/logo-blue.png')"
                    alt="">{{item.label}}<i class="el-icon-arrow-right"></i>
                </div>
                <div class="two-line">{{memberInfo[item.key]||0}}</div>
              </li>
            </ul>
          </template>
          <!-- 交易记录end -->

          <!-- 交互记录 -->
          <template v-if="section.name==='interactive'">
            <ul class="card-list-wrap max1600">
              <template v-for="(item,index) in section.childrenList">
                <p :key="item" v-if="index>0" class="vertical-line"></p>
                <li :class="['card-item',item.key]" :key="item" @click="goLink(item.path)">
                  <i
                    :class="['iconfont',item.icon]"></i>{{item.label}}<span>{{memberInfo[item.key]||0}}</span>
                </li>
              </template>
            </ul>
          </template>
          <!-- 交互记录end -->

          <!-- 标签备注 -->
          <template v-if="section.name==='label'">
            <div class="tabs-wrap">
              <el-tabs tab-position="left" style="height: 200px;" v-model="labelTabsActive">
                <!-- 金字塔分层 -->
                <el-tab-pane name="groupName">
                  <template slot="label">金字塔分层<span class="tip">（每日更新）</span></template>
                  <el-tag type="info"
                    v-if="tagAndRemarkInfo.memberGroup.memberGradeGroup.groupName">
                    {{tagAndRemarkInfo.memberGroup.memberGradeGroup.groupName}}</el-tag>
                  <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="memberTagGroup">
                  <div v-if="tagAndRemarkInfo.memberGroup.memberTagGroupList.length"
                    class="flex-tag-wrap">
                    <el-tag type="info"
                      v-for="item in tagAndRemarkInfo.memberGroup.memberTagGroupList" :key="item">
                      {{item.groupName}}</el-tag>
                  </div>
                  <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="tag">
                  <div style="padding:14px 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="require(`../../../static/img/body-shape-${member.memberGender===2?'woman':'man'}/${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>
              <el-table-column prop="operContent" label="日志详情"> </el-table-column>
              <el-table-column prop="operReason" label="事由"> </el-table-column>
              <el-table-column prop="operRemark" label="备注">
                <template slot-scope="{ row }">
                  <span v-html="row.operRemark"></span>
                </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">
              </dm-pagination>
            </div>
          </template>
          <!-- 客户日志end -->
        </div>
      </div>
    </div>
    <!-- 基本信息修改弹窗 -->
    <baseinfo-dialog :dialogVisible.sync="baseinfoDialogVisible" :baseInfo="member"
      :nationCodeList="nationCodeList" @refresh="initData" />
    <!-- 等级修改弹窗 -->
    <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;
    }
  }
}
</style>