<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-05-18 14:42:53
-->
<template>
  <view class="main">
    <view class="changeLanguages"
          v-if="getLanguageList.length>0">
      <picker :range="getLanguageList"
              :value="index"
              range-key="label"
              @change="bindPickerChange">
        <view class="select-text">
          <view class="texts">{{ getLanguageList[index].label }}</view>
          <view class="">
            <image class="selIcon"
                   src="../../static/images/drop-666.png"></image>
          </view>
        </view>
      </picker>
    </view>
    <view class="title">
      {{ '会员登录' }}
    </view>
    <u-form :model="loginForm"
            labelWidth="auto"
            ref="uForm">
      <view class="view-class pa">
        <!-- <view class="account-s">
        
        </view> -->
        <u-form-item label=""
                     prop="username">
          <u-input v-model="loginForm.username"
                   clearable
                   placeholder-class="place-class"
                   class="border-color "
                   :placeholder="'会员账号'">
            <image class="tou"
                   slot="prefix"
                   src="../../static/images/login/index-icon4.png"></image>
          </u-input>
        </u-form-item>
        <!-- <view class="close-s"
              v-if="loginForm.username!=''"
              @click="clearAccount">
          <image src="../../static/images/login/index-icon3.png"></image>
        </view> -->
      </view>
      <view class="view-class">
        <!-- <view class="account-s widths">
				<image src="../../static/images/login/index-icon2.png"></image>
			</view> -->
        <u-form-item label=""
                     prop="password">
          <u-input placeholder-style="color:#333"
                   :type="password"
                   class="border-color"
                   v-model="loginForm.password"
                   :placeholder="'登录密码'">
            <image class="mm"
                   slot="prefix"
                   src="../../static/images/login/index-icon2.png"></image>
            <view slot="suffix">
              <view v-if="password=='text'"
                    @click="changeFlagTap('password')">
                <image class="eye"
                       src="../../static/images/login/icon1.png"></image>
              </view>
              <view v-else
                    @click="changeFlagTap('text')">
                <image class="eye"
                       src="../../static/images/login/icon2.png"></image>
              </view>
            </view>
          </u-input>
        </u-form-item>

      </view>
      <view class="view-class">
        <!-- <view class="account-s yzm">
		  	<image src="../../static/images/login/index-icon1.png"></image>
		  </view> -->
        <u-form-item label=""
                     prop="code">
          <u-input v-model="loginForm.code"
                   placeholder-class="place-class"
                   class="border-color"
                   :placeholder="'验证码'">
            <image class="mm"
                   slot="prefix"
                   src="../../static/images/login/index-icon1.png"></image>
            <img :src="codeUrl"
                 slot="suffix"
                 style="height: 38px;"
                 @click="getVerifyCode" />
          </u-input>

        </u-form-item>
      </view>
    </u-form>
    <u-button type="success"
              shape="circle"
              class="btn"
              :loading="isLoading"
              :loadingText="'登录中'"
              @click="toLogin">{{'登录'}}</u-button>
    <view class="paswwrod_btn"
          @click="submit">{{'忘记密码'}}</view>
  </view>
</template>

