<template>
	<view class="div container">
		<view class="div top-wrapper">
				<flex-line class="field-line input-wrapper" :show-border="true"><view class="div field-line-right" slot="right"><input class="field-input" v-model="username" placeholder="用户名" maxlength="11" /></view></flex-line>
				<flex-line class="field-line input-wrapper" :show-border="true"><view class="div field-line-right" slot="right"><input class="field-input" type="password" v-model="password" placeholder="密码" maxlength="20" /></view></flex-line>
		</view>

		<view class="div common-btn ds-button-large mt-10 mb-10" @click="onSubmit">绑定</view>

	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { bind, getThirdLogin } from '../../../api/memberLogin'
import flexLine from '../../flexLine'
export default {
  name: 'BindOld',
  data () {
    return {
      query:{},
      username: '',
      password: '',
      wxinfo: false
    }
  },
  components: { flexLine },
  mounted(){
    var pages = getCurrentPages()
    var page = pages[pages.length - 1]
    this.query = page.options

    getThirdLogin(this.query.id).then(res => {
      let wxinfo = res.result.wxinfo
      if (!wxinfo) {
        uni.showToast({icon:'none',title: '绑定信息不存在'})
        uni.navigateTo({url: '/pages/home/memberlogin/Login' })
      } else {
        this.wxinfo = wxinfo
      }
    })
  },
  computed: {
    ...mapState({
      inviter_id: state => state.member.inviterId
    })
  },

  methods: {
    ...mapMutations({
      saveAuthInfo: 'memberLogin'
    }),

    check () {
      let username = this.username
      let password = this.password
      if (username.length === 0) {
        uni.showToast({icon:'none',title: '请输入用户名'})
        return false
      }

      if (password.length === 0) {
        uni.showToast({icon:'none',title: '请输入密码'})
        return false
      }

      return true
    },
    signup () {
      if (!this.check()) {
        return
      }
      uni.showLoading({ title: '加载中' })

      bind(0, 'wx', this.wxinfo.openid, this.wxinfo.unionid, this.wxinfo.nickname, this.wxinfo.headimgurl, this.username, this.password, '', this.inviter_id).then(
        response => {
          uni.hideLoading()
          this.saveAuthInfo({ token: response.result.token, info: response.result.info })
          uni.navigateTo({url: '/pages/member/index/Index' })
        },
        error => {
          uni.hideLoading()
          uni.showToast({icon:'none',title: error.message})
        }
      )
    },
    onSubmit () {
      this.signup()
    }

  }
}
</script>

<style scoped lang="scss">
	.ds-button-large{margin:0 $pageSpace}
	.container {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		//background-color: $primaryColor;
		.input-wrapper {
			font-size:$subFontSize;
			display: flex;
			flex-direction: row;
			align-content: flex-start;
			align-items: center;
			background-color: #fff;
			height:2.2rem;
			padding-left:0.5rem;
			input {
				flex: 1;
			}
			.bottom-input {
				border-bottom-width: 0;
			}
			.img{height:1.75rem}
		}

	}
	.top-wrapper {margin:0 $pageSpace;}
	.bottom-wrapper {margin-top:0.5rem;}
	.tips {
		color: $descTextColor;
		font-size:$fontSize;
		white-space: nowrap;
		position: absolute;
		right: 0;
		top:50%;
		margin-top:-.3rem;
	}
	.countdown {min-width:4rem;margin-right:0.5rem;}
	.field-line-right{position: relative;
	  .field-input{
	    text-align: left !important;
	  }
	}
</style>
