<template>
  <el-dialog :close-on-click-modal="false" v-dialogDrag rechargeTypeId="form" width="75vw" :title="title" :visible.sync="dialogFormVisible" :before-close="handleClose">
    <el-form :model="form" inline :rules="rules" ref="form" label-width="90px">
      <el-form-item label="转出手机号：" prop="rollOutMobilePhone">
        <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.rollOutMobilePhone" @blur="query(memberNumber=0)" @change="query(memberNumber=0)">
            <el-button size="mini" slot="append" icon="el-icon-search" @click="openMember(memberNumber=0)"></el-button>
          </el-input>
        </div>
      </el-form-item>
      <el-form-item label="转出会员：" prop="rollOutMemberName">
        <div class="form-width-ms">
          {{form.rollOutMemberName}}
        </div>
      </el-form-item>
      <el-form-item label="转入手机号：" prop="rollInMobilePhone">
        <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.rollInMobilePhone" @blur="query(memberNumber=1)" @change="query(memberNumber=1)">
            <el-button size="mini" slot="append" icon="el-icon-search" @click="openMember(memberNumber=1)"></el-button>
          </el-input>
        </div>
      </el-form-item>
      <el-form-item label="转入会员：" prop="rollInMemberName">
        <div class="form-width-ms">
          {{form.rollInMemberName}}
        </div>
      </el-form-item>
    </el-form>
    <el-tabs disabled type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="充值" name="充值">
        <rec ref="rec" @recData="recData"></rec>
      </el-tab-pane>
      <el-tab-pane label="疗程" name="疗程">
        <pro ref="pro" @proData="proData"></pro>
      </el-tab-pane>
    </el-tabs>
    <member ref="member" @memberData="memberData"></member>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" plain @click="handleClose">取 消</el-button>
      <el-button size="mini" type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { partten } from "../../../../../partten/index.js";
import {
  storeMemberOne,
  couAccountList,
  recAccountCashList,
} from "@/api/eashier.js";
import member from "@/components/member/index";
import rec from "./rec.vue";
import pro from "./pro.vue";
export default {
  components: {
    rec,
    member,
    pro,
  },
  data() {
    return {
      rules: {
        rollOutMobilePhone: {
          required: true,
          message: "请输入转出会员",
          trigger: ["blur", "change"],
        },
        rollInMobilePhone: {
          required: true,
          message: "请输入转入会员",
          trigger: ["blur", "change"],
        },

        rechargeOrProjectNum: {
          required: true,
          message: "请选择帐户",
          trigger: ["blur", "change"],
        },
        cardRestMoney: {
          required: true,
          message: "请输入转出金额",
          trigger: ["blur", "change"],
        },
        giftConsumeMoney: {
          required: true,
          message: "请输入赠送金额",
          trigger: ["blur", "change"],
        },
        courseRestCount: {
          required: true,
          message: "请输入转出次数",
          trigger: ["blur", "change"],
        },
      },
      form: {},
      title: "", //弹窗标题
      dialogFormVisible: false, //弹窗开关
      memberNumber: 0, //0 转出会员 1 转入会员
      memberForm: {}, //会员对象
      activeName: "",
      proList: [],
      recList: [],
    };
  },
  methods: {
    recData(v) {
      console.log(v);
      this.recList.forEach((item) => {
        v.forEach((items) => {
          if (item.id == items.id) {
            item = items;
          }
        });
      });
    },
    proData(v) {
      this.proList.forEach((item) => {
        v.forEach((items) => {
          if (item.id == items.id) {
            item = items;
          }
        });
      });
    },
    //切换标签页
    handleClick(tab, event) {
      if (this.memberForm.memberName) {
        if (tab.name == "充值") {
          this.$refs.rec.show(this.recList);
        }
        if (tab.name == "疗程") {
          this.$refs.pro.show(this.proList);
        }
        this.activeName = tab.name;
      } else {
        this.$message.error({ message: "请先选择会员!" });
      }
    },
    //关闭弹窗前的回调方法
    handleClose() {
      this.form = {};
      this.dialogFormVisible = false;
      this.$refs.form.clearValidate();
    },
    //打开选择会员弹窗
    openMember() {
      this.$refs.member.show(this.vip);
    },
    //选中会员返回方法
    memberData(v) {
      var form = { ...this.form };
      if (this.memberNumber == 0) {
        form.rollOutMobilePhone = v.mobilePhone;
      } else {
        if (form.rollOutMobilePhone == v.mobilePhone) {
          this.$alert("请选择另一位会员", "提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        } else {
          form.rollInMobilePhone = v.mobilePhone;
        }
      }
      this.form = JSON.parse(JSON.stringify(form));
      this.query();
    },
    //查询方法
    query() {
      var number = partten.phoneNum;
      var form = { ...this.form };
      if (this.memberNumber == 0) {
        this.form.mobilePhone = this.form.rollOutMobilePhone;
      } else {
        this.form.mobilePhone = this.form.rollInMobilePhone;
      }
      if (!number.test(this.form.mobilePhone)) {
        this.$message.info({
          message: "请输入正确的手机号 ! ",
        });
      } else {
        storeMemberOne({
          mobilePhone: this.form.mobilePhone,
          storeId: sessionStorage.getItem("parentId"),
        }).then((res) => {
          if (res.code == "000000") {
            if (this.memberNumber == 0) {
              form.rollOutMemberId = res.data.id;
              form.rollOutMemberNum = res.data.memberNum;
              form.rollOutMemberName = res.data.memberName;
              this.memberForm = res.data;
              this.memberForm.memberId = res.data.id;
              this.getData();
            } else {
              form.rollInMemberId = res.data.id;
              form.rollInMemberNum = res.data.memberNum;
              form.rollInMemberName = res.data.memberName;
            }
            this.form = JSON.parse(JSON.stringify(form));
          } else {
            this.$alert(res.message, "提示", {
              confirmButtonText: "确定",
              confirmButtonClass: "confirmbtnFalses",
              type: "warning",
              center: true,
              callback: (action) => {},
            });
          }
        });
      }
    },
    getData() {
      recAccountCashList({
        memberId: this.memberForm.id,
      }).then((res) => {
        if (res.code == "000000") {
          this.recList = res.rows;
          this.$refs.rec.show(this.recList);
          this.activeName = "充值";
        } else {
          this.$alert(res.message, "查询会员卡包", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
      couAccountList({
        memberId: this.memberForm.id,
      }).then((res) => {
        if (res.code == "000000") {
          this.proList = res.rows;
        } else {
          this.$alert(res.message, "查询会员疗程", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
    //组件传值
    show(form, type) {
      if (form == "添加") {
        this.title = form;
        this.form.type = type;
      } else {
        this.title = "修改";
        this.form = { ...form };
      }
      this.dialogFormVisible = true;
      setTimeout(() => {
        this.$refs.form.clearValidate();
      }, 300);
    },
    //确定返回方法
    confirm() {},
  },
};
</script>

<style>
</style>