<script>
import * as api from '@/config/login.js'
import { setToken } from '@/config/auth.js'
import store from '@/store'
export default {
  data() {
    return {
      password: 'password',
      index: 0,
      getList: [],
      changeFlag: true,
      isLoading: false,
      loginForm: {
        username: 'CN123456789',
        password: '111111',
        code: '',
        uuid: '',
      },
      codeUrl: '',
      getLanguageList: [],
    }
  },
  onLoad() {
    this.getVerifyCode()
    this.loginForm.username = uni.getStorageSync('username')||''
    // this.getLanguage()
  },
  methods: {
    changeFlagTap(text) {
      this.password = text
    },
    submit() {
      uni.navigateTo({
        url: '/pages/forgetPassword/index',
      })
    },
    bindPickerChange(e) {
      this.index = e.detail.value
    },
    clearAccount() {
      this.loginForm.username = ''
    },
    getVerifyCode() {
      api.captchaImage().then((res) => {
        this.codeUrl = 'data:image/gif;base64,' + res.img
        this.loginForm.uuid = res.uuid
      })
    },
    getLanguage() {
      api.getLanguages().then((res) => {
        this.getLanguageList = res.data
      })
    },
    toLogin() {
      this.isLoading = true
      api.login(this.loginForm).then((res) => {
        if (!res) {
          // uni.showToast({
          //   title: res.msg,
          //   icon: 'none',
          //   duration: 1500,
          // })
          this.getVerifyCode()
        } else if (res.code == 500) {
          this.getVerifyCode()
        } else {
          uni.setStorageSync('username', this.loginForm.username)
          setToken(res.data.access_token)
          this.getUseInfo()
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    urlToBase64(url) {
      return new Promise((resolve, reject) => {
        uni.request({
          url: url,
          method: 'GET',
          responseType: 'arraybuffer',
          success: (res) => {},
          fail: (err) => {
            reject(err)
          },
        })
      })
    },
    getUseInfo() {
      
      store.dispatch('GetInfo').then((res) => {
        
        uni.switchTab({ url: '/pages/index/index' })
        // 目前强制跳首页
        // if (res.data.loginType == 1) {
        //   uni.redirectTo({ url: '/pages/specialMember/index' })
        // } else {
        //   if (res.data.registerFans == 0) {
        //     uni.redirectTo({ url: '/pages/shareArea/index?specialArea=7' })
        //   } else if (res.data.registerShare == 0) {
        //     // uni.redirectTo({ url: '/pages/shareArea/haiNdex?specialArea=21 ' })
        //     uni.switchTab({ url: '/pages/index/index' })
        //   } else {
        //     uni.switchTab({ url: '/pages/index/index' })
        //   }
        // }
      }).catch((err) => {
        uni.$u.toast(err)
      })
      // api.getInfo().then((res) => {
      //   uni.setStorage('User', res.data)

      // })
    },
  },
}
</script>

<style lang="scss" scoped>
page,
body {
  background-color: #fff !important;
}
::placeholder {
  color: #333;
}
.style-s {
  height: 68rpx;
  margin-left: 40rpx !important;
  color: #333;
  font-size: 28rpx;
  border: none !important;

  outline: none;
  -webkit-appearance: button;
  -webkit-appearance: none;
  border-radius: 0;
  background: none;
  border: none;
}
.select-text {
  display: flex;
}
.selIcon {
  width: 40rpx;
  height: 40rpx;
}
.changeLanguages {
  position: absolute;
  right: 30rpx;
  top: 0;
}
.paswwrod_btn {
  color: #666666;
  font-size: 26rpx;
  margin: 40rpx auto;
  text-align: center;
}
.btn {
  background-color: #fb3024;
  border: none;
  height: 92rpx;
  line-height: 92rpx;
  font-size: 36rpx;
  margin: 110rpx auto 0 auto;
}
.close-s {
  position: absolute;
  top: 35rpx;
  right: 40rpx;
  image {
    width: 25rpx;
    height: 25rpx;
  }
}
.right-s {
  position: absolute;
  top: 35rpx;
  right: 40rpx;
  image {
    width: 45rpx;
    height: 45rpx;
  }
}
.place-class {
  color: #333 !important;
}
.border-color {
  background: none;
  width: 100%;
  border: none;
  // margin-left: 30rpx;
}
.main {
  padding: 20rpx 40rpx;
}
.title {
  font-size: 52rpx;
  font-weight: bold;
  margin: 120rpx auto;
  text-align: center;
}
.view-class {
  // display: flex;
  background: #f2f2f2;
  border-radius: 46rpx;
  padding: 0 20rpx;
  // position: relative;
  margin-bottom: 30rpx;
}
.widths {
  image {
    width: 28rpx !important;
  }
}
.yzm {
  image {
    width: 26rpx !important;
    height: 30rpx !important;
  }
}
.account-s {
  display: flex;
  align-items: center;
  // line-height: 50%;
  height: 105rpx;
  position: absolute;
  // top: 38rpx;
  image {
    width: 34rpx;
    height: 34rpx;
  }
}
.tou {
  width: 34rpx;
  height: 34rpx;
}
.mm {
  width: 34rpx !important;
  height: 34rpx !important;
}
.eye {
  width: 45rpx !important;
  height: 45rpx !important;
  padding-top: 10px;
}
.pa {
  padding: 7px 20rpx;
}
</style>