<template>
  <div class="list-section">
    <div class="header-nav">
      <nav-path :navpath="navpath"></nav-path>
    </div>
    <div class="top-search-wrap">
      <p class="label" style="margin-right: 61px;">客户类型</p>
      <el-checkbox-group v-model="customerType" class="flex-wrap" @change="onSearch">
        <el-checkbox label="notMember">非会员</el-checkbox>
        <i class="line"></i>
        <p class="label">会员：</p>
        <el-checkbox label="wxOpenCarMember">微信会员</el-checkbox>
        <el-checkbox label="posMember">POS会员</el-checkbox>
      </el-checkbox-group>
    </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-input>
            <el-button type="text" @click="showSearch = !showSearch" class="senior-search">高级搜索<i
                :class="showSearch ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"></i>
            </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>
              <el-option :key="item.value" v-for="item in batchOpt" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
            <el-popover placement="top-start" :width="isdot ? 450 : 160" trigger="hover"
              @show="getProcessList">
              <batch-list :dataList="processList"></batch-list>
              <el-badge slot="reference" :is-dot="isdot" class="item">
                <el-button type="primary" class="member-wechat-timer" icon="el-icon-time">
                </el-button>
              </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">
          </vue-gic-people>
          <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"
          @selection-change="handleSelectionChange" @sort-change='sortChange'>
          <el-table-column type="selection" min-width="50" fixed='left'></el-table-column>
          <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:'custom'">
              <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="row.wxStatus == 0 ? '未使用小程序' : row.wxStatus == 1 ? '已使用小程序' : ''"
                    class="channelicon"
                    :class="row.wxStatus == 0 ? 'xcxicongray' : row.wxStatus == 1 ? 'xcxicon' : ''"></span>
                  <span :title="row.status == 0 ? '取消关注公众号' : row.status == 1 ? '已关注公众号' : '未关注公众号'"
                    class="channelicon"
                    :class="row.status == 0 ? 'gzhiconcanclegray' : row.Status == 1 ? 'gzhicon' : 'gzhicongray'"></span>
                </span>
                <!-- 关联渠道 -->
                <span v-else-if="colum == 'channel'">
                  <span class="channelicon"
                    :class="row.channelTaobao == 0 ? 'taobaoicongray' : row.channelTaobao == 1 ? 'taobaoicon' : ''"></span>
                  <span class="channelicon"
                    :class="row.channelJd == 0 ? 'jdicongray' : row.channelJd == 1 ? 'jdicon' : ''"></span>
                  <span class="channelicon"
                    :class="row.channelWei == 0 ? 'vipicongray' : row.channelWei == 1 ? 'vipicon' : ''"></span>
                </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>{{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"></i>
            </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">
          </dm-pagination>
        </div>
      </div>
    </div>

    <!-- 表格字段弹窗 -->
    <table-colum-dailog :dialogVisible.sync="dialogFieldVisible" :pageName="pageName"
      :checkedFields="checkedFields" :memberFields="memberFields" @submit="submitMemberFields">
    </table-colum-dailog>
    <!-- 批量调整积分弹窗 -->
    <integral-dailog :dialogVisible.sync="dialogIntegralVisible" :pageName="pageName"
      :integralFlag="integralFlag" :multipleList="multipleList" :selectAll="selectAll"
      :pageSize="pageParam.pageSize" :memberSearchStr="pageParam.memberSearchStr"
      :phoneNameCard="pageParam.phoneNameCard" @refresh="batchRefresh"></integral-dailog>
    <!-- 批量修改等级弹窗 -->
    <grade-dailog :dialogVisible.sync="dialogGradeVisible" :pageName="pageName"
      :multipleList="multipleList" :gradeList="showEditClique?cliqueMemberGrade:memberGrade"
      :selectAll="selectAll" :pageSize="pageParam.pageSize"
      :memberSearchStr="pageParam.memberSearchStr" :phoneNameCard="pageParam.phoneNameCard"
      @refresh="batchRefresh"></grade-dailog>
    <!-- 批量修改服务门店弹窗 -->
    <mainstore-dailog :dialogVisible.sync="dialogMainstoreVisible" :pageName="pageName"
      :multipleList="multipleList" :selectAll="selectAll" :pageSize="pageParam.pageSize"
      :memberSearchStr="pageParam.memberSearchStr" :phoneNameCard="pageParam.phoneNameCard"
      @refresh="batchRefresh"></mainstore-dailog>
    <!-- 批量修改协管门店弹窗 -->
    <substore-dailog :dialogVisible.sync="dialogSubStoreVisible" :pageName="pageName"
      :multipleList="multipleList" :selectAll="selectAll" :pageSize="pageParam.pageSize"
      :memberSearchStr="pageParam.memberSearchStr" :phoneNameCard="pageParam.phoneNameCard"
      @refresh="batchRefresh"></substore-dailog>
  </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-dailog .el-dialog__footer {
  padding-top: 0;
  padding-bottom: 20px;
  border-top: none !important;
}
.customer-dailog .el-dialog__body {
  padding-bottom: 0;
}
</style>