<template>
  <div class="ToUpView">
    <div class="selectBox">
      <el-select v-model="voucherToUp.voucherId" placeholder="请先择充值的代金卷">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.voucherName"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <span class="tips">请注意选择充值的代金卷！！</span>
    </div>
    <div v-for="(item, index) in RechargeAmount" :key="index" class="toUpbox" @click="toUpVoucher(item)">
      {{ item }}
    </div>
    <el-dialog
      title="微信扫码支付"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="moneyImage">
        <img :src="url" alt="">
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="请输入需要充值的金额"
      :visible.sync="voucherShow"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-input v-model="voucherToUp.payGrade" autocomplete="off"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="voucherShow = false">取 消</el-button>
        <el-button type="primary" @click="createVoucher">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAllVoucher, getAllVoucherOrder, getVoucher, submitVoucher } from '@/api/volumeManagement'
import Cookies from 'js-cookie'
export default {
  // eslint-disable-next-line vue/match-component-file-name
  name: 'ToUpView',
  data() {
    return {
      dialogVisible: false,
      voucherShow: false,
      RechargeAmount: [0.01, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, '其他金额'],
      options: [],
      url: 'https://jufeng-shop-1317254189.cos.ap-guangzhou.myqcloud.com/722681742998623',
      voucherToUp: {
        voucherId: '',
        token: '',
        number: '',
        payGrade: '',
        shopId: ''
      }
    }
  },
  created() {
    this.voucherToUp.shopId = Cookies.get('shopID')
    getVoucher().then((res) => {
      this.options = res.data
      this.voucherToUp.voucherId = res.data[0].id
    })
  },
  methods: {
    toUpVoucher(number) {
      if (number === '其他金额') {
        this.voucherShow = true
      } else {
        this.$confirm('确定充值吗').then((res) => {
          this.voucherToUp.payGrade = number
          this.voucherToUp.number = number * 2
          submitVoucher(this.voucherToUp).then((res) => {
            this.dialogVisible = true
            this.url = res.data.url
            // console.log(this.url)
          })
        })
          .catch((err) => {
            console.log(err)
            this.$message('已取消')
          })
      }
    },
    createVoucher() {
      this.voucherShow = false
      this.voucherToUp.number = this.voucherToUp.payGrade * 2
      submitVoucher(this.voucherToUp).then((res) => {
        this.dialogVisible = true
        this.url = res.data.url
        // console.log(this.url)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.moneyImage {
  width: 100%;
  display: flex;
  justify-content: center;
  > img {
      margin: 0 auto;
      width: 260px;
      height: 260px;
  }
}
.tips {
  margin-left: 30px;
  margin-left: 20px;
}
.ToUpView {
  width: 100%;
  height: 100%;
  padding: 30px;
  .toUpbox {
    cursor: pointer;
    width: 200px;
    height: 90px;
    float: left;
    margin: 30px;
    border-radius: 15px;
    text-align: center;
    line-height: 90px;
    font-size: 30px;
    color: #1887e2;
    box-shadow: rgba(80, 81, 80, 0.204) 0px 2px 8px 0px;
  }
  .toUpbox:hover {
    color: #18e21b;
  }
}
</style>
