<template>
  <div class="container frozen-white-list">
    <div class="top-header">
      <h2>白名单会员 {{ total }}人</h2>
    </div>
    <el-row
      type="flex"
      align="middle"
      justify="space-between"
      class="search-box"
    >
      <el-row type="flex" align="middle">
        <el-input
          v-model="searchData.cardNo"
          placeholder="输入会员卡号"
          style="width: 260px"
          @change="loadData"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <div class="tips-box">
          <i class="el-icon-info"></i>
          <span>处于白名单列表中的会员不会被冻结（外部接口冻结除外）</span>
        </div>
      </el-row>

      <el-button plain @click="batchUpload"
        :limit-code="getCode('memberFrozenWhiteListImport')"
        v-if="getCodeAuth('memberFrozenWhiteListImport')"
        ><i class="icon iconfont icon-shangchuan"></i> 批量导入</el-button
      >
    </el-row>

    <el-table
      :data="list"
      tooltip-effect="dark"
      ref="multipleTable"
      class="member-table"
      v-loading="load"
    >
      <el-table-column label="会员信息" :min-width="210" fixed="left" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <!-- 基本信息 -->
          <el-row
            type="flex"
            align="middle"
            class="basic-info-table"
            @click.native="linkDetail(row.memberId)"
          >
            <img :src="row.thirdImgUrl || defaultImg" class="basic-img" />
            <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">
                {{ row.phoneNumber }}
              </div>
            </div>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="会员等级" prop="gradeName" :min-width="140"></el-table-column>
      <el-table-column label="会员生日" prop="birthdayMD" :min-width="140">
        <template slot-scope="{ row }">
          {{ row.birthdayMD | formatBirth }}
        </template>
      </el-table-column>
      <el-table-column label="会员卡号" prop="cardNo" :min-width="140"></el-table-column>
      <el-table-column label="最近消费时间" :min-width="140">
        <template slot-scope="{ row }">
          <div>
            <div>{{ row.lastCostTime | formatLongTimeDate("ymd") }}</div>
            <div>{{ row.lastCostTime | formatLongTimeDate("hms") }}</div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="移入原因"
        prop="remark"
        label-class-name="reason-label"
        :min-width="140"
      ></el-table-column>
      
      <el-table-column label="移入时间" :min-width="140">
        <template slot-scope="{ row }">
          <div>
            <div>{{ row.createTime | formatDate("ymd") }}</div>
            <div>{{ row.createTime | formatDate("hms") }}</div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" width="220">
        <template slot-scope="{ row }">
          <!-- 
                :limit-code="getCode('memberIntoCustomDetail')"
                v-if="getCodeAuth('memberIntoCustomDetail')"
               -->
          <el-button type="text" @click="linkDetail(row.memberId)"
            >查看</el-button
          >
          <dm-delete
            tips="确认移出白名单吗？"
            @confirm="clickRemoveItem(row)"
            placement="top-start"
            v-if="getCodeAuth('memberFrozenWhiteListRemove')"
          >
            <el-button type="text"
              :limit-code="getCode('memberFrozenWhiteListRemove')">仅移出</el-button>
          </dm-delete>

          <el-button
            type="text"
            @click="clickRemoveAndFreeze(row)"
            v-if="row.frozenStatus != 1 && getCodeAuth('memberFrozenWhiteListRemoveAndFrozen')"
            :limit-code="getCode('memberFrozenWhiteListRemoveAndFrozen')"
            >移出并冻结</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="pager" v-if="total > 0">
      <dm-pagination
        background
        :page-size="searchData.pageSize"
        :currentPage="searchData.currentPage"
        :page-sizes="[20, 50, 75, 100]"
        layout="total,sizes,prev, pager, next"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :total="total"
      >
      </dm-pagination>
    </div>
    <import-dialog
      :importList="whiteImportList"
      :dialogVisible.sync="dialogImportVisible"
      @successImport="(taskId) => handleToTaskCenter(taskId)"
    />
    <freeze-dialog
      v-bind.sync="freezeDialogOptions"
      v-if="freezeDialogOptions.visible"
    />
  </div>
</template>

<script src="./white-list.js"></script>
<!-- <script>
import action from './abnormal-member.js';
export default { ...action };
</script> -->
<style lang="less">
</style>
<style lang="less" src="./white-list.less"></style>

