<template>
  <div class="displsy-mod member-main">
    <div class="header_flex">
      <div>
        <el-button
          size="mini"
          type="primary"
          @click="openEdit('添加')"
          v-role="4007002"
          >添加</el-button
        >
      </div>
      <div>
        <el-input
          size="medium"
          style="width:180px;"
          placeholder="输入姓名或手机号"
          v-model="input">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button size="mini" type="primary" @click="initQueryList">确认</el-button>
        <el-button size="mini" type="primary" @click="searchDialog = true">条件搜索</el-button>
        <el-button
          size="mini"
          type="info"
          plain
          @click="getData((refreshtext = true))">刷新</el-button>
        <el-button size="mini" type="primary" @click="download()">下载模板</el-button
        >
        <el-button size="mini" type="warning" @click="infoDialog = true">导入</el-button>
        <el-button size="mini" type="success" @click="exit()">导出</el-button>
      </div>
    </div>
    <el-tabs
      class="tab-card"
      type="card"
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane label="使用中" name="1"> </el-tab-pane>
      <el-tab-pane label="已停用" name="0"> </el-tab-pane>
      <el-tab-pane label="启用中" name="2"> </el-tab-pane>
    </el-tabs>
    <el-table
      v-if="activeName * 1 < 3"
      :data="tableData"
      stripe
      style="width: 100%"
      :header-cell-style="{
        background: 'linear-gradient(#6cb3ff, #1873d4)',
        color: '#eeeeee'
      }"
    >
      <el-table-column label="会员" align="center">
        <el-table-column
          align="center"
          label="状态"
          min-width="70"
          fixed="left"
        >
          <template slot-scope="scope">
            <el-tag
              effect="dark"
              size="medium"
              :type="
                scope.row.state == 2
                  ? 'info'
                  : '' || scope.row.state == 1
                  ? 'success'
                  : '' || scope.row.state == 0
                  ? 'danger'
                  : ''
              "
              >{{
                scope.row.state == 0
                  ? "已停用"
                  : scope.row.state == 2
                  ? "启用中"
                  : "已启用"
              }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="memberNum"
          label="会员编码"
          min-width="100"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="memberName"
          label="姓名"
          min-width="70"
          sortable
        ></el-table-column>
        <el-table-column align="center" prop="sex" label="性别" min-width="70">
          <template slot-scope="scope">{{
            scope.row.sex == 1 ? "男" : "女"
          }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="label"
          :show-overflow-tooltip="true"
          label="备注"
          min-width="90"
        >
          <template slot-scope="scope">{{
            scope.row.label == null || scope.row.label == ""
              ? "暂时没有备注"
              : scope.row.label
          }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="mobilePhone"
          label="手机"
          min-width="90"
          sortable
        >
          <template slot-scope="scope">{{
            scope.row.mobilePhone | phone
          }}</template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        align="center"
        prop="classNum"
        label="等级编码"
        min-width="80"
        :show-overflow-tooltip="true"
        sortable
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="className"
        label="等级名称"
        min-width="80"
        :show-overflow-tooltip="true"
        sortable
      ></el-table-column>
      <el-table-column
        align="center"
        prop="memberStoreName"
        label="所属门店"
        min-width="110"
        :show-overflow-tooltip="true"
        sortable
      ></el-table-column>
      <el-table-column
        align="center"
        prop="inputDate"
        label="创建时间"
        min-width="100"
        :show-overflow-tooltip="true"
        sortable
      ></el-table-column>
      <el-table-column
        align="center"
        prop="inputBy"
        label="创建人"
        min-width="70"
        :show-overflow-tooltip="true"
        sortable
      ></el-table-column>
      <el-table-column label="跟进人" align="center">
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="staffId"
          label="编码"
          min-width="70"
          sortable
        ></el-table-column>
        <el-table-column
          align="center"
          prop="staffName"
          label="名称"
          min-width="70"
          sortable
        ></el-table-column>
      </el-table-column>
      <!-- <el-table-column align="center" prop="hairLong" label="头发长度" min-width="70"></el-table-column>
      <el-table-column align="center" prop="skinType" label="皮肤类别" min-width="70"></el-table-column> -->
      <el-table-column
        align="center"
        v-if="state == 1"
        label="密码"
        width="76"
        fixed="right"
        v-role="4007003"
      >
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="获取动态会员登录密码"
            placement="left"
          >
            <el-button
              :disabled="scope.row.state == 2"
              size="mini"
              type="primary"
              @click="rest(scope.row, 0)"
              >登录</el-button
            >
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        v-if="state == 1"
        label="支付密码"
        width="76"
        fixed="right"
        v-role="4007003"
      >
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="获取动态会员支付密码"
            placement="left"
          >
            <el-button
              :disabled="scope.row.state == 2"
              size="mini"
              type="primary"
              @click="rest(scope.row, 1)"
              >支付</el-button
            >
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        v-if="state == 1"
        label="修改"
        width="76"
        fixed="right"
        v-role="4007003"
      >
        <template slot-scope="scope">
          <el-button
            v-show="scope.row.state == 1"
            :disabled="scope.row.state == 2"
            size="mini"
            type="primary"
            @click="openEdit(scope.row)"
            plain
            >修改</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        v-if="state == 1"
        label="停用"
        width="76"
        fixed="right"
        v-role="4007003"
      >
        <template slot-scope="scope">
          <el-button
            v-show="scope.row.state == 1"
            :disabled="scope.row.state == 2"
            size="mini"
            type="primary"
            @click="endState(scope.row)"
            plain
            >停用</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        v-if="state == 0"
        label="启用"
        width="76"
        fixed="right"
        v-role="4007003"
      >
        <template slot-scope="scope">
          <el-button
            style="margin-left:0px"
            v-show="scope.row.state != 1"
            :disabled="scope.row.state == 2"
            size="mini"
            type="primary"
            @click="startState(scope.row)"
            >启用</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div v-if="activeName * 1 != 3" class="block" style="margin-top:15px;">
      <!-- 分页组件 -->
      <el-pagination
        align="left"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
    </div>
    <tostore v-if="activeName * 1 == 3" ref="tostore"></tostore>
    <el-dialog
      :close-on-click-modal="false"
      v-dialogDrag
      title="启用会员"
      :visible.sync="stateDialog"
    >
      <el-form :model="form">
        <el-form-item label="会员手机号" label-width="120px">
          {{ form.mobilePhone }}
        </el-form-item>
        <el-form-item label="会员名字" label-width="120px">
          {{ form.memberName }}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" plain @click="stateDialog = false"
          >取 消</el-button
        >
        <el-button
          size="mini"
          type="primary"
          @click="confirmState((stateDialog = false))"
          >确认启用</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      v-dialogDrag
      title="改号启用"
      :visible.sync="editPhoneDialog"
    >
      <el-form
        :model="editPhoneForm"
        ref="editPhoneForm"
        style="max-height:60vh;overflow:auto;"
      >
        <el-form-item label="原手机号:" label-width="120px" prop="mobilePhone">
          <span v-if="editPhoneForm.phone == null">{{
            editPhoneForm.phone
          }}</span>
          <span v-else> {{ editPhoneForm.phone | phone }}</span>
        </el-form-item>
        <el-form-item
          label="新手机号:"
          label-width="120px"
          prop="mobilePhone"
          :rules="[
            { required: true, message: '请输入新的手机号', trigger: 'blur' }
          ]"
        >
          <el-input
            v-model="editPhoneForm.mobilePhone"
            maxlength="11"
            oninput="this.value=this.value.replace(/\D/g,'')"
            pattern="[0-9]*"
            style="width:200px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="上传附件:"
          :rules="[{ required: true, message: '请上传附件!', trigger: 'blur' }]"
          prop="file"
          label-width="120px"
        >
          <el-upload
            style="width:400px"
            action=""
            v-model="editPhoneForm.fileList"
            multiple
            :http-request="uploadFile"
            list-type="picture"
            ref="upload"
          >
            <el-button size="mini" type="danger ">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">上传图片附件</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          type="primary"
          plain
          @click="editPhoneDialog = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="editPhoneConfirm()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="搜索" :visible.sync="searchDialog">
      <el-form :model="searchForm">
        <el-form-item label="会员名字搜索:" label-width="120px">
          <div class="searchDiv">
            <el-input
              size="medium"
              v-model="searchForm.memberName"
              placeholder="输入要查询的会员名字"
              clearable
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item
          label="手机号码搜索:"
          label-width="120px"
          :rules="{
            min: 11,
            max: 11,
            message: '输入要查询的11位会员手机号',
            trigger: 'blur'
          }"
        >
          <div class="searchDiv">
            <el-input
              maxlength="11"
              size="medium"
              v-model="searchForm.mobilePhone"
              placeholder="输入要查询的11位手机号"
              oninput="this.value=this.value.replace(/\D/g,'')"
              pattern="[0-9]*"
              clearable
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="分派状态搜索:" label-width="120px">
          <div class="searchDiv">
            <el-radio-group v-model="searchForm.assignState" fill="#f78989">
              <el-radio
                :label="1"
                @click.native.prevent="clickitem(1)"
                size="medium"
                type="primary"
                >已分派</el-radio
              >
              <el-radio
                :label="0"
                @click.native.prevent="clickitem(0)"
                size="medium"
                type="primary"
                >未分派</el-radio
              >
            </el-radio-group>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          type="primary"
          plain
          @click="searchDialog = false"
        >
          取 消</el-button
        >
        <el-button
          type="primary"
          size="mini"
          @click="search((searchDialog = false))"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="导入表格"
      :visible.sync="infoDialog"
      :close-on-click-modal="false"
    >
      <excel @fileData="fileDatas" @infoDialogV="infoDialogV"></excel>
    </el-dialog>
    <edit ref="edit" @editData="getData"></edit>
    <member ref="member" @editData="getData"></member>
    <el-dialog
      title="导出需要验证码"
      :visible.sync="phoneDialog"
      :close-on-click-modal="false"
    >
      <el-form>
        <el-form-item label="接收短信 :">
          {{ phoneForm.registrantMobilePhone }}
          <el-button
            type="text"
            @click="sendPhone((loading = true))"
            :loading="loading"
            >发送验证码</el-button
          >
        </el-form-item>
        <el-form-item label="验证码 :">
          <el-input
            v-model="phoneForm.code"
            class="form-width-ms"
            placeholder="请输入验证码"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          type="primary"
          plain
          @click="phoneDialog = false"
        >
          取 消</el-button
        >
        <el-button type="primary" size="mini" @click="exits()" :loading="butLoad">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import tostore from "./tostore/index";
import member from "@/components/member/edit/index";
import {
  storeMemberpage,
  editmember,
  storeMemberupdateState,
  changePhoneToUpdateState,
  storeMemberDownload,
  storeMemberExport,
  storeMemberImport,
  storeMemberStart,
  cashPasswordReset,
  passwordReset,
  authCode,
  authCodes
} from "@/api/storeManage.js";
import { getSmsCode } from "@/api/login";
import { partten } from "../../../../partten/index";
import excel from "../../../components/excel";
import edit from "@/components/member/edit/index.vue";
export default {
  components: { excel, edit, member, tostore },
  data() {
    return {
      butLoad:false,
      infoDialog: false, //上传文件弹窗开关
      editPhoneDialog: false, //改号启用弹窗
      searchDialog: false, //搜索弹窗开关
      stateDialog: false, //启用会员弹窗
      refreshtext: false, //搜索判断字符
      activeName: "1", //标签页默认
      disabled: false, //获取验证码禁用属性
      phoneForm: {},
      editPhoneForm: {
        //改号启用表单
        phone: null
      },
      form: {}, //主对象
      searchForm: {
        //搜索表单
        assignState: null,
        state: null,
        mobilePhone: null,
        memberName: null
      },
      stateForm: {
        // 启用表单
        password: null,
        mobilePhone: null,
        phone: null,
        code: null
      },
      phoneDialog: false, //导出填写验证码弹窗开关
      input: "",
      total: "", // 总条数
      sessionStorageData: {}, //门店参数集合
      pageInfo: {
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页的数据条数,
        total: 0, //分页总条数
        tableList: []
      },
      loading: false, //提交动画
      editForm: {}, //修改会员表单
      id: null, //存放停用会员id
      phone: null, //掩码手机号
      searchTrue: false, //搜索判断
      fileData: null, //文件对象
      state: 1, //标签页状态
      headOffice: sessionStorage.getItem("headOffice") * 1 //是否总店
    };
  },
  methods: {
    initQueryList(){
      this.pageInfo.slectPhoneName = this.input
      this.getData()
    },
    //发送对应手机号短信
    sendPhone() {
      authCodes({
        registrantMobilePhone: this.phoneForm.registrantMobilePhone
      }).then(res => {
        if (res.code == "000000") {
          this.$message({ message: "发送成功!" });
          var that = this;
          setTimeout(() => {
            that.loading = flase;
          }, 30000);
        } else {
          this.loading = flase;
          this.$alert(res.message, "提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: action => {}
          });
        }
      });
    },
    //导出会员列表
    exits() {
      this.searchForm.isMessage = 1;
      this.searchForm.code = this.phoneForm.code;
      this.butLoad = true
      storeMemberExport(this.searchForm).then(res => {
        this.butLoad = false
        let blob = new Blob([res]);
        console.log(blob);
        var a = document.createElement("a");
        var url = window.URL.createObjectURL(blob);
        console.log(url);
        a.href = url;
        a.download = "会员导出表.xlsx";
        a.click();
        window.URL.revokeObjectURL(url);
      });
    },
    //获取登录/支付密码方法
    rest(row, number) {
      let text = number == 0 ? "登录" : "支付";
      this.$confirm("重置会员" + text + "密码发送到会员手机号上?", "是否继续", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        cancelButtonClass: "cancelbtnFalses",
        confirmButtonClass: "confirmbtnFalses"
      }).then(() => {
        if (number == 0) {
          passwordReset(row).then(res => {
            if (res.code == "000000") {
              this.$message.success({ message: res.message });
              this.getData();
            } else {
              this.$alert(res.message, "提示", {
                confirmButtonText: "确定",
                confirmButtonClass: "confirmbtnFalses",
                type: "warning",
                center: true,
                callback: action => {}
              });
            }
          });
        } else {
          cashPasswordReset(row).then(res => {
            if (res.code == "000000") {
              this.$message.success({ message: res.message });
              this.getData();
            } else {
              this.$alert(res.message, "提示", {
                confirmButtonText: "确定",
                confirmButtonClass: "confirmbtnFalses",
                type: "warning",
                center: true,
                callback: action => {}
              });
            }
          });
        }
      });
    },
    clickitem(e) {
      e === this.searchForm.assignState
        ? (this.searchForm.assignState = null)
        : (this.searchForm.assignState = e);
    },
    //下载模板方法
    download() {
      storeMemberDownload().then(res => {
        let blob = new Blob([res]);
        console.log(blob);
        var a = document.createElement("a");
        var url = window.URL.createObjectURL(blob);
        console.log(url);
        a.href = url;
        a.download = "会员模板.xlsx";
        a.click();
        window.URL.revokeObjectURL(url);
      });
    },
    //导出方法
    exit() {
      var that = this;
      that.searchForm.state = that.activeName * 1;
      this.$confirm("是否导出会员明文手机号码", "导出提示", {
        confirmButtonText: "导出明文",
        cancelButtonText: "导出暗文",
        type: "warning",
        cancelButtonClass: "cancelbtnFalses",
        confirmButtonClass: "confirmbtnFalses"
      })
        .then(() => {
          authCode().then(res => {
            if (res.code == "000000") {
              this.phoneForm.registrantMobilePhone =
                res.data.registrantMobilePhone;
              this.phoneDialog = true;
            } else {
              this.$alert(res.message, "提示", {
                confirmButtonText: "确定",
                confirmButtonClass: "confirmbtnFalses",
                type: "warning",
                center: true,
                callback: action => {}
              });
            }
          });
        })
        .catch(() => {
          this.searchForm.isMessage = 0;
          storeMemberExport(that.searchForm).then(res => {
            let blob = new Blob([res]);
            console.log(blob);
            var a = document.createElement("a");
            var url = window.URL.createObjectURL(blob);
            console.log(url);
            a.href = url;
            a.download = "会员导出表.xlsx";
            a.click();
            window.URL.revokeObjectURL(url);
          });
        });
    },
    //自定义上传文件方法
    fileDatas(v) {
      var fileData = new FormData();
      if (v == null) {
        this.$alert("请选择需要上传的文件", "提示", {
          confirmButtonText: "确定",
          confirmButtonClass: "confirmbtnFalses",
          type: "warning",
          center: true,
          callback: action => {}
        });
      } else {
        fileData.append("multipartFile", v);
        storeMemberImport(fileData).then(res => {
          if (res.code == "000000") {
            this.$message.success({ message: res.message });
            this.getData();
          } else {
            this.$alert(res.message, "提示", {
              confirmButtonText: "确定",
              confirmButtonClass: "confirmbtnFalses",
              type: "warning",
              center: true,
              callback: action => {}
            });
          }
        });
      }
    },
    //返回上传文件弹窗状态
    infoDialogV(v) {
      this.infoDialog = v;
    },
    //切换标签页
    handleClick(tab, event) {
      console.log(tab.name * 1);
      if (tab.name * 1 == 3) {
        var that = this;
        setTimeout(() => {
          that.$refs.tostore.show();
        }, 500);
      } else {
        this.state = tab.name * 1;
        if (this.searchTrue == true) {
          this.search();
        } else {
          this.getData();
        }
      }
    },
    //搜索方法
    search() {
      //条件搜索
      this.searchForm.pageSize = this.pageInfo.pageSize;
      this.searchForm.pageNum = this.pageInfo.pageNum;
      this.searchForm.state = this.state;
      this.searchForm.storeId = sessionStorage.getItem("parentId");
      storeMemberpage(this.searchForm).then(res => {
        if (res.code == "000000") {
          this.searchTrue = true;
          res.pageInfo.tableList = res.pageInfo.list;
          this.pageInfo = res.pageInfo;
          if (res.pageInfo.total == 0) {
            this.$message.warning({ message: "没有找到符合条件的会员" });
          } else {
            this.$message.success({ message: "已显示符合条件的全部数据" });
          }
        } else {
          this.$alert(res.message, "提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: action => {}
          });
        }
      });
    },
    //编辑
    edit(scope, row, index, obj) {
      //console.log(row);
      this.editForm = { ...row };
    },
    //编辑确定
    //确定返回方法
    confirm() {
      //console.log(this.editForm);
      editmember(this.editForm).then(res => {
        //console.log(res);
        if (res.code == "000000") {
          this.$message.success({ message: "修改成功!" });
          this.getData();
        } else {
          this.$alert(res.message, "提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: action => {}
          });
        }
      });
    },

    //分页方法
    handleSizeChange(val) {
      //   //console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val;
      if (this.searchTrue == true) {
        this.search();
      } else {
        this.getData();
      }
    },
    handleCurrentChange(val) {
      //   //console.log(`当前页: ${val}`);
      this.pageInfo.pageNum = val;
      if (this.searchTrue == true) {
        this.search();
      } else {
        this.getData();
      }
    },
    //平台会员列表接口
    //获取数据
    async getData() {
      var page = {
        pageSize: this.pageInfo.pageSize,
        pageNum: this.pageInfo.pageNum,
        state: this.state,
        storeId: sessionStorage.getItem("parentId"),
        slectPhoneName:this.pageInfo.slectPhoneName,
        type:0
      };
      storeMemberpage(page).then(res => {
        if (res.code == "000000") {
          if (this.refreshtext == true) {
            this.searchTrue = false;
            this.$message.success({ message: "已刷新最新数据" });
            this.refreshtext = false;
          }
          var headOffice = sessionStorage.getItem("headOffice");
          var storeName = sessionStorage.getItem("storeName");
          var storeId = sessionStorage.getItem("storeId");
          if (headOffice == 0) {
            res.pageInfo.list.forEach((item, index) => {
              if (item.storeName != storeName) {
                res.pageInfo.list = res.pageInfo.list.filter(item=>item.storeName == storeName)
              }
            });
          }
          res.pageInfo.tableList = res.pageInfo.list;
          this.pageInfo = res.pageInfo;
        } else {
          this.$alert(res.message, "提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: action => {}
          });
        }
      });
    },
    //修改会员弹窗
    openEdit(row) {
      this.$refs.member.show(row);
    },
    // 停用
    endState(row) {
      this.id = row.id;
      this.$confirm("此操作停用该会员,启用需要会员密码, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        cancelButtonClass: "cancelbtnFalses",
        confirmButtonClass: "confirmbtnFalses"
      })
        .then(() => {
          storeMemberupdateState({ id: row.id, state: 0 }).then(res => {
            //console.log(res);
            if (res.code == "000000") {
              this.$message.success({ message: res.message });
              this.getData();
              row.state = 0;
            } else {
              this.getData();
              this.$alert(res.message, "提示", {
                confirmButtonText: "确定",
                confirmButtonClass: "confirmbtnFalses",
                type: "warning",
                center: true,
                callback: action => {}
              });
            }
          });
        })
        .catch(() => {
          row.state = 1;
          this.$message.info({ message: "已取消操作！" });
        });
    },
    //打开启用弹窗
    startState(row) {
      this.stateDialog = true;
      this.form = { ...row };
      this.stateForm = row;
      this.stateForm.phone = row.mobilePhone;
      // this.$router.replace({ path: "/activationMember", query: row });
    },
    //手机验证发送验证码
    sendcode() {
      this.$nextTick(() => {
        this.$refs.codeInput.focus();
      });
      const reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
      if (this.stateForm.mobilePhone == "") {
        this.$message({
          message: "手机号码不能为空",
          center: true
        });
        return;
      }
      if (!reg.test(this.stateForm.mobilePhone)) {
        this.$message({
          message: "手机格式不正确 ！",
          center: true
        });
        return;
      } else {
        getSmsCode({ mobilePhone: this.stateForm.mobilePhone }).then(res => {
          if (res.code == "000000") {
            this.$message.success({ message: "发送成功" });
            this.time = 60;
            this.disabled = true;
            this.timer();
          } else {
            this.$alert(res.message, "提示", {
              confirmButtonText: "确定",
              confirmButtonClass: "confirmbtnFalses",
              type: "warning",
              center: true,
              callback: action => {}
            });
          }
        });
      }
    },
    //60S倒计时
    timer() {
      if (this.time > 0) {
        this.time--;
        this.btntxt = this.time + "s后重新获取";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btntxt = "获取验证码";
        this.disabled = false;
      }
    },
    //自定义文件上传拦截方法
    uploadFile(file) {
      //console.log(file);
      this.fileData.append("fileList", file.file);
    },
    //改号启用
    editPhoneConfirm() {
      this.fileData = new FormData();
      this.$refs.upload.submit();
      this.fileData.append("id", this.editPhoneForm.id);
      this.fileData.append("memberName", this.editPhoneForm.memberName);
      this.fileData.append("mobilePhone", this.editPhoneForm.mobilePhone);
      if (partten.phoneNum.test(this.editPhoneForm.mobilePhone * 1)) {
        changePhoneToUpdateState(this.fileData).then(res => {
          if (res.code == "000000") {
            this.$message.success({ message: res.message });
            this.editPhoneForm = {};
            this.$refs.upload.clearFiles();
            this.editPhoneDialog = false;
            this.getData();
          } else {
            this.$alert(res.message, "提示", {
              confirmButtonText: "确定",
              confirmButtonClass: "confirmbtnFalses",
              type: "warning",
              center: true,
              callback: action => {}
            });
          }
        });
      } else {
        this.$alert(res.message, "提示", {
          confirmButtonText: "确定",
          confirmButtonClass: "confirmbtnFalses",
          type: "warning",
          center: true,
          callback: action => {}
        });
      }
    },
    //确认启用方法
    confirmState() {
      this.sessionStorageData.memberUsing;
      let state = 0;
      if (this.sessionStorageData.memberUsing == 0) {
        state = 1;
      } else {
        state = 2;
      }
      if (this.stateForm.code != null) {
        var ids = {
          id: this.stateForm.id,
          state: state,
          passCode: this.stateForm.code,
          mobilePhone: this.stateForm.mobilePhone
        };
      } else if (this.stateForm.password != null) {
        var ids = {
          id: this.stateForm.id,
          state: state,
          password: this.stateForm.password,
          mobilePhone: this.stateForm.mobilePhone
        };
      } else {
        this.$message.info({ message: "请输入会员密码或手机验证码！" });
      }
      //console.log(ids);
      // storeMemberupdateState(ids).then((res) => {
      storeMemberStart(ids).then(res => {
        if (res.code == "000000") {
          this.$message.success({ message: res.message });
          this.getData();
        } else {
          if (res.code == "200002") {
            this.$confirm(res.message + " 只能改号启用", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              cancelButtonClass: "cancelbtnFalses",
              confirmButtonClass: "confirmbtnFalses",
              type: "warning"
            })
              .then(() => {
                this.editPhoneDialog = true;
                this.editPhoneForm = this.stateForm;
                this.stateForm.mobilePhone = null;
              })
              .catch(() => {});
          } else {
            this.$alert("请输入正确的11位手机号", "提示", {
              confirmButtonText: "确定",
              confirmButtonClass: "confirmbtnFalses",
              type: "warning",
              center: true,
              callback: action => {}
            });
          }

          for (let i in this.pageInfo.tableList) {
            if (this.id == this.pageInfo.tableList[i].id) {
              this.pageInfo.tableList[i].state = 0;
            }
          }
        }
      });
    }
  },

  created() {
    this.sessionStorageData = JSON.parse(
      sessionStorage.getItem("sessionStorageData")
    );
    let list = JSON.parse(sessionStorage.getItem("list"));

    list.forEach(item => {
      if (item.id == 4007001) {
        this.getData();
      }
    });
  },
  computed: {
    //表名列表中搜索
    tableData() {
      // var search = this.input.toString().toLowerCase(); //将用户输入的值变字符串并小写
      var search = ''; //将用户输入的值变字符串并小写
      if (search) {
        // 输入姓名或者手机号
        return this.pageInfo.tableList.filter((item,index)=>{
          item.mobilePhone += ''
          if(item.mobilePhone.includes(search)||item.memberName.includes(search)){
            return item
          }
        })
      }
      console.log( this.pageInfo )
      return this.pageInfo.tableList;
    }
  }
};
</script>
<style scoped>
.el-button {
  margin-bottom: 10px;
}
.el-input {
  width: 200px;
}
.displsy-mod {
  padding-bottom: 50px;
}

.from {
  width: 350px;
  margin: 0 auto;
}

.staff {
  position: relative;
  top: 370px;
}
.member-main {
  position: relative;
}
.tab-card {
  position: absolute;
  top: -2px;
  left: 80px;
}
</style>
