<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>
        <el-form inline>
          <el-form-item>
            <el-input
              style="width:260px;"
              v-model="pageParam.phoneNameCard"
              prefix-icon="el-icon-search"
              placeholder="输入姓名/昵称/手机号/会员卡号"
              @change="onSearch"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <vue-gic-select-tree :options="selectTreeOptions" @change="onSelectTreeChange" style="display: inline-block;margin:0 10px; height: 32px" />
          </el-form-item>
          <el-form-item style="margin-right:10px;">
            <vue-gic-select-tree :options="selectChannelList" @change="onSelectChannelChange" style="display: inline-block;height: 32px;" />
          </el-form-item>
          <el-form-item>
            <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>
          </el-form-item>
          <el-form-item style="float:right;
          margin-bottom: 20px;">
            <el-select
              v-model="batchValue"
              placeholder="批量操作"
              @change="handleFocusBatch"
              style="width: 150px;margin-right:7px;"
              @visible-change="handleVisibleBatch"
            >
              <template v-for="item in batchOpt">
                <el-option
                  v-if="getCodeAuth(item.code)"
                  :key="item.value"
                  :label="item.label"
                  :limit-code="getCode(item.code)"
                  :value="item.value"
                />
              </template>
            </el-select>
            <el-button v-if="getCodeAuth('memberBatchImport')" :limit-code="getCode('memberBatchImport')" type="primary" @click="batchImport" style="margin-right:5px">批量导入</el-button>
          </el-form-item>
        </el-form>
        <!-- <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
            />
            <vue-gic-select-tree :options="selectTreeOptions" @change="onSelectTreeChange" style="display: inline-block;margin:0 10px; height: 32px" />
            <vue-gic-select-tree :options="selectChannelList" @change="onSelectChannelChange" style="display: inline-block;height: 32px" /> -->
             <!-- <el-select v-model="selectChannelValue" multiple placeholder="请选择">
              <el-option
                v-for="item in selectChannelList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </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:7px;"
              @visible-change="handleVisibleBatch"
            >
              <template v-for="item in batchOpt">
                <el-option
                  v-if="getCodeAuth(item.code)"
                  :key="item.value"
                  :label="item.label"
                  :limit-code="getCode(item.code)"
                  :value="item.value"
                />
              </template>
            </el-select>
            <el-button v-if="getCodeAuth('memberBatchImport')" :limit-code="getCode('memberBatchImport')" type="primary" @click="batchImport">批量导入修改</el-button>
          </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
          :max-height="maxHeight"
          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 : (colum == 'status' || colum == 'lastCostPaid') ? 170 : (colum == 'lastCostTime' || colum == 'allChannelLastCostTime' || colum == 'costFeePaid' || colum == 'lastCost' || colum == 'allChannelDiscountRate') ? 180 :  colum == 'allChannelCostTimes' ? 160 : (colum == 'costAll' || colum == 'allChannelCostAllPaid' || colum == 'allChannelHighCostPaid' || colum == 'highCost' || colum == 'highCostPaid') ? 190 : 150"
              :fixed="colum==='name'"
              :sortable="['name','grade','status','channel','createCardStoreName','cardNo','forzenStatus','mainStoreName'].includes(colum)?false:isExist[colum]?'custom':false"
            >
              <template slot-scope="{row}">
                <!-- 基本信息 -->
                <el-row
                  v-if="colum == 'name'"
                  type="flex"
                  align="middle"
                  class="basic-info-table"
                  @click.native="linkDetail(row.memberId)"
                >
                  <img v-if="row.thirdImgUrl" :src="row.thirdImgUrl" class="basic-img" />
                  
                  <svg v-else aria-hidden="true" class="basic-img">
                    <use xlink:href="#icon-user-default"></use>
                  </svg>

                  <div>
                    <div class="member-name">
                      <span v-if="row.memberName">{{
                        row.memberName
                      }}</span>
                      <span class="nick-name" v-if="row.nickName"
                        >({{ row.nickName }})</span
                      >
                    </div>
                    <div v-if="row.phoneNumber" class="phone-number">
                      {{ row.phoneNumber }}
                    </div>
                  </div>
                </el-row>
                <!-- 等级 -->
                <span v-else-if="colum == 'grade'">{{ row.gradeName }}</span>
                <!-- 状态 -->
                <span v-else-if="colum == 'status'">
                  <template v-if="!Array.isArray(row.memberSources) || row.memberSources.filter(el =>  el.highlight == 1 || el.highlight == 2).length == 0">--</template>
                  <template v-else>
                    <!-- 1100：公众号 1600：小程序 1700：企业微信 1303：微盟 1302：天猫会员通 -->
                    <span class="channel-box" v-for="channel in row.memberSources.filter(el => el.highlight == 1 || el.highlight == 2)" :key="channel.parentSourceCode">
                      <template v-if="channel.highlight == 1">
                        <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=""> -->
                      </template>
                       <!-- <template v-if="channel.activeFlag == 1">
                        <img class="channel-icon" v-if="channel.parentSourceCode == 1304" src="../../../static/img/channel-icon/douyin-1.png" alt="">
                       </template>
                       <template v-if="channel.activeFlag != 1">
                        <img class="channel-icon" v-if="channel.parentSourceCode == 1304" src="../../../static/img/channel-icon/douyin-2.png" alt="">
                       </template> -->
                      <template v-if="channel.highlight == 2">
                        <img class="channel-icon" v-if="channel.parentSourceCode == 1100" src="../../../static/img/channel-icon/weixin-2.png" alt="">
                        <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 == 1700" src="../../../static/img/channel-icon/qiyeweixin-2.png" alt="">
                        <img class="channel-icon" v-if="channel.parentSourceCode == 1303" src="../../../static/img/channel-icon/weimen-2.png" alt="">
                        <img class="channel-icon" v-if="channel.parentSourceCode == 1302" src="../../../static/img/channel-icon/tianmao-2.png" alt="">
                        <!-- <img class="channel-icon" v-if="channel.parentSourceCode == 1304" src="../../../static/img/channel-icon/douyin-2.png" alt=""> -->
                      </template>
                      <template v-if="channel.parentSourceCode == 1304">
                        <template v-if="channel.activeFlag!=1">
                          <img class="channel-icon" v-if="channel.parentSourceCode == 1304" src="../../../static/img/channel-icon/douyin-0.png" alt="">
                        </template>
                        <template v-if="channel.activeFlag==1">
                          <template v-if="channel.highlight == 1">
                            <img class="channel-icon" v-if="channel.parentSourceCode == 1304" src="../../../static/img/channel-icon/douyin-1.png" alt="">
                          </template>
                          <template v-if="channel.highlight == 2">
                            <img class="channel-icon" v-if="channel.parentSourceCode == 1304" src="../../../static/img/channel-icon/douyin-2.png" alt="">
                          </template>
                        </template>
                      </template>
                    </span>
                  </template>
                </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 == 'allChannelLastCostTime'">
                  <div>{{ row.allChannelLastCostTime.split(' ')[0] }}</div>
                  <div>{{ row.allChannelLastCostTime.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 v-if="getCodeAuth('memberIntoCustomDetail')" type="text" @click="linkDetail(row.memberId)" :limit-code="getCode('memberIntoCustomDetail')">
                查看
              </el-button>
              <span v-else>--</span>
            </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}"
       @successImport="successImport"
    />
    <!-- 批量修改等级弹窗 -->
    <grade-dailog
      :dialogVisible.sync="dialogGradeVisible"
      @refresh="batchRefresh"
      :gradeList="memberGrade"
      :cliqueGradeList="cliqueMemberGrade"
      :ajaxObj="{...ajaxObj}"
      :selectObj="{...selectObj}"
       @successImport="successImport"
    />
    <!-- 批量修改服务门店弹窗 -->
    <mainstore-dailog
      :dialogVisible.sync="dialogMainstoreVisible"
      @refresh="batchRefresh"
      :selectObj="{...selectObj}"
      :ajaxObj="{...ajaxObj}"
       @successImport="successImport"
    />
    <!-- 批量修改协管门店弹窗 -->
    <substore-dailog
      :dialogVisible.sync="dialogSubStoreVisible"
      @refresh="batchRefresh"
      :selectObj="{...selectObj}"
      :ajaxObj="{...ajaxObj}"
       @successImport="successImport"
    />
    <!-- 批量导入 -->
    <import-dialog :dialogVisible.sync="dialogImportVisible"
    :pageType="1"
    :importList="importList" @successImport="taskId => successImport(taskId, true)"/>
  </div>
</template>
<script>
import action from './index.js';
export default { ...action };
</script>
<style lang="less" scoped>
@import './allCustomersList.less';
.el-form--inline .el-form-item {
  margin-right: -5px;
  margin-bottom: 16px;
}
</style>
<style lang="less">
.channel-box {
  display: inline-block;
  +.channel-box {
    margin-left: 6px;
  }
  .channel-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }
}
// 去除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;
}
.pointer {
  cursor: pointer;
}
.customer-tree .el-tree-node__content {
  height: 32px;
  line-height: 32px;
  &:hover {
    background: #F7F8FA;
  }
}
.all-coustomer-select .el-select__tags {
  height: 29px;
}
</style>
