<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" :style="{ 'background-image': `url(${imgUrlMap.header})`}"></div>
      </div>


      <div class="item">
        <img class="desc" :src="imgUrlMap.content1" alt=""/>
        <!-- <div class="desc"></div> -->
      </div>

      <div class="item">
        <img class="desc" :src="imgUrlMap.content2" alt=""/>
        <!-- <div class="desc"></div> -->
      </div>

      <div class="item">
        <img class="desc" :src="imgUrlMap.content3" alt=""/>
        <!-- <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">
        <img class="tip" :src="imgUrlMap.footer">
      </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: "",
      imgUrlMap: {
        header: '//cdn.yoho.cn/20200119/header.jpg?imageView2/2/w/750/format/jpg',
        content1: '//cdn.yoho.cn/20200119/content-1.jpg?imageView2/2/w/750/format/jpg',
        content2: '//cdn.yoho.cn/20200119/content-2.jpg?imageView2/2/w/750/format/jpg',
        content3: '//cdn.yoho.cn/20200119/content-3.jpg?imageView2/2/w/750/format/jpg',
        footer: '//cdn.yoho.cn/20200119/footer.jpg?imageView2/2/w/750/format/jpg'
      }
    };
  },
  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: 314px;
    /*margin-top: 45px;*/
    // background-image: url("//cdn.yoho.cn/20191129/header.jpg?imageView2/2/w/750/format/jpg");
    background-size: cover;
  }

  .item { 
    overflow: hidden;
  }

  .item img {
    width: 100%;
    float: left;
  }

  img.desc {
    // display: inline-block;
    // width: 750px;
    // height: 1078px;
    // margin-top: 30px;
    // background-image: url("//cdn.yoho.cn/20190906/2.jpg?imageView2/2/w/750/format/jpg");
    // background-size: 100% 100%;
    // width: 110%;
    margin-top: 30px;
    // margin-left: -5%;
  }

  img.tip {
    // display: block;
    // width: 750px;
    // height: 370px;
    // margin-top: 20px;
    // background-image: url("//cdn.yoho.cn/20190906/3.jpg?imageView2/2/w/750/format/jpg");
    // background-size: cover;
    // width: 120%;
    margin-top: 30px;
    // margin-left: -10%;
  }

  .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>