<template>
  <Form ref="loginForm" :model="form" :rules="rules" @submit.native.prevent>
    <FormItem prop="userName">
      <Input v-model="form.userName" :placeholder="this.usernamehold">
        <span slot="prepend">
          <Icon :size="16" type="ios-person"></Icon>
        </span>
      </Input>
    </FormItem>
    <FormItem prop="password">
      <Input
        type="password"
        ref="password"
        autocomplete="off"
        v-model="form.password"
        :placeholder="this.passwordhold"
        @submit="handleSubmit"
      >
        <span slot="prepend">
          <Icon :size="14" type="md-lock"></Icon>
        </span>
      </Input>
    </FormItem>
    <div class="verification_code" v-show="showCode">
      <FormItem prop="verification">
        <Input
          type="text"
          class="verification"
          autocomplete="off"
          v-model="form.verification"
          placeholder="验证码"
          @submit="handleSubmit"
        >
        </Input>
        <div style="width: 40%; height: 32px; float: left">
          <div @click="createdCode" class="verification_photo">
            {{ checkCode }}
          </div>
        </div>
      </FormItem>
    </div>

    <FormItem>
      <button
        @click.prevent="handleSubmit"
        type="submit"
        long
        class="login_btn"
      >
        {{ this.$t("100352") }}
      </button>
    </FormItem>
  </Form>
</template>
<script>
  export default {
    data() {
      return {
        code: "",
        checkCode: "",
        picLyanzhengma: "",
        usernamehold: this.$t("99200037"),
        passwordhold: this.$t("99200038"),
        usernamerequired: this.$t("99200034"),
        form: {
          userName: "",
          password: "",
          verification: "",
        },
      };
    },
    name: "LoginForm",
    props: {
      userNameRules: {
        type: Array,
        default: () => {
          return [{required: true, message: "请输入用户名", trigger: "blur"}];
        },
      },
      passwordRules: {
        type: Array,
        default: () => {
          return [{required: true, message: "请输入密码", trigger: "blur"}];
        },
      },
      showCode: {
        type: Boolean,
      },
    },
    computed: {
      rules() {
        return {
          userName: this.userNameRules,
          password: this.passwordRules,
        };
      },
    },
    methods: {
      handleSubmit() {
        if (this.showCode) {
          var code = this.checkCode;
          var inputcode = this.form.verification;
          if (code.toUpperCase() != inputcode.toUpperCase()) {
            this.$Message.error(this.$t("verificationerror"));
            return;
          }
        }

        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.$emit("on-success-valid", {
              userName: this.form.userName,
              password: this.form.password,
            });
          }
        });
      },
      createdCode() {
        // 先清空验证码输入
        this.code = "";
        this.checkCode = "";
        this.picLyanzhengma = "";
        // 验证码长度
        const codeLength = 4;
        // 随机数
        const random = new Array(
          0,
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          "A",
          "B",
          "C",
          "D",
          "E",
          "F",
          "G",
          "H",
          "I",
          "J",
          "K",
          "L",
          "M",
          "N",
          "O",
          "P",
          "Q",
          "R",
          "S",
          "T",
          "U",
          "V",
          "W",
          "X",
          "Y",
          "Z"
        );
        for (let i = 0; i < codeLength; i++) {
          // 取得随机数的索引(0~35)
          let index = Math.floor(Math.random() * 36);
          // 根据索引取得随机数加到code上
          this.code += random[index];
        }
        // 把code值赋给验证码
        this.checkCode = this.code;
      },
      warning(msg) {
        this.$Modal.warning({
          title: "提示",
          content: "<p>" + this.$t(msg) + "</p>",
        });
      },
    },
    created() {
      this.createdCode();
    },
  };
</script>
<style lang="less" scoped>
  .login_btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.5;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 5px 15px 6px;
    font-size: 12px;
    border-radius: 4px;
    outline: 0;
    width: 100%;
    color: #fff;
    border-color: #2d8cf0;
    background: url(../../static/images/login_btn.png) no-repeat;
    background-size: 100% 100%;
  }

  .verification {
    width: 58%;
    float: left;
    margin-right: 2%;
  }

  .verification_photo {
    width: 100%;
    letter-spacing: 7px;
    height: 32px;
    text-align: center;
    border: 1px solid #dcdee2;
    background: aliceblue;
  }
</style>
