<template>
	<view v-if="buttonInfo">
    <image src="/static/images/background_mine.png"
           class="background-image"></image>
    <view v-if="isLogin">
      <view class="view">
        <view class="view-button" @click="toUsereInfo">
          <view>个人信息</view>
          <image class="icon-arrow" src="/static/images/icon_arrow.png" mode="aspectFill"></image>
        </view>
        <view class="view-line"></view>
        <label for="contact">
          <view class="view-button">
            <view>客服</view>
            <image class="icon-arrow" src="/static/images/icon_arrow.png" mode="aspectFill"></image>
          </view>
        </label>
        <view class="view-line"></view>
        <view class="view-button" @click="toWebview()">
          <view>公司介绍</view>
          <image class="icon-arrow" src="/static/images/icon_arrow.png" mode="aspectFill"></image>
        </view>
        <view class="view-line"></view>
        <view class="view-button" @click="toWebview('userAgreement')">
          <view>用户协议</view>
          <image class="icon-arrow" src="/static/images/icon_arrow.png" mode="aspectFill"></image>
        </view>
        <view class="view-line"></view>
        <view class="view-button" @click="toWebview('privacy')">
          <view>隐私政策</view>
          <image class="icon-arrow" src="/static/images/icon_arrow.png" mode="aspectFill"></image>
        </view>
      </view>
      <view class="button-logout" @click="logout">退出</view>
    </view>
    <view v-else>
      <view class="button-login" @click="login">登录</view>
    </view>
	</view>
  <button open-type="contact" id="contact"></button>
</template>

<script>
  import { useBasicStore } from '@/stores/basic'
  import { useUserStore } from '@/stores/user'
  import { mapState, mapActions } from 'pinia'

	export default {
		data() {
			return {
        buttonInfo: null
			}
		},
    computed: {
      ...mapState(useUserStore, ['isLogin'])
    },
    async onLoad() {
      this.buttonInfo = await this.getButtonInfo()
    },
		methods: {
      ...mapActions(useBasicStore, ['getButtonInfo', 'routeJump']),
      ...mapActions(useUserStore, ['updateLoginStatus', 'login']),
      toUsereInfo() {
        this.routeJump({
          name: 'userInfo'
        })
      },
      toWebview(type) {
        this.routeJump({
          name: 'webview',
          params: {
            type
          }
        })
      },
      logout() {
        const that = this
        uni.showModal({
          title: '提示',
          content: '确定退出登录吗？',
          success: (res) => {
            if (res.confirm) {
              uni.removeStorageSync('token')
              that.updateLoginStatus(false)
            }
          }
        })
      }
    },
	}
</script>

<style lang="scss">
page {
  background-color: $uni-bg-color-grey;
}
</style>


<style scoped lang="scss">
.background-image {
  margin-top: 32rpx;
  margin-left: 20rpx;
  width: 710rpx;
  height: 156rpx;
  border-radius: 32rpx;
}

.view {
  margin-top: 32rpx;
  border-radius: 32rpx;
  width: 710rpx;
  margin-left: 20rpx;
  background: #FFFFFF;
}

.view-button {
  padding: 0 20rpx 0 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #292826;
  font-size: 32rpx;
  font-weight: bold;
  line-height: 80rpx;
}

.icon-arrow {
  width: 40rpx;
  height: 40rpx;
}

.view-line {
  width: 100%;
  height: 3rpx;
  background: #EBEBEB;
}

.button-logout {
  position: absolute;
  border-radius: 46rpx;
  bottom: 60rpx;
  width: 710rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  margin-left: 20rpx;
  background: #ec433c;
  color: #ffffff;
  font-size: 40rpx;
  font-weight: bold;
}

.button-login {
  margin-top: 40vh;
  border-radius: 46rpx;
  width: 650rpx;
  height: 120rpx;
  line-height: 120rpx;
  text-align: center;
  margin-left: 50rpx;
  background: #63b8af;
  color: #ffffff;
  font-size: 48rpx;
  font-weight: bold;
}
</style>
