<template>
  <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="dialogFormVisible" width="80%" v-dialogDrag>
    <el-form :model="form" inline ref="form" class="max-height-60" label-width="80px">
      <el-form-item label="转出门店">
        <el-select class="form-width-m" filterable default-first-option clearable v-model="form.storesNum" placeholder="请选择" @change="changeOut">
          <el-option v-for="(item,index) in options" :key="index" :label="item.storeNum" :value="item.storeNum">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="门店名称">
        <div class="form-width-m">
          {{form.storesName}}
        </div>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input class="form-width-ms" 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>
      </el-form-item>
      <el-form-item label="会员名字">
        {{form.memberName}}
      </el-form-item>
      <el-table :data="list" max-height="600" ref="list" v-loading="listLoading" :element-loading-text="elementLoadingText" @row-click="getCurrentRow" :row-class-name="rowName" @selection-change="handleSelectionChange" :header-cell-style="{background: 'linear-gradient(#6cb3ff, #1873d4)',color:'#eeeeee'}">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column align="center" prop="courseProjectNum" label="项目编码" sortable min-width="80"></el-table-column>
        <el-table-column align="center" prop="courseProjectName" label="项目名称" sortable min-width="80"></el-table-column>
        <el-table-column align="center" prop="price" label="项目单价" sortable min-width="80"></el-table-column>
        <el-table-column align="center" prop="courseRestCount" label="剩余次数" sortable min-width="80"></el-table-column>
        <el-table-column align="center" prop="courseRestPrice" label="剩余金额" sortable min-width="80"></el-table-column>
        <el-table-column align="center" prop="courseConsumeCount" label="可用次数" sortable min-width="80"></el-table-column>
        <el-table-column align="center" prop="courseConsumePrice" label="可用金额" sortable min-width="80"></el-table-column>
        <el-table-column align="center" label="转入门店">
          <el-table-column align="center" prop="storeNum" label="编码" min-width="80"></el-table-column>
          <el-table-column align="center" prop="storeName" label="名称" min-width="180">
            <template slot-scope="scope">
              <el-select filterable default-first-option clearable @clear='clear(scope.row)' v-model="scope.row.storeName" @change="changeIn($event,scope.row)" placeholder="请选择">
                <el-option v-for="(item,index) in storeList" :key="index" :label="item.storeName" :value="item.storeName">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table-column>
        
      </el-table>
    </el-form>
    <member ref="member" @memberData="memberData"></member>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" @click="dialogFormVisible = false">取 消</el-button>
      <el-button size="mini" type="primary" @click="confirm()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  addStoreTurnTreatment,
  staffPage,
  organizations,
} from "@/api/storeManage.js";
import { storeMemberOne, couAccountList } from "@/api/eashier.js";
import member from "@/components/member/index";
export default {
  components: { member },
  data() {
    return {
      dialogFormVisible: false, //弹窗开关
      listLoading: false, //list加载提示开启动画
      elementLoadingText: "加载中...", //list加载提示文字
      title: "", //弹窗标题
      form: {}, //主对象
      list: [], //主数组
      selection: [], //选中的会员列表
      queryForm: {
        pageNum: 1,
        pageSize: 10,
      },
      options: [], //下拉门店列表
      storeList: [], //门店列表
    };
  },
  methods: {
    //转出门店改变
    changeOut(e) {
      this.options.forEach((item) => {
        if (item.storeNum == e) {
          this.form.storesName = item.storeName;
          this.form.storesId = item.id;
        }
      });
      this.getData();
    },
    //转入门店改变
    changeIn(e, row) {
      let form = { ...row };
      this.storeList.forEach((item) => {
        if (item.storeName == e) {
          form.storeName = item.storeName;
          form.storeId = item.id;
          form.storeNum = item.storeNum;
        }
      });
      this.list.splice(row.index, 1, form);
      this.getCurrentRow(row);
      this.$nextTick(() => {
        this.$refs["list"].toggleRowSelection(this.list[row.index], true);
      });
      console.log(this.selection);
    },
    //删除下拉选择
    clear(row) {
      this.$nextTick(() => {
        this.$refs["list"].toggleRowSelection(this.list[row.index], false);
      });
    },
    //打开会员弹窗
    openMember() {
      this.$refs.member.show();
    },
    //会员弹窗返回值
    memberData(v) {
      this.form.mobilePhone = v.mobilePhone;
      this.query();
    },
    //查询会员信息
    query() {
      storeMemberOne({
        mobilePhone: this.form.mobilePhone,
        storeId: sessionStorage.getItem("parentId"),
      }).then((res) => {
        if (res.code == "000000") {
          this.form.memberId = res.data.id;
          this.form.memberNum = res.data.memberNum;
          this.form.memberName = res.data.memberName;
          this.form.mobilePhone = res.data.mobilePhone;
          this.getCourse();
        } else {
          this.$alert(res.message, "查询会员", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
    //获取会员疗程卡包
    getCourse() {
      var ids = {
        memberId: this.form.memberId,
        storeId: this.form.storesId,
      };
      couAccountList(ids).then((res) => {
        if (res.code == "000000") {
          res.rows.forEach((item) => {
            item.storeNum = null;
            item.storeName = null;
            item.courseAccountId = item.id;
          });
          this.list = res.rows;
        } else {
          this.$alert(res.message, "查询会员疗程", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
    //多选方法
    getCurrentRow(row) {
      this.$refs["list"].toggleRowSelection(row);
    },
    //列表返回方法
    rowName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    //多选变动方法
    handleSelectionChange(selection) {
      this.selection = selection;
    },
    //组件传值
    show(row) {
      this.title = "员工转出门店";
      this.dialogFormVisible = true;
      this.getData();
    },
    //获取数据
    async getData() {
      let parentId = JSON.parse(sessionStorage.getItem("storeInfo")).id;
      organizations({ pageSize: 999 }).then((res) => {
        if (res.code == "000000") {
          let list = [];
          res.rows.forEach((item) => {
            if (this.form.storesNum != item.storeNum) {
              list.push(item);
            }
          });
          this.options = res.rows;
          this.storeList = list;
        } else {
          this.$alert(res.message, "获取门店信息", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
    //确定返回方法
    confirm() {
      this.selection.forEach((item) => {
        item.storesId = this.form.storesId;
        item.storesName = this.form.storesName;
        item.storesNum = this.form.storesNum;
        item.memberId = this.form.memberId;
        item.memberNum = this.form.memberNum;
        item.memberName = this.form.memberName;
        item.mobilePhone = this.form.mobilePhone;
      });
      addStoreTurnTreatment(this.selection).then((res) => {
        if (res.code == "000000") {
          this.dialogFormVisible = false;
          this.$emit("editData");
        } else {
          this.$alert(res.message, "提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
  },
};
</script>

<style>
</style>
