<template>
  <div class="member-return">
    <div class="member-container">
      <!-- <nav-path :navpath="navpath"></nav-path> -->
      <div class="return-container">
        <div class="handler">
          <p
            class="multiple"
            v-if="multipleList.length"
          >
            <span v-if="selectAll == false">已勾选本页 {{ multipleList.length }} 个会员，</span>
            <span v-else>已勾选 {{ page.totalCount }} 个会员，</span>
            <span
              @click="selectAllmultipleList"
              class="multiple-all pointer"
              v-if="selectAll == false"
            >勾选全部 {{ page.totalCount }} 个会员</span>
            <span
              @click="selectAllmultipleList"
              class="multiple-all pointer"
              v-else
            >取消勾选</span>
          </p>
          <div class="handler-search">
            会员共{{page.totalCount}}人
            <!-- <Navbar :memberType="1"></Navbar> -->
            <el-input
              v-model="phoneNameNick"
              maxlength="32"
              placeholder="输入手机号码"
              @keyup.native.enter="handleSearch"
              style="width: 249px;"
              clearable
            >
              <i
                slot="prefix"
                class="el-input__icon el-icon-search"
              ></i>
            </el-input>

            <div class="handler-setting">
              <el-select
                v-model="batchValue"
                placeholder="批量操作"
                @change="handleFocusBatch"
                style="width: 130px"
                @visible-change="handleVisibleBatch"
              >
              <template v-for="item in batchOpt">
                <el-option
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </template>
            </el-select>
            </div>
          </div>

          <div class="tablecontent">
            <el-table
              :data="memberData"
              v-loading="load"
              tooltip-effect="dark"
              ref="multipleTable"
              @selection-change="handleSelectionChange"
              @sort-change='sortChange'
            >
              <el-table-column
                type="selection"
                width="50"
              > </el-table-column>
              <el-table-column label="基本信息">
                <div slot-scope="{ row }" class="customer-info-cell">
                  <img :src="row.thirdImgUrl||require('../../../static/img/default.png')" alt="">
                  <p class="memberName">
                    {{ row.memberName | formatMember }}
                  </p>
                </div>
              </el-table-column>

              <!-- 等级 -->
              <el-table-column
                label="会员等级"
                prop="grade"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.gradeName ? scope.row.gradeName : '--' }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="status"
                label="状态"
              >
                <template slot-scope="{ row }">
                  <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 v-else :title="row.status==1?'已关注公众号':'未关注公众号'" :class="['iconfont status-icon ',row.status==1?'icon-weixin1 follow':'icon-weixin1']"></i>
                  <i :title="row.wxStatus==1?'已使用小程序':'未使用小程序'" :class="['iconfont status-icon icon-xiaochengxu1',row.wxStatus==1?'used':'']"></i>
                </template>
              </el-table-column>
              <el-table-column
                label="消费总额"
                prop="costFee"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.costFee !== null ? scope.row.costFee : '--' }}</div>
                </template>              
              </el-table-column>
              <el-table-column
                label="消费次数"
                prop="costTimes"
              >
                <template slot-scope="scope">
                  {{scope.row.costTimes}}
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button @click="linkDetail(scope.row.memberId)" type="text">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div
              class="page mTop20 mBottom40"
              v-if="memberData.length > 0"
            >
              <dm-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-sizes="[20, 40, 60, 80]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next"
                :total="page.totalCount"
              >
              </dm-pagination>
            </div>
          </div>
        </div>
    <!--修改服务门店-弹框-->
    <mainstore-dailog
      :dialogVisible.sync="dialogMainstoreVisible"
      @refresh="batchRefresh"
      :selectObj="{...selectObj}"
      :ajaxObj="{...ajaxObj}"
       @successImport="successImport"
    />

        <!--修改服务门店-弹框-end-->

        <!--批量修改协管门店-弹框-->
        <substore-dailog
          :dialogVisible.sync="dialogSubStoreVisible"
          @refresh="batchRefresh"
          :selectObj="{...selectObj}"
          :ajaxObj="{...ajaxObj}"
          @successImport="successImport"
        />
        <!--批量修改协管门店-弹框-end-->
      </div>
    </div>
    <!-- <div class="foot-add">
      <vue-gic-footer></vue-gic-footer>
    </div> -->
  </div>
</template>

<script>
import memberReturn from "./memberReturn";
export default { ...memberReturn };
</script>

<style lang="stylus">
.customer-info-cell {
    display: flex;
    align-items: center;
    img {
      display: block;
      width: 60px;
      height: 60px;
      margin-right: 10px;
      // border-radius: 100%;
    }
    .memberName {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .status-icon {
    font-size: 20px;
    line-height: 19px;
    vertical-align: middle;
    color: #e2e4e8;
    &.icon-weixin1 {
      &.follow {
        color: #28c445;
      }
    }
    &.unfollow {
      width: 20px;
      height: 20px;
    }
    &.icon-xiaochengxu1 {
      &.used {
        color: #11c18b;
      }
    }
    & + .status-icon {
      margin-left: 6px;
    }
  }
.return-container {
  padding: 20px;
  background-color: #fff;

  .handler-setting {
    float: right;
  }

  .tablecontent {
    margin-top: 20px;
  }

  .foot-add {
    margin-top: -100px;
  }
}

p {
  margin: 0;
}


.foot-add {
  margin-top: -100px;
}
</style>
