<template>
  <div class="login">
    <div class="header">
      <img :src="logo" alt />
    </div>
    <div class="center">
      <div class="left">
        <img :src="left" alt />
      </div>
      <div class="right">
        <div class="logo">
          <img :src="logo" alt />
        </div>
        <div class="tips">健康服务预约</div>
        <div class="form">
          <a-form
            id="components-form-demo-normal-login"
            :form="form"
            class="login-form"
            @submit="handleSubmit"
          >
            <a-form-item>
              <a-input
                v-decorator="[
                  'userName',
                  {
                    rules: [
                      {
                        required: true,
                        message: userNameHolder,
                      },
                    ],
                  },
                ]"
                :placeholder= 'userNameHolder'
              >
                <a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input
                v-decorator="[
                  'password',
                  {
                    rules: [
                      {
                        required: true,
                        message: passwordHolder,
                      },
                    ],
                  },
                ]"
                type="password"
                :placeholder="passwordHolder"
              >
                <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <!-- :disabled="isSub" -->
              <a-button type="primary" html-type="submit" class="login-form-button">登陆</a-button>
            </a-form-item>
          </a-form>
          <div class="concat">
            <!-- 如果遇到操作问题，请拨打椋鸟健康热线
            <span class="code">400-820-6523</span> -->
            <img :src="downImg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/login";
export default {
  name: "login",
  components: {},
  data() {
    return {
      logo:"",
      left: require("../../assets/imgs/login/left-bg.png"),
      downImg:'',
      isSub: true,
      passwordHolder:"",
      userNameHolder:"",
      fields:[],
      loading: false //是否显示loading
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "normal_login" });
  },
  created() {
    // let url = location.href;
    // let splitParmsArr = url.split("/");
    // let idParms = splitParmsArr.slice(-1)[0];

    this.getLoginConfigFn();
  },
  methods: {
    isNumber(val) {
      //判断是否是数字
      var regPos = /^\d+(\.\d+)?$/; //非负浮点数
      var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
      if (regPos.test(val) && regNeg.test(val)) {
        return true;
      } else {
        return false;
      }
    },
    // 控制提交是否可用
    subState() {
      this.isSub = false;
    },
    getLoginConfigFn() {
      const query = {
        id: "1002" //暂时写死的
      };
      api.getLoginConfig(query).then(res => {
        if(res.returnCode == '0000'){ //logo 配置
          if(res.content.loginUp&&res.content.loginUp[0]){
            this.logo = res.content.loginUp[0].url
            this.logo = res.content.loginUp[0].url
          }
          if(res.content.loginDown&&res.content.loginDown[0]){ //电话说明配置
            this.downImg = res.content.loginDown[0].url
          }
          if(res.content.lnhConfigs){
            let lnhConfigs = res.content.lnhConfigs
            this.fields = lnhConfigs
            this.userNameHolder = `请输入`+lnhConfigs[0].remark
            this.passwordHolder = `请输入`+lnhConfigs[1].remark
          }
        }
      });
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("登陆values=", values);
          const query = {
            id: "1002", //使用"体检卡口令"登陆,id必须是'1002',目前只有一种登陆方式,是写死的,后边会使用配置
            fields: [
              {
                fieldName: this.fields[0].remark,
                value: values.userName,
                field: this.fields[0].field
              },
              {
                fieldName:  this.fields[1].remark,
                value: values.password,
                field:  this.fields[1].field
              }
            ]
          };
          api.userLogin(query).then(res => {
            console.log(res);
            if (res.returnCode == "0000") {
              console.log("登陆成功");
              // 显示登陆成功-并跳转到index页面
              this.$message.success("登陆成功");
              setTimeout(() => {
                // 需要获取用户id
                this.$router.push({
                  name: "Index",
                  query: {
                    id: res.content.id
                  }
                });
              }, 1000);
            } else {
              this.$message.error(res.returnMsg);
            }
          });
          console.log("Received values of form: ", values);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.login {
  min-height: 100vh;
  background: url(../../assets/imgs/login/bg.png) 100%;

  .header {
    padding: 2.5px 21.5px;
    background: rgba(225, 225, 225, 0.32);
    img{
      width: 70px;
      height: 50px;
    }
  }

  .center {
    display: flex;
    justify-content: center;
    margin: 69.5px auto;

    .left {
      img {
        width: 320.5px;
      }

      position: relative;
      left: 27.5px;
      top: 58px;
    }

    .right {
      padding-bottom: 38px;
      position: relative;
      right: 27.5px;

      .tips {
        text-align: center;
        margin-bottom: 23.5px;
        margin-top: 5px;
        font-family: Microsoft YaHei;
        font-weight: 600;
      }

      .logo {
        width: 115.5px;
        height: 44.5px;
        background: url("../../assets/imgs/login/right-bg.png");
        background-size: 100% 100%;
        text-align: center;
        margin: 0 auto;

        img {
          width: 40px;
          height: 29.7px;
          position: relative;
          top: 7px;
        }

        position: relative;
        top: -21px;
      }

      width: 340px;
      background: #ffffff;
      box-shadow: 0px 7px 14px 1px rgba(214, 207, 194, 0.14);
      border-radius: 12px;

      .concat {
        font-size: 12px;
        text-align: center;
        transform: scale(0.8);

        .code {
          color: #3f7ffb;
        }
        img{
          width: 100%;
        }
      }

      .form {
        ::v-deep .ant-form {
          .ant-input {
            font-size: 12px;
          }

          width: 260.8px;
          margin: 0 auto;

          .login-form-button {
            width: 96%;
            position: relative;
            left: 2%;
          }
        }
      }
    }
  }
}
</style>