<template>
  <LayoutApp :show-back="true" title="绑定支付宝">
    <div class="body" ref="body">
      <div class="account-form">
          <p class="form-title">账号</p>
          <div class="form-input-block">
            <CubeInput class="account-input" v-model="account" placeholder="请输入您的支付宝账号"></CubeInput>
          </div>
          <p class="form-title">姓名</p>
          <div class="form-input-block">
            <CubeInput class="account-input" v-model="name" placeholder="请输入支付宝实名认证的姓名"></CubeInput>
          </div>
      </div>
      <div class="account-footer">
        <CubeButton class="submit-btn" :disabled="canSubmit" @click="submitBind">提交</CubeButton>
      </div>
    </div>
    <myDialog :isShow="dialogShow" :data="{name,account}" @cancel-click="cancel" @confirm-click="confirm"></myDialog>
  </LayoutApp>
</template>

<script>

import { createNamespacedHelpers } from 'vuex';
import {Input, Button, Style} from 'cube-ui';
import myDialog from './components/bindModel';
const {mapState, mapActions} = createNamespacedHelpers('home/bindAccount');
export default {
    data() {
      return {
        account: '',
        name: '',
        dialogShow: false
      }
    },
    computed:{
        ...mapState({
          incomeData: (state) => state.assetData
        }),
        canSubmit() {
        return !(this.name && this.account);
        }
    },
    created() {
    },
    
    methods: {
      ...mapActions(['bindAliPayAccount']),
      submitBind() {
          this.dialogShow = true
      },
      cancel() {
          this.dialogShow = false
      },
      confirm() {
          this.bindAliPayAccount({account: this.account, name: this.name}).then((data) => {
            this.dialogShow = false;
            if (data.code === 200) {
              this.$router.back()
            } else {
              this.$createToast({
                txt: data.message,
                time: 1500,
                type: 'txt'
              }).show();
            }
          })
      },

    },
    components: {
      Style,
      CubeInput: Input,
      CubeButton: Button,
      myDialog
    }
};
</script>

<style lang="scss" scoped>
.body {
    position: relative;
    height: 100%;
    overflow-y: auto;
    background-color: white;
    padding: 0 40px;
}
.account-form {
      margin-top: 40px;
    }

    .form-title {
      font-size: 36px;
      padding-top: 40px;
      line-height: 1.6;
      font-weight: 500;
    }

    .form-input-block {
      padding-bottom: 16px;
      border-bottom: 1px solid #eee;
      position: relative;
    }

    .account-input {
      &:after {
        border: 0;
      }

      /deep/ .cube-input-field {
        font-size: 14px;
        height: 40px;
        border: none;
        padding: 0;
      }
    }
.account-footer {
    position: fixed;
    padding: 28px 0;
    left: 40px;
    right: 40px;
    bottom: 40px;
    .submit-btn {
      height: 88px;
      line-height: 88px;
      padding: 0;
      background: #022c46;
      border-radius: 44px;

      &:after {
        border: 0;
      }

      &.cube-btn_disabled {
        background: #ccc;
      }
    }
  }
</style>