<template>
  <view class="containers">
    <view class="auth-header">
      <view class="auth-logo">
        <!-- <u-avatar size="100" icon="github-circle-fill" fontSize="100"></u-avatar> -->
        <image class="imgCss" src="@/static/images/empty/gas-logo.png" mode="widthFix"></image>
        <view class="welcomeTitleCss">
          欢迎登录
        </view>
        <view class="platformCss">
          市场洞察平台
        </view>
      </view>
    </view>

    <view class="auth-box">
      <!-- 登录方式选择 -->


      <!-- 登录表单 -->
      <u--form labelPosition="left" :model="formData" :rules="rules" ref="form">
        <u-form-item prop="username" ref="item-mobile">
          <u-input type="text" prefixIcon="account" maxlength="11" border="surround" shape="circle"
            v-model="formData.username" clearable placeholder="请输入您的用户名"></u-input>
        </u-form-item>

        <u-gap height="20"></u-gap>

        <u-form-item prop="password" ref="item-password">
          <u-input :type="inputType" prefixIcon="lock" maxlength="16" border="surround" shape="circle"
            v-model="formData.password" placeholder="请输入登录密码">
            <template slot="suffix">
              <u-icon v-if="inputType === 'password'" size="20" color="#666666" name="eye-fill"
                @click="inputType = 'text'"></u-icon>
              <u-icon v-if="inputType === 'text'" size="20" color="#666666" name="eye-off"
                @click="inputType = 'password'"></u-icon>
            </template>
          </u-input>
        </u-form-item>

        <view class="btn-group">
          <u-button class="auth-btn"  customStyle="margin-top: 50px" @click="handleSubmit">登录</u-button>
        </view>
      </u--form>
    </view>
  </view>
</template>

<script>
  import {
    passwordLogin
  } from '@/api/auth'

  export default {
    data() {
      return {
        currentModeIndex: 0,
        inputType: 'password',
        codeDisabled: false,
        codeTips: '',
        formData: {
          username: '',
          password: '',
        },
        rules: {
          username: {
            type: 'string',
            required: true,
            message: '请填写用户名',
            trigger: ['blur', 'change']
          },
          password: {
            type: 'string',
            required: true,
            message: '请填写登录密码',
            trigger: ['blur', 'change']
          },
        }
      }
    },
    onLoad() {},
    onReady() {
      // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
      this.$refs.form.setRules(this.rules)
    },
    methods: {
      handleSubmit() {
        this.$refs.form.validate().then(res => {
          let data = this.formData
          this.mobileLogin(data)

          // uni.login({
          //   provider: 'weixin',
          //   success: res => {
          //     let data = this.formData
          //     // data.socialType = 34 //WECHAT_MINI_APP 先指定固定值
          //     // data.socialCode = res.code
          //     // data.socialState = Math.random() // 该参数没有实际意义暂时传随机数
          //     this.mobileLogin(data)
          //   },
          //   fail: res => {
          //     this.mobileLogin(this.formData)
          //   }
          // })
        })
      },
      mobileLogin(data) {
        this.$store.dispatch('Login', {
          type: this.currentModeIndex,
          data: data
        }).then(res => {
          uni.$u.toast('登录成功')
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/market/index'
            })
          }, 300)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .auth-header {
    height: 600rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .auth-logo {
      margin: 200rpx 0 0 54rpx;

      .imgCss {
        width: 320rpx !important;
      }

      .welcomeTitleCss {
        margin-top: 80rpx;
        background-color: rgba(255, 255, 255, 0);
        box-sizing: border-box;
        font-family: '苹方 粗体', '苹方 中等', '苹方', sans-serif;
        font-weight: 700;
        color: #333333;
        text-align: left;
        line-height: normal;
        font-size: 48rpx
      }

      .platformCss {
        margin-top: 10rpx;
        background-color: rgba(255, 255, 255, 0);
        box-sizing: border-box;
        font-family: '苹方 中等', '苹方', sans-serif;
        color: #ababab;
        text-align: left;
        line-height: normal;
        font-size: 36rpx
      }
    }
  }

  .auth-box {
    @include flex-center(column);

    .mode-section {
      width: 600rpx;

      .subsection {
        height: 60rpx;
      }
    }

    .btn-group {
      width: 600rpx;

      .auth-btn {
        height: 90rpx;
        font-size: 32rpx;
        padding: 2px 2px 2px 2px;
        border-radius: 60px;
        background-color: #cf000d;
        box-sizing: border-box;
        font-family: '苹方 中等', '苹方', sans-serif;
        color: #ffffff;
        text-align: center;
        line-height: normal;
      }
    }
  }

  .u-input {
    height: 54rpx;
    background: #f5f7f7;
  }
</style>