<template>
  <div>
    <el-dialog
      title="储值卡支付"
      :visible.sync="visible"
      :close-on-click-modal="false"
      append-to-body
      width="50%"
      @close="closeQrcodeDialog">
      <div class="wrap">
        <el-form
          :model="form"
          ref="form"
          class="demo-ruleForm">
          <el-form-item
            verify
            label="储值卡"
            prop="keyWords1">
            <el-input
              style="width:300px"
              v-model="form.keyWords1"
              placeholder="可输入卡号、证件号、手机号、姓名选择"></el-input>
          </el-form-item>
          <el-form-item
            label="密码"
          >
            <el-input
              style="width:300px"
              v-model="password"
              placeholder="输入密码"
              show-password></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="发起支付"
      :visible.sync="showCardDetail"
      :close-on-click-modal="false"
      append-to-body
      width="50%"
      @close="closeDialog">
      <div
        class="cardDetail"
        style="padding:20px"
        v-for="(item,index) in cardList"
        :key="index">
        <p><span>储值卡:</span>{{ item.memberType.name }}</p>
        <p><span>储值卡号:</span>{{ item.iccardNo }}</p>
        <p><span>储值卡余额:</span>￥{{ item.balance }}</p>
        <p><span>折扣:</span>{{ item.discount/10+'折' }}</p>
        <p><span>姓名:</span>{{ item.name }}</p>
        <p><span>手机号:</span>{{ item.phone }}</p>
        <p>
          <span>总金额:</span>{{ calcOrderPrice(item) }}
          <el-button
            @click="pay(item)"
            type="primary"
            :disabled="calcOrderPrice(item) > item.balance"
            style="margin-left:10px">
            支付
          </el-button>
          <span
            v-if="calcOrderPrice(item) > item.balance"
            class="tip"> 余额不足</span>
        </p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getMemberFromMemberSystem } from '@/api/member'

export default {
  data () {
    return {
      visible: false,
      tickets: [], // 购买的门票
      form: {
        keyWords1: ''
      },
      password: '',
      payChannel: '',
      showCardDetail: false,
      cardList: []
    }
  },
  methods: {
    show (tickets, payChannel) {
      this.showCardDetail = false
      // 扫码时，不再重复触发弹窗初始化。
      this.tickets = tickets
      this.payChannel = payChannel
      if (this.visible) return

      this.visible = true
    },
    closeQrcodeDialog () {
      this.visible = false
    },
    closeDialog () {
      this.showCardDetail = false
    },
    pay (item) {
      let cardInfo = {
        memberSystemId: item.id,
        discount: item.discount
      }
      if (this.password) {
        cardInfo.password = this.password
      }
      this.$emit('getMemberSystemId', null, cardInfo)
      this.visible = false
      this.showCardDetail = false
    },

    // 计算订单价格
    calcOrderPrice (card) {
      return this.tickets[0].total_money ? this.tickets[0].total_money : (this.tickets.reduce((pre, item) => {
        // return pre + item.price * (item.is_discount ? (card.discount / 100) : 1)
        let discount = item.is_discount ? this.$NP.times(card.discount, 0.01) : 1
        return this.$NP.plus(pre, this.$NP.times(item.price, discount))
      }, 0))
    },
    submit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          getMemberFromMemberSystem(this.form).then(res => {
            if (res.length) {
              this.cardList = res
              this.showCardDetail = true
            } else {
              this.$message.warning('未查询到相关储值卡')
            }
          }).catch(e => {
            e && console.log(e)
            this.$message.error('出错了，未查询到相关储值卡')
          })
        }
      })
    }

  },
  watch: {
    visible (val) {
      if (!val) {
        // 结束读卡进程
        this.process && this.process.kill()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap{
    padding: 20px; display: flex;
}
.cardDetail{
  span{
    width: 90px;
    display: inline-block;
    font-weight: 600;
  }
  .tip{
    font-weight: normal;
    color: red;
    margin-left: 10px;
  }
}
</style>
