<template>
    <div>
      <el-form inline :modal="form" label-width="100px">
        <el-form-item label="会员编码">
          <div class="form-width-ms">
            <el-input v-model="form.memberNum" readonly></el-input>
          </div>
        </el-form-item>
        <el-form-item label="手机号码:">
          <div class="form-width-ms">
            <el-input style="padding-left:0px;" ref="" oninput="this.value=this.value.replace(/\D/g,'')" pattern="[0-9]*" maxlength="11" v-model="form.mobilePhone" @blur="query" @change="query">
              <el-button size="mini" slot="append" icon="el-icon-search" @click="openMember"></el-button>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="会员名称:">
          <div class="form-width-ms">
            <span>{{ form.memberName }} <i v-if="form.sex==1" class="el-icon-male text-blue"></i>
              <i v-else class="el-icon-female text-pink"></i></span>
          </div>
        </el-form-item>
        <el-form-item label="月份:" v-if="activeName=='交易记录'">
          <div class="form-width-ms block">
            <span class="demonstration"></span>
            <el-date-picker v-model="form.month" type="month" @change="change" placeholder="选择月份">
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>
      <el-tabs disabled type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="疗程延期" name="疗程延期">
          <pros ref="pros"></pros>
        </el-tab-pane>
      </el-tabs>
      <member ref="member" @memberData="memberData"></member>
    </div>
  </template>
  
  <script>
  import { partten } from "../../../../partten/index";
  import member from "@/components/member/index";
  import pros from "./components/pros.vue";
  import { storeMemberOne } from "@/api/eashier";
  export default {
    components: {
      pros,
      member,
    },
    data() {
      return {
        form: {
          month: new Date(),
        },
        activeName: "疗程延期", //标签页默认标签
      };
    },
    created(){
      this.$refs.pros.show(this.form);
      this.activeName =" 疗程延期";
    },

    methods: {
      //时间改变方法
      change() {
        this.$refs.cash.show(this.form);
      },
      //标签页改变
      //切换标签页
      handleClick(tab, event) {
        if (this.form.memberName) {
          if (tab.name == "疗程延期") {
            this.$refs.pros.show(this.form);
          }
          this.activeName = tab.name;
        } else {
          this.$message.error({ message: "请先选择会员!" });
        }
      },
      //打开选择会员弹窗
      openMember() {
        this.$refs.member.show(this.vip);
      },
      //选中会员返回方法
      memberData(v) {
        this.form.mobilePhone = v.mobilePhone;
        this.query();
      },
      //输入手机号是查询
      //查询方法
      query() {
        var number = partten.phoneNum;
        if (!number.test(this.form.mobilePhone)) {
          this.$message.info({
            message: "请输入正确的手机号 ! ",
          });
        } else {
          storeMemberOne({
            mobilePhone: this.form.mobilePhone,
            storeId: sessionStorage.getItem("parentId"),
          }).then((res) => {
            if (res.data != undefined && res.data.state == 0) {
              this.$message.error({
                message: "账户已锁定, 不允许使用 ! ",
              });
              this.$alert("账户已锁定, 不允许使用 !", "提示", {
                confirmButtonText: "确定",
                confirmButtonClass: "confirmbtnFalses",
                type: "warning",
                center: true,
                callback: (action) => {},
              });
            } else {
              if (res.code == "000000" || res.code == "200004") {
                if (res.code == "000000") {
                  this.form = res.data;
                  if (this.activeName == "充值") {
                    this.$refs.rec.show(this.form);
                  }
                  if (this.activeName == "疗程") {
                    this.$refs.pro.show(this.form);
                  }
                  if (this.activeName == "交易记录") {
                    this.$refs.cashAchi.show(this.form);
                  }
                } else {
                  if (res.code == "200004") {
                    this.$confirm(res.message + ",请先注册!", "提示", {
                      confirmButtonText: "确定",
                      cancelButtonText: "取消",
                      cancelButtonClass: "cancelbtnFalses",
                      confirmButtonClass: "confirmbtnFalses",
                      type: "warning",
                    }).then(() => {});
                  } 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) => {},
                });
              }
            }
          });
        }
      },
    },
    created() {},
  };
  </script>
  
  <style>
  </style>
  