<template>
  <div>
    <!--      :close-on-click-modal="false"-->

    <el-dialog
      append-to-body
      top="15vh"
      width="35%"
      :visible.sync="dialogVisible"
      center
      @close="handleCancel"
    >
      <div class="el-dialog-div" style="height:40vh;text-align: center;">

        <div style="text-align: left;">
          <h2> 应付金额：<span class="price-text">{{totalPrice}}</span></h2>
          <h2> 实付金额：<span class="price-text">{{realTotalPrice}}</span></h2>
          <h2> 仍需支付：<span class="price-text">{{app.Subtr(totalPrice,realTotalPrice)}}</span></h2>
        </div>
        <div style="width:100%;"
                            v-for="(item,index) in payTypeList"
                            :key="item.payType">

        <el-input
          style="text-align: center;width: 70%;margin-bottom: 10px;"
          placeholder="请输入金额"
          @click.native="inputClick(item,payTypeList,index)"
          v-model="item.amount">

          <span slot="prefix" style="line-height: 40px;text-align: right;width: 80px;display: inline-block;">{{item.payName}}&nbsp;</span>

          <span slot="suffix" style="line-height: 40px;text-align: right;width: 200px;display: inline-block;" v-if="app.isNotEmpty(memberCard.memberCardId) && item.payType == '1'">
            会员卡总余额：<span class="price-text">{{app.getFloatStr(memberCardAmount)}}</span>
          </span>
        </el-input>

        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
        <slot name="button2"></slot>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {accAdd,error,isNotEmpty} from "@/utils";

  export default {
    name: "payType",
    props: {

    },
    data() {
      return {
        dialogVisible: false,
        temp:{},
        menu: '',
        totalPrice:'',
        memberCard:{amount:0,giveAmount:0},
        payTypeList:[
          {payType:"1",payName:"会员卡支付",amount:""},
          {payType:"2",payName:"扫码支付",amount:""},
          {payType:"3",payName:"现金支付",amount:""},
          {payType:"888",payName:"优惠",amount:""},
        ]
      }
    },
    computed:{
      realTotalPrice(){
        let realTotalPrice = 0;
        for(let pay of this.payTypeList){
          if(pay.amount){
            realTotalPrice = accAdd(pay.amount,realTotalPrice);
          }
        }
        return realTotalPrice;
      },
      memberCardAmount(){
        let memberCardAmount = 0;
        if(isNotEmpty(this.memberCard.memberCardId)){
          memberCardAmount = accAdd(this.memberCard.amount,this.memberCard.giveAmount);
        }
        return memberCardAmount;
      }
    },
    methods: {
      open(totalPrice,memberCard,menu) {
        this.menu =  menu
        // 打印应付金额和会员卡信息
        console.log('应付金额' + totalPrice)
        console.log('当前会员卡' + memberCard)
        // 设置应付金额
        this.totalPrice = totalPrice
        // 根据会员卡是否存在进行不同操作
        if(isNotEmpty(memberCard.memberCardId)){
          // 存在会员卡，设置会员卡信息
          this.memberCard = memberCard
          if(menu == '2' || menu == '3'){
            this.payTypeList.splice(0, 1)
          }
        } else {
          // 不存在会员卡，调整支付类型列表
          this.payTypeList.splice(0, 1)
        }
        // 显示对话框
        this.dialogVisible = true
      },
      //首次输入金额时自动填充
      inputClick(pay, payList,index) {
        let flag = true;
        for (let i = 0; i < payList.length; i++) {
          if (isNotEmpty(payList[i].amount)) {
            flag = false;
            break;
          }
        }
        let needPay = this.totalPrice;

        if (needPay > 0 && flag) {
          if(index==0 && this.menu == '1' && isNotEmpty(this.memberCard.memberCardId)){
            //证明是卡金支付
            //如果应付金额大于卡金总余额 则卡金这一栏仅填写卡金余额
            if(needPay>this.memberCardAmount){
              pay.amount = this.memberCardAmount
            }else{
              pay.amount = needPay;
            }
          }else{
            pay.amount = needPay;
          }
        }
      },
      handleCancel(){
        this.dialogVisible = false
        this.totalPrice = this.$options.data().totalPrice
        this.menu = this.$options.data().menu
        this.memberCard = this.$options.data().memberCard
        this.payTypeList = this.$options.data().payTypeList
      },
      submit(){
        if(this.totalPrice == this.realTotalPrice){
          let payList = this.payTypeList.filter(item => item.amount > 0)
          this.$emit('ok', payList)
          this.handleCancel()
        }else{
          error('应付金额不等于实际金额~')
        }

      }
    },
  }
</script>
<style scoped>
  ::v-deep .el-input--prefix .el-input__inner{
    padding-left: 90px !important;
  }
</style>
