<template>
  <div class="list-section">
    <div class="header-nav">
      <nav-path :navpath="navpath" />
    </div>
    <div class="list-section-contain">
      <div class="contain-header">
        <div class="top-header">
          <h2>客户（{{ totalCount }}人）</h2>
          <p class="right" v-if="multipleList.length">
            {{ totalCount>50000?`已勾选本页${multipleList.length}个客户，无法勾选全部客户（超过50000个）`:(selectAll == false?`已勾选本页${multipleList.length}个客户，`:`已勾选${totalCount}个客户，`) }}
            <span
              @click="selectAllmultipleList"
              class="multiple-all pointer"
              v-if="!selectAll&&totalCount<=50000"
            >勾选全部 {{ totalCount }} 个客户</span>
            <span
              @click="selectAllmultipleList"
              class="multiple-all pointer"
              v-if="selectAll"
            >取消勾选</span>
          </p>
        </div>
        <div class="action-wrap">
          <div class="left">
            <el-input
              style="width:300px;"
              v-model="pageParam.phoneNameCard"
              prefix-icon="el-icon-search"
              placeholder="输入姓名/昵称/手机号/会员卡号"
              @change="onSearch"
              clearable
            />
            <el-select
              v-model="customerTypeLabel"
              placeholder="请选择"
              multiple
              @change="selectChange"
              style="width: 300px"
            >
              <el-option :value="customerType" style="height: auto;padding:0">
                <el-tree
                  :data="treeData"
                  show-checkbox
                  node-key="id"
                  ref="tree"
                  highlight-current
                  default-expand-all
                  :props="defaultProps"
                  @check="handleCheckChange"
                />
              </el-option>
            </el-select>
            <el-button type="text" @click="showSearch = !showSearch" class="senior-search">
              高级搜索<i
                :class="showSearch ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"
              />
            </el-button>
          </div>
          <div class="right">
            <el-select
              v-model="batchValue"
              placeholder="批量操作"
              @change="handleFocusBatch"
              style="width: 150px;margin-right:10px;"
              @visible-change="handleVisibleBatch"
            >
              <!-- 如果是巴拉的子账号，不显示积分相关的操作按钮 -->
              <el-option
                key="integral"
                label="调整积分"
                value="integral"
                v-if="showHandleScoreBtn"
              />
              <el-option
                :key="item.value"
                v-for="item in batchOpt"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-popover
              placement="top-start"
              :width="isdot ? 450 : 160"
              trigger="hover"
              @show="getProcessList"
            >
              <batch-list :dataList="processList" />
              <el-badge slot="reference" :is-dot="isdot" class="item">
                <el-button type="primary" class="member-wechat-timer" icon="el-icon-time" />
              </el-badge>
            </el-popover>
          </div>
        </div>
        <div v-show="showSearch" class="senior-search-content">
          <!-- 人群筛选器 -->
          <vue-gic-people
            :sceneValue="sceneValue"
            ref="peopleFilter"
            :isAdd="true"
            @findFilter="findFilter"
            @editHide="editHide"
            @editShow="editShow"
            @hideBtn="hideBtn"
          />
          <div class="people-button" v-show="toggleTag">
            <el-button size="small" type="primary" @click="getData">
              确定
            </el-button>
            <el-button size="small" @click="cancelFilter">
              取消
            </el-button>
          </div>
        </div>
      </div>
      <div class="list-section-table">
        <el-table
          v-loading="loading"
          :data="tableData"
          tooltip-effect="dark"
          ref="multipleTable"
          show-overflow-tooltip
          @selection-change="handleSelectionChange"
          @sort-change="sortChange"
          @select-all="handleSelectAlll"
        >
          <el-table-column type="selection" min-width="50" fixed="left" />
          <template v-for="colum in checkedFields">
            <el-table-column
              :key="colum"
              :label="memberFieldsName[colum]"
              :prop="colum"
              show-overflow-tooltip
              :min-width="colum==='name'?200:150"
              :fixed="colum==='name'"
              :sortable="['name','grade','status','channel','createCardStoreName','cardNo','forzenStatus','mainStoreName'].includes(colum)?false:isExist[colum]?'custom':false"
            >
              <template slot-scope="{row}">
                <!-- 基本信息 -->
                <div v-if="colum == 'name'" class="customer-info-cell">
                  <img :src="row.thirdImgUrl||defaultImg" alt="">
                  <p class="memberName">
                    {{ row.memberName | formatMember }}
                  </p>
                </div>
                <!-- 等级 -->
                <span v-else-if="colum == 'grade'">{{ row.gradeName }}</span>
                <!-- 状态 -->
                <span v-else-if="colum == 'status'">
                  <span title="取消关注公众号" v-if="row.status==0" style="margin-right: 6px;"><svg
                    class="icon status-icon unfollow"
                    aria-hidden="true"
                  >
                    <use xlink:href="#icon-weixinquguan" />
                  </svg></span><i
                    :title="row.status==1?'已关注公众号':'未关注公众号'"
                    v-else
                    :class="['iconfont status-icon ',row.status==1?'icon-weixin1 follow':'icon-weixin1']"
                  /><i
                    :title="row.wxStatus==1?'已使用小程序':'未使用小程序'"
                    :class="['iconfont status-icon icon-xiaochengxu1',row.wxStatus==1?'used':'']"
                  />
                </span>
                <!-- 关联渠道 -->
                <span v-else-if="colum == 'channel'">
                  <span
                    class="channelicon"
                    :class="row.channelTaobao == 0 ? 'taobaoicongray' : row.channelTaobao == 1 ? 'taobaoicon' : ''"
                  />
                  <span
                    class="channelicon"
                    :class="row.channelJd == 0 ? 'jdicongray' : row.channelJd == 1 ? 'jdicon' : ''"
                  />
                  <span
                    class="channelicon"
                    :class="row.channelWei == 0 ? 'vipicongray' : row.channelWei == 1 ? 'vipicon' : ''"
                  />
                </span>
                <!-- 办卡时间 -->
                <div v-else-if="colum == 'crateCardDateString'">
                  <div>{{ row.crateCardDateString.split(' ')[0] }}</div>
                  <div>{{ row.crateCardDateString.split(' ')[1] }}</div>
                </div>
                <!-- 新增时间 -->
                <div v-else-if="colum == 'createTime'">
                  <div>{{ row.createTime.split(' ')[0] }}</div>
                  <div>{{ row.createTime.split(' ')[1] }}</div>
                </div>
                <!-- 关注时间 -->
                <div v-else-if="colum == 'attentionDate'">
                  <div>{{ row.attentionTime.split(' ')[0] }}</div>
                  <div>{{ row.attentionTime.split(' ')[1] }}</div>
                </div>
                <!-- 取消关注时间 -->
                <div v-else-if="colum == 'cancelAttentionTime'">
                  <div>{{ row.cancelAttentionTime.split(' ')[0] }}</div>
                  <div>{{ row.cancelAttentionTime.split(' ')[1] }}</div>
                </div>
                <!-- 生日 -->
                <div v-else-if="colum == 'birthday'">
                  <div>{{ row.birthdayMD.split(' ')[0] }}</div>
                </div>
                <!-- 开卡门店 -->
                <div v-else-if="colum == 'createCardStoreName'">
                  {{ row.openStoreName }}
                </div>
                <!-- 消费总额(应收) -->
                <div v-else-if="colum == 'costAll'">
                  {{ row.costFee }}
                </div>
                <!-- 冻结状态 -->
                <div class="frozenStatus" v-else-if="colum==='frozenStatus'">
                  <span class="dm-status--success" v-if="row.frozenStatus == 0">正常</span>
                  <span class="dm-status--warning" v-if="row.frozenStatus == 1">冻结</span>
                </div>
                <!-- 专属导购-->
                <div v-else-if="colum == 'clerkId'">
                  {{ row.clerkName }}
                </div>
                <!-- 开卡导购 -->
                <div v-else-if="colum == 'openClerkId'">
                  {{ row.openClerkName }}
                </div>
                <div v-else>
                  {{ row[colum] }}
                </div>
              </template>
            </el-table-column>
          </template>
          <el-table-column width="150" fixed="right" label-class-name="setting-cell">
            <template slot="header">
              <span>操作</span>
              <i class="el-icon-setting" @click="dialogFieldVisible=true" />
            </template>
            <template slot-scope="{row}">
              <el-button type="text" @click="linkDetail(row.memberId)">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page  mTop20" v-if="tableData.length > 0">
          <dm-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageParam.currentPage"
            :page-sizes="[20, 40, 60, 80]"
            :page-size="pageParam.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="totalCount"
          />
        </div>
      </div>
    </div>

    <!-- 表格字段弹窗 -->
    <table-colum-dailog
      :dialogVisible.sync="dialogFieldVisible"
      :checkedFields="checkedFields"
      :memberFields="memberFields"
      @submit="submitMemberFields"
    />
    <!-- 批量调整积分弹窗 -->
    <integral-dailog
      :dialogVisible.sync="dialogIntegralVisible"
      @refresh="batchRefresh"
      :integralFlag="integralFlag"
      :ajaxObj="{...ajaxObj}"
      :selectObj="{...selectObj}"
    />
    <!-- 批量修改等级弹窗 -->
    <grade-dailog
      :dialogVisible.sync="dialogGradeVisible"
      @refresh="batchRefresh"
      :gradeList="showEditClique?cliqueMemberGrade:memberGrade"
      :ajaxObj="{...ajaxObj}"
      :selectObj="{...selectObj}"
    />
    <!-- 批量修改服务门店弹窗 -->
    <mainstore-dailog
      :dialogVisible.sync="dialogMainstoreVisible"
      @refresh="batchRefresh"
      :selectObj="{...selectObj}"
      :ajaxObj="{...ajaxObj}"
    />
    <!-- 批量修改协管门店弹窗 -->
    <substore-dailog
      :dialogVisible.sync="dialogSubStoreVisible"
      @refresh="batchRefresh"
      :selectObj="{...selectObj}"
      :ajaxObj="{...ajaxObj}"
    />
  </div>
</template>
<script>
import action from './index.js';
export default { ...action };
</script>
<style lang="less" scoped>
@import './allCustomersList.less';
</style>
<style lang="less">
// 去除dailog-footer上边框
.customer-dialog .el-dialog__footer {
  padding-top: 0;
  padding-bottom: 20px;
  border-top: none !important;
}
.customer-dialog .el-dialog__body {
  padding-bottom: 0;
}
</style>
