<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 ref="account" class="account-input" v-model="account" @blur="checkValid" 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 {
  props: ['back'],
  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) {
          if (this.back) {
            this.$router.replace({
              name: this.back
            })
            return;
          }
          this.$router.back();
        } else {
          this.$createToast({
            txt: data.message,
            time: 1500,
            type: 'txt'
          }).show();
        }
      });
    },
    checkValid() {
      let Regex = /[\u4e00-\u9fa5]/;  
      if(Regex.test(this.account)) {
        this.$createToast({
        txt: '账号不能包含中文',
        time: 1500,
        type: 'txt'
      }).show();
      // this.account = ''
      console.log(this.$refs.account.focus())
      } 
    }
  },
  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>