<template>
  <div class="binding-container">
    <div class="login-container" v-loading="loading_login">
      <div class="inner-login-container">
        <h3 style="margin-bottom: 30px;">采销365</h3>
        <el-form label-width="0px" style="margin-top:10px" ref="formRef" :model="formData" :rules="rules">
          <el-form-item label="" prop="username">
            <el-input  size="medium" v-model="formData.username" placeholder="账号" maxlength="11">
              <template slot="prefix">
                <i class="el-icon-user" style="padding-left:5px;color:#087af5"></i>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input size="medium" type="password" v-model="formData.password" placeholder="密码">
              <template slot="prefix">
                <i class="el-icon-key" style="padding-left:5px;color:#087af5"></i>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <div style="display: flex;gap:10px">
              <div class="button" style="background-color: #087af5;border-color:#087af5;width: 100%;"  @click="submit(false)">
                <img style="height:20px;width:20px;margin:0 2px 0 5px;" src="~@/assets/phone.png" />
                <span style="font-weight: 600;">登录</span>
              </div>

              <div class="button" style="background-color: #07c160;width:100%" v-if="isWx"  @click="submit(true)">
                <img style="height:20px;width:20px" src="~@/assets/wechat.png" />
                <span style="font-weight: 600;">授权登录</span>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import asyncRequest from "@/api"
import { isnumber, isAlphanumeric, validAlphabets, isMobile } from '@/utils/validate'
import { getParameterByName } from "@/utils/auth"
export default {
  props: ["openid", "template", "isWx"],
  data() {

    const validateUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('手机号不能为空！'))
      } else {
        if (!isMobile(value)) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空！'))
      } else {
        if (!isAlphanumeric(value)) {
          callback(new Error('密码为6-18位数字字母组合！'))
        } else if (value.length < 6 || value.length > 18) {
          callback(new Error('密码为6-18位数字字母组合！'))
        } else if (isnumber(value)) {
          callback(new Error('密码不能为纯数字！'))
        } else if (validAlphabets(value)) {
          callback(new Error('密码不能为纯字母！'))
        } else {
          callback()
        }
      }
    }

    return {
      visible: false,
      template: "",
      isMobile: true,
      ol: false,
      maxHeight: null,
      loading: false,
      loading_login:false,
      currentAccount: {},
      isMobile: false,
      formData: {
        username: "",
        password: ""
      },
      rules: {
        username: [{ required: true, trigger: 'change', validator: validateUsername }],
        password: [{ required: true, trigger: 'change', validator: validatePassword }],
      }
    }
  },
  created() {
    document.title = "采销365"
  },
  beforeDestory() {
    document.title = ""
  },
  methods: {
    toLogin() {
      const back = getParameterByName("back")
      window.location.href = back + "/?from=authorization";
    },
    handleChange(value) {
      const item = this.accounts.find(({ value: oV }) => oV === value)
      this.formData = { id: item.value, phone: item.mobile, lastCode: "" }
    },
    async submit(hasOpenId) {
      try {
        await this.$refs.formRef.validate();
        const { username, password } = this.formData;
        this.loading_login = true
        const result = await asyncRequest.login({
          ...({ password, username, }),
          ...(hasOpenId ? { openId: this.openid} : {})
        })
        this.loading_login = false;
        if (result.code === 0) {
          this.$emit("bind", result.data.token);
        } else {
          this.$message.error(result.message)
        }

      } catch (err) {
        console.log(err)
      }
    },
    async requestUserList(qs) {
      this.ol = true
      const result = await asyncRequest.accountQuery({ openId: this.openid, nickname: qs })
      this.ol = false;

      const { code, data } = result;
      if (code === 0) {
        const { list } = data;
        this.accounts = list.map(({ id, nickname, mobile, is_wx, status }) => ({
          value: id,
          label: nickname,
          mobile,
          is_wx,
          status
        }))

      } else {
        this.accounts = []
      }
    },
  }
}
</script>


<style lang="scss" scoped>
.binding-container {
  align-items: center;
  position: fixed;
  top: 0%;
  width: 100vw;
  height: 100vh;
  background: url("~@/assets/bg-phone.jpg") no-repeat;
  background-size: cover;

  .login-container {

    h3 {
      text-align: center;
      color: #087af5;
      line-height: 20px;

      &:first-child {
        margin-top: 30px;
      }
    }

    width: 320px;
    background:#fff;
    box-sizing: border-box;
    padding: 10px 35px;
    position: absolute;

    .button {
      height: 40px;
      width: 80%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      line-height: 40px;
      color: #fff;
      border-radius: 80px;
      cursor: pointer;
      user-select: none;

      img {
        margin: 0 5px 0 0px;
      }
    }

    /deep/ .el-form-item {
      width: 250px;
    }

    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    border-radius:10px;
  }
}
</style>
