<template>
  <div class="full">
    <div class="header">
      <div class="back-wrapper" @touchend="onBack">
        <div class="back"></div>
      </div>
    </div>

    <div style="width: 100%;">
      <div class="item">
        <div class="logo"></div>
      </div>


      <div class="item">
        <div class="desc"></div>
      </div>

      <div class="item">
        <div class="account-label"></div>
      </div>

      <div class="item">
        <input class="input-class" v-model="alipayAccount" name="account" placeholder="支付宝帐号"></input>
      </div>

      <div class="item">
        <div class="name-label"></div>
      </div>

      <div class="item">
        <input class="input-class" v-model="alipayName" name="username" placeholder="支付宝姓名"></input>
      </div>

      <div class="item">
        <div class="btn" @click="onClick"></div>
      </div>

      <div class="item">
        <div class="tip"></div>
      </div>

      <div class="item">
        <div class="shoe"></div>
      </div>

    </div>


  </div>
</template>

<script>

import { Dialog } from 'cube-ui';

export default {
  name: 'AlipayForm',
  components: {
    Dialog
  },
  data() {
    return {
      alipayAccount: '',
      alipayName: ''
    };
  },
  methods: {
    onClick() {
      if (!this.alipayAccount || !this.alipayName) {
        this.$createToast({
          type: 'warn',
          time: 1000,
          txt: '不能为空'
        }).show();
        return;
      }

      this.showBtn();
    },
    onBack() {
      this.$yoho.finishPage({});
    },
    content() {
      return `信息一旦提交后不可修改，确认提交吗？<br>支付宝账号：${this.alipayAccount} <br>支付宝姓名：${this.alipayName}`;
    },
    showBtn() {
      this.$createDialog({
        type: 'confirm',
        content: this.content(),
        confirmBtn: {
          text: '确定',
          active: true,
          disabled: false,
          href: 'javascript:;'
        },
        cancelBtn: {
          text: '取消',
          active: false,
          disabled: false,
          href: 'javascript:;'
        },
        onConfirm: () => {
          this.submit();
        },
        onCancel: () => {
          // this.$createToast({
          //   type: 'warn',
          //   time: 1000,
          //   txt: '点击取消按钮'
          // }).show();
        }
      }).show();
    },
    submit() {
      this.$api.post('/alipay/submit', {
        alipayAccount: this.alipayAccount,
        alipayName: this.alipayName
      }).then(result => {
        if (result.code !== 200) {
          this.$createToast({
            type: 'warn',
            time: 3000,
            txt: result.message
          }).show();
          return;
        }

        this.$createToast({
          type: 'text',
          time: 3000,
          txt: result.message
        }).show();
      });

    }
  }
};
</script>

<style lang="scss" scoped>
  .full {
    position: relative;
    background-color: #f5f5f5;
  }

  .bg1 {
    background-image: url("~statics/image/alipay/bg2.png");
    background-size: cover;
  }

  .logo {
    display: inline-block;
    width: 750px;
    height: 313px;
    /*margin-top: 45px;*/
    background-image: url("~statics/image/alipay/top_logo.png");
    background-size: cover;
  }


  .desc {
    display: inline-block;
    width: 750px;
    height: 1170px;
    margin-top: 30px;
    background-image: url("~statics/image/alipay/desc.png");
    background-size: cover;
  }

  .tip {
    display: inline-block;
    width: 750px;
    height: 215px;
    margin-top: 20px;
    background-image: url("~statics/image/alipay/tip.png");
    background-size: cover;
  }

  .shoe {
    display: inline-block;
    width: 750px;
    height: 128px;
    background-image: url("~statics/image/alipay/bg2.png");
    background-size: cover;
  }

  .account-label {
    display: inline-block;
    width: 181px;
    height: 33px;
    margin-top: 50px;
    background-image: url("~statics/image/alipay/account.png");
    background-size: cover;
  }

  .name-label {
    display: inline-block;
    width: 181px;
    height: 32px;
    margin-top: 25px;
    background-image: url("~statics/image/alipay/name.png");
    background-size: cover;
  }

  .item {
    width: 100%;
    text-align: center;
  }

  .input-class {
    width: 480px;
    height: 57px;
    margin-top: 20px;
    border: 2px solid #131835;
    font-size: 34px;
    color: #131835;
    padding-left: 15px;
  }

  .account {
    position: absolute;
    top: 876px;
  }

  .username {
    position: absolute;
    top: 1008px;
  }

  .submit {
    position: absolute;
    top: 1156px;
  }

  .btn {
    display: inline-block;
    width: 227px;
    height: 71px;
    margin-top: 40px;
    background-image: url("~statics/image/alipay/btn.png");
    background-size: cover;
  }

  .header {
    position: absolute;
    width: 100%;
    height: 45PX;
    padding-left: 20PX;
    padding-right: 20PX;
    background-color: rgba(1, 1, 1, 0);

    .back-wrapper {
      display: flex;
      align-items: center;
      height: 100%;
      width: 60PX;
    }

    .back {
      width: 24PX;
      height: 24PX;
      background: url(~statics/image/alipay/back@3x.png) no-repeat;
      background-size: cover;
    }
  }
</style>