<template>
  <el-dialog :close-on-click-modal="false" v-dialogDrag :title="title" :visible.sync="detailDialog" width="80%" append-to-body :before-close="handleClose">
    <div class="max-height-60 ">
      <el-form :model="form" inline label-width="100px" ref="form">
        <el-form-item label="手机号码:">
          <div class="raisediv">
            {{ form.mobilePhone }}
          </div>
        </el-form-item>
        <el-form-item label="会员名字:">
          <div class="raisediv">
            {{ form.memberName }}
          </div>
        </el-form-item>
        <div class="raisetable bg-white margin-left-lg margin-bottom-xs">
          <div class="raisetable-sum">
            <span>转出疗程</span>
          </div>
          <el-table :data="outList" max-height="150" :header-cell-style="{background: 'linear-gradient(#6cb3ff, #1873d4)' ,color:'#eeeeee'}" style="margin-top: 5px;">
            <el-table-column label="项目编码" show-overflow-tooltip align="center" prop="courseProjectNum" min-width="80"></el-table-column>
            <el-table-column label="账户名称" show-overflow-tooltip align="center" prop="courseProjectName" min-width="120"></el-table-column>
            <el-table-column label="可用次数" align="center" prop="courseConsumeCount" min-width="70"></el-table-column>
            <el-table-column label="疗程单价" align="center" prop="unitMoney" min-width="70"></el-table-column>
            <el-table-column label="转前次数" align="center" prop="courseBeforeUsableCount" min-width="70"></el-table-column>
            <el-table-column label="转出次数" align="center" prop="rollOffCount" min-width="70"></el-table-column>
            <el-table-column label="转后次数" align="center" prop="courseAfterUsableCount" min-width="70"></el-table-column>
            <el-table-column label="转前金额" align="center" prop="courseBeforeUsableMoney" min-width="70"></el-table-column>
            <el-table-column label="转出金额" align="center" prop="rollOffMoney" min-width="70"></el-table-column>
            <el-table-column label="转后金额" align="center" prop="courseAfterUsableMoney" min-width="70"></el-table-column>
          </el-table>
          <span class="padding-left-sm ">员工业绩</span>
                <div class=" flex align-start flex-wrap padding-top">
                  <staffslesout ref="staffslesout" @staffslesData="staffslesDataout" :is-true="true"></staffslesout>
                </div>
        </div>
        <div class="raisetable bg-white margin-left-lg">
          <div class="raisetable-sum">
            <span>转入充值 </span>
          </div>
          <el-table :data="inList" max-height="150" :header-cell-style="{background: 'linear-gradient(#6cb3ff, #1873d4)' ,color:'#eeeeee'}" style="margin-top: 5px;">
            <el-table-column label="充值编码" show-overflow-tooltip align="center" prop="rechargeTypeNum" min-width="100"></el-table-column>
            <el-table-column label="充值名称" show-overflow-tooltip align="center" prop="rechargeTypeName" min-width="110"></el-table-column>
            <el-table-column label="剩余金额" align="center" prop="cardConsumeMoney" min-width="70"></el-table-column>
            <el-table-column label="折扣(%)" align="center" prop="discount" min-width="70"></el-table-column>
            <el-table-column label="转前金额" align="center" prop="rechargeBeforeMoney" min-width="70"></el-table-column>
            <el-table-column label="转入金额" align="center" prop="rechargeInMoney" min-width="70"></el-table-column>
            <el-table-column label="转后金额" align="center" prop="rechargeAfterMoney" min-width="70"></el-table-column>
          </el-table>
        </div>
        <span class="text-bold padding-xs">员工</span>
        <div class="into-table-width flex justify-center align-start flex-wrap padding-top">
          <staffsles ref="staffsles" @staffslesData="staffslesData" :is-true='true'></staffsles>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer" v-if="title=='明细'">
      <el-button size="mini" type="primary" @click="detailDialog=false">关闭</el-button>
    </span>
    <span v-else slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" plain @click="cancel()">取 消</el-button>
      <el-button v-if="form.isCancel==0" size="mini" type="primary" @click="subStaffRatio()">修 改</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  editRechargeTurnCourse,
  cardChangeinPro,
  selectOne,
  cardChangeOutPro,
} from "@/api/eashier.js";
import staffsles from "@/components/staffList/staff/index";
import staffslesout from "@/components/staffList/staffout/index";
export default {
  components: {
    staffsles,
    staffslesout
  },
  data() {
    return {
      detailDialog: false,
      sessionStorageData: {}, //门店参数集合
      activeNames: "员工",
      outList: [],
      inList: [],
      title: "", //弹窗标题
      form: {}, //主对象
    };
  },
  methods: {
    //关闭弹窗前的回调方法
    handleClose() {
      this.form = Object.assign({});
      this.detailDialog = false;
      this.inList = [];
      this.outList = [];
      this.payLists = [];
      this.$refs.form.clearValidate();
    },
    setStaff() {
      var that = this;
      this.$nextTick(() => {
        // console.log(that.$refs.staffsles);
        that.$refs.staffsles.show(that.form.staffLists);
      });
    },
    setStaffs() {
      var that = this;
      this.$nextTick(() => {
        // console.log(that.$refs.staffsles);
        that.$refs.staffslesout.show(that.form.staffListsout);
      });
    },
    //员工占比返回方法
    staffslesData(v) {
      this.form.staffLists = [...v];
    },
    staffslesDataout(v) {
      this.form.staffListsout = [...v];
    },
    cancel() {
      this.$emit("detailData");
      this.form = Object.assign({});
      this.detailDialog = false;
      this.inList = [];
      this.outList = [];
      this.payLists = [];
      this.$refs.form.clearValidate();
    },
    //组件传值
    show(form, text) {
      if (text == "明细") {
        this.title = text;
      } else {
        this.title = "明细/修改";
      }
      this.detailDialog = true;
      this.getData(form);
    },
    getData(item) {
      console.log(sessionStorage.getItem("sessionStorageData"));
      this.sessionStorageData = JSON.parse(
        sessionStorage.getItem("sessionStorageData")
      );
      this.form = {
        ...item,
      };
      this.outList = this.form.coursePayListRequests;
      this.inList = [
        {
          rechargeTypeId: item.rechargeTypeId,
          rechargeTypeName: item.rechargeTypeName,
          rechargeTypeNum: item.rechargeTypeNum,
          rechargeInMoney: item.rechargeInMoney,
          rechargeBeforeMoney: item.rechargeBeforeMoney,
          rechargeAfterMoney: item.rechargeAfterMoney,
          rechargeAccountId: item.rechargeAccountId,
          typeRatio: item.typeRatio,
        },
      ];
      this.form.staffListsout=this.form.coursePayListRequests[0].staffLists
      this.form.staffListsout.forEach((items) => {
        items.staffNames = items.brandNumber + "--" + items.staffName;
      });
      if (this.form.staffListsout.length == 0) {
        this.form.staffListsout.push({ ratio: 100 });
      }
      this.form.staffLists = this.form.entities;
      this.form.staffLists.forEach((item) => {
        item.id = item.saleStaffId;
        item.staffName = item.saleStaffName;
        item.ratio = item.saleRatio;
        item.identityCard = item.saleIdentityCard;
      });
      this.form.staffLists.forEach((items) => {
        items.staffNames = items.brandNumber + "--" + items.staffName;
      });
      if (this.form.staffLists.length == 0) {
        this.form.staffLists.push({ ratio: 100 });
      }
      this.setStaff();
      this.setStaffs();
    },
    subStaffRatio() {
      editRechargeTurnCourse(this.form).then((res) => {
        if (res.code == "000000") {
          this.$message.success({
            message: res.message,
          });
          this.primaryDialog = false;
          this.getData();
        } else {
          this.$alert("修改员工 : " + res.message, "提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
  },
};
</script>

<style>
</style>
