<template>
  <el-contaniner class="container">
    <el-main class="table-box">
      <el-row
        type="flex"
        align="middle"
        justify="space-between"
        class="search-box"
      >
        <el-input
          v-model="searchData.phoneNameCard"
          placeholder="输入姓名/昵称/手机号/会员卡号"
          style="width: 260px"
          @change="loadData"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button plain @click="batchUpload"
          ><i class="iconfont icon-shangchuan"></i> 批量导入</el-button
        >
      </el-row>

      <el-table
        :data="list"
        tooltip-effect="dark"
        ref="multipleTable"
        class="member-table"
        @selection-change="handleSelectionChange"
        v-loading="load"
        max-height="700"
      >
        <el-table-column
          type="selection"
          min-width="30"
          fixed="left"
        ></el-table-column>
        <el-table-column label="会员信息" :min-width="200">
          <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="cardNum" :min-width="160"></el-table-column>
        <el-table-column label="开卡时间" :min-width="160">
          <template slot-scope="{ row }">
            {{ row.crateCardDateString | formateTime }}
          </template>
        </el-table-column>
      </el-table>
      <div class="pager" v-if="total > 0">
        <dm-pagination
          :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
        :dialogVisible.sync="dialogImportVisible"
        @successImport="(taskId) => handleToTaskCenter(taskId)"
      />
    </el-main>
    <el-contaniner>
      <el-aside width="420px" class="page-right">
        <div class="selected-result-box">
          <el-row
            class="selected-top"
            type="flex"
            align="middle"
            justify="space-between"
          >
            <div class="selected-count">
              已选：{{ multipleList.length }} 位会员
            </div>
            <el-button type="text" @click="clearSelectedAll">全部清除</el-button>
          </el-row>
          <div class="selected-list">
            <div class="selected-item" v-for="item in multipleList" :key="item">
              <img :src="item.thirdImgUrl || defaultImg" class="user-header" />
              <div class="user-name">
                <span v-if="item.memberName">{{ item.memberName }}</span>
                <span class="nick-name" v-if="item.nickName"
                  >({{ item.nickName }})</span
                >
              </div>
              <div
                class="el-icon-close icon-close"
                @click="delSelectedItem(item)"
              ></div>
            </div>
          </div>
        </div>

        <el-form
          :model="formData"
          label-position="top"
          label-width="80px"
          ref="selectedForm"
        >
          <el-form-item
            label="冻结原因"
            prop="frozenType"
            required
            :rules="{
              required: true,
              message: '请选择冻结原因',
            }"
          >
            <el-select
              v-model="formData.frozenType"
              placeholder="请选择冻结原因"
              style="width: 380px"
            >
              <el-option label="异常冻结" :value="1"></el-option>
              <el-option label="会员主动冻结" :value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="原因备注"
            prop="remark"
            required
            :rules="{
              required: true,
              message: '请输入原因备注',
            }"
          >
            <el-input
              v-model="formData.remark"
              :maxlength="20"
              show-word-limit
              placeholder="请输入原因备注"
            ></el-input>
          </el-form-item>
        </el-form>

        
      </el-aside>
      <div class="selected-bottom-box">
        <el-button plain @click="$router.go(-1)">取消</el-button>
        <el-button
          type="primary"
          @click="submitForm('selectedForm')"
          :disabled="
            !(
              multipleList &&
              multipleList.length &&
              formData.frozenType &&
              formData.remark
            )
          "
          >冻结选中会员</el-button
        >
      </div>
    </el-contaniner>
  </el-contaniner>
</template>

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

