<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-tabs v-model="tabActive" style="overflow: auto">
        <el-tab-pane label="Essential Information" name="baseInfo" style="overflow: auto"><!-- 基本信息 -->
          <el-form ref="form" :model="infoData" label-width="250px" class="form-page">
            <el-form-item label="Member code"><!-- 会员编号 -->
              <el-input v-model="infoData.USER_NAME" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="Member name"><!-- 会员姓名 -->
              <el-input v-model="infoData.REAL_NAME" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="Phone Number"><!-- 手机号 -->
              <el-input v-model="infoData.MOBILE" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="Sponsor Code"><!-- 推荐人编号 -->
              <el-input v-model="infoData.SponsorCode" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="Sponsor Name"><!-- 推荐人名字 -->
              <el-input v-model="infoData.SponsorName" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="Email"><!-- Email -->
              <el-input v-model="infoData.EMAIL"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleSubmit" :loading="submitButtonStat">Confirm<!-- 保存 --></el-button>
            </el-form-item>

          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import network from './../../utils/network'

export default {
  name: 'ba-info',
  mounted () {
    this.getData()
  },
  data () {
    return {
      infoData: {
        USER_NAME: '',
        NATION: '',
        REAL_NAME: '',
        MOBILE: '',
        OPEN_BANK: '',
        BANK_ADDRESS: '',
        BANK_NO: '',
        EMAIL: '',
        SponsorCode: '',
        SponsorName: '',
      },
      tabActive: 'baseInfo',
      loading: true,
      submitButtonStat: false,
    }
  },
  methods: {
    getData () {
      network.getData('user/ba-info').then(response => {
        this.infoData = response.userInfo
        this.loading = false
      })
    },
    handleSubmit(){
        this.submitButtonStat = true
        let path = 'user/ba-edit'
        let postData = {
            nation: this.infoData.NATION,
            realName: this.infoData.REAL_NAME,
            mobile: this.infoData.MOBILE,
            openBank: this.infoData.OPEN_BANK,
            bankAddress: this.infoData.BANK_ADDRESS,
            bankNo: this.infoData.BANK_NO,
            email: this.infoData.EMAIL,
        }
        return network.postData(path, postData).then(response => {
            this.$message({
                message: response,
                type: 'success'
            })
            this.submitButtonStat = false
            this.getData();
        }).catch(() => {
            this.submitButtonStat = false
        })
    },
  }
}

</script>

<style scoped>

</style>
