<template>
  <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
    <FormItem prop="account">
      <Input v-model="form.account" placeholder="请输入用户名" size="large">
        <span slot="prepend">
          <Icon :size="16" type="ios-person"></Icon>
        </span>
      </Input>
    </FormItem>
    <FormItem prop="password">
      <Input type="password" v-model="form.password" placeholder="请输入密码" size="large">
        <span slot="prepend">
          <Icon :size="14" type="md-lock"></Icon>
        </span>
      </Input>
    </FormItem>
    <div>
      <!-- <p class="forgetPassword">忘记登录密码?</p> -->
      <Button class="forgetPassword" type="text" to="/forgetPassword" ghost>忘记登录密码?</Button>
    </div>
    <FormItem :error="loginErrMsg" >
      <vueTencentCaptcha :appid="appid" @callback="loginReq" ref="capt"></vueTencentCaptcha>
      <Button class="login-err" @click="handleSubmit" :type="loginBtnType" :loading="loginLoading" long>登录</Button>
    </FormItem>
    <div>
      <Button class="applyShop" type="text" ghost @click="applyShop">申请入驻</Button>
    </div>
  </Form>
</template>
<script>
import { mapMutations, mapActions, mapGetters } from 'vuex'
import { setUid, setAccount, setToken, setLocalStorage } from '@/libs/util'
export default {
  name: 'LoginForm',
  props: {
    accountRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ]
      }
    },
    passwordRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    },
    codeRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      }
    },
    loginErrMsg: {
      type: String,
      default: ''
    },
    loginBtnType: {
      type: String,
      default: 'primary'
    }
    // loginLoading: {
    //   type: Boolean,
    //   default: false
    // }
  },
  data () {
    return {
      form: {
        account: '',
        password: '',
        code: '',
        vKey: ''
      },
      codeSrc: '',
      // appid: '2094772907',
      appid: '2031161403',
      loginLoading: false
    }
  },
  computed: {
    rules () {
      return {
        account: this.accountRules,
        password: this.passwordRules,
        code: this.codeRules
      }
    }
  },
  methods: {
    ...mapMutations(['setAccount', 'setBrandId', 'setBrandPrefix', 'setToken', 'setUid', 'setType', 'setHeadImg']),
    applyShop () {
      this.$router.push('/applyShop')
    },
    handleSubmit () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loginLoading = true
          this.$refs.capt.$el.click()
          // this.$emit('loginLoading', this.loginLoading)
        }
      })
    },
    loginReq (res) {
      if (res.ret === 0) {
        let appManageParam = {
          account: this.form.account,
          password: this.form.password,
          rand: res.randstr,
          ticket: res.ticket,
          userIp: ''
        }
        let reqApi = 'login'
        // console.log('res', appManageParam)
        this.api({
          apiName: reqApi,
          postdata: appManageParam,
          success: res => {
            let { adminId, token, brandId, brandPrefix, type, headImg } = res.data
            this.setAccount(appManageParam.account)
            this.setBrandId(brandId)
            this.setBrandPrefix(brandPrefix)
            this.setUid(adminId)
            this.setToken(token)
            this.setType(type)
            this.setHeadImg(headImg)
            this.loginLoading = false
            this.$router.push({
              name: this.$config.homeName
            })
          },
          failed: () => {
            this.loginLoading = false
          },
          error: (res) => {
            console.log(res)
            setTimeout(() => {
              this.loginLoading = false
              this.loginBtnType = 'error'
              if (res instanceof Object) {
                this.loginErrMsg = res.msg + '！'
              } else {
                this.loginErrMsg = res + '!'
              }
            }, 500)
          }
        })
      }
    }
  },
  created () {
    // this.updateCode()
  }
}
</script>
<style>
  .ivu-form-item-error-tip{
    width: 100%;
    text-align: center;
  }
  .applyShop{
      width: 100%;
      height: 19px;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #666666;
      line-height: 24px;
      cursor:pointer;
      margin-top: 70px;
    }
    .forgetPassword{
        width: 100%;
        font-size: 13px;
        text-align: right;
        padding:0 10px 10px 0;
        color: #c3c3c3;
        cursor:pointer;
    }
    .login-err{
      width: 100%;
      height: 48px;
      position: absolute;
      top: 25px;
    }
</style>
