<template>

  <view class="container container-with-elep full-height-with-titile">
      <view class="section">
        <view class="menu-item" @click.stop="handleToMyBalance">
          <view class="menu-left">
            <uni-icons type="wallet-filled" size="22" color="#f3c20f" />
            <text class="menu-text">{{languageData.account.myAccount}}</text>
          </view>
		  <uni-icons type="right" size="16" color="#999" />
        </view>

        <view class="menu-item"  @click.stop="handleToBank">
          <view class="menu-left">
            <uni-icons type="bars" size="22" color="#2196f3" />
            <text class="menu-text">{{languageData.bankCard}}</text>
          </view>
		  <uni-icons type="right" size="16" color="#999" />
        </view>
		
        <view class="menu-item"  @click.stop="handleCancelAccount">
          <view class="menu-left">
            <uni-icons type="close" size="22" color="#ff0000" />
            <text class="menu-text">{{languageData.account.cancelAccount}}</text>
          </view>
		  <uni-icons type="right" size="16" color="#999" />
        </view>
		
      </view>

  </view>
</template>
<script>
export default {
  data() {
    return {
	  languageData: {},
    }
  },
  computed: {
  	windowHeight() {
  		return uni.getSystemInfoSync().windowHeight - 50
  	}
  },
	onLoad() {
		this.languageData = this.$languageData;
	},
  created() {
	uni.setNavigationBarTitle({
		title: this.$languageData.navBar.myAccount
	});
  },
  watch:{
		languageData(){
			uni.setNavigationBarTitle({
				title: this.$languageData.navBar.myAccount
			});
		}
	},
  methods: {
	handleToMyBalance() {
		this.$tab.navigateTo('/pages/mine/wallet/index')
	},
	handleToBank() {
		this.$tab.navigateTo('/pages/mine/bankCard/index')
	},
	handleCancelAccount(){
		this.$modal.confirm(this.$languageData.account.cancelConfirm).then(() => {
			this.$store.dispatch('LogOut').then(res => {
                uni.reLaunch({ url: '/pages/login' })
              })
		})
	}
  }
}
</script>


<style lang="scss" scoped>
  .container {
    padding: 20rpx;
	background-size: 110%;
	background-position: bottom;
	background-repeat: no-repeat;
  }

  .section {
    background-color: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
  }
  .menu-row {
    display: flex;
    justify-content: space-between;
    gap: 20rpx;
  }
  .menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
  }

  .menu-item:last-child {
    border-bottom: none;
  }
  .menu-left {
    display: flex;
    align-items: center;
  }
  .menu-text {
    font-size: 14px;
    color: #333333;
    margin-left: 20rpx;
  }

</style>
