<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: "",
      templateId: "1002", // 默认测试模版
      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() {
    // 生产环境
    if (window.origin == "https://health.medilink-global.com.cn") {
      console.log("生产环境id", window.origin);
      this.templateId = "1009";
    }
    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: this.templateId, //暂时写死的
      };
      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: this.templateId, //使用"体检卡口令"登陆,目前只有一种登陆方式,是写死的,后边会使用配置
            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,
                    logo: this.logo,
                  },
                });
              }, 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;
    }
  }

  .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;
          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>
