<!--
 * @Author: Jason Liu
 * @Date: 2022-04-01 13:17:41
 * @Desc: 
-->
<template>
  <div
    class="login_container"
    :style="$service.loginConfig.body"
  >
    <set-lang-button />
    <div class="login_loge">
      <img
        :src="$service.loginConfig.logoIcon"
        v-if="$service.loginConfig.showLogo"
      />
    </div>
    <div class="login_user_card">
      <p class="welcome_title">{{ $t($service.loginConfig.title) }}</p>
      <p class="welcome_desc">{{ $t($service.loginConfig.desc) }}</p>

      <a-tabs class="login_tab">
        <a-tab-pane
          key="1"
          :tab="$t('账号登录')"
        >
          <a-form-model
            :model="form"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :rules="rules"
            ref="userFrom"
          >
            <a-form-model-item prop="username">
              <a-input
                v-model.lazy="form.username"
                @change="getHospitalInfo"
                :placeholder="$t('login_username')"
                allowClear
              >
                <template slot="prefix">
                  <win-icon type="icon_user" />
                </template>
              </a-input>
            </a-form-model-item>
            <a-form-model-item prop="password">
              <a-input-password
                v-model="form.password"
                :placeholder="$t('login_userpassword')"
                allowClear
                autocomplete
                @pressEnter="onSubmit"
              >
                <template slot="prefix">
                  <win-icon type="icon_password" />
                </template>
              </a-input-password>
            </a-form-model-item>
            <a-form-model-item prop="orgId">
              <win-icon
                type="icon_campus"
                class="icon_campus"
              />
              <!--<a-select-->
              <!--placeholder="请选择院区"-->
              <!--:loading="hospitalloading"-->
              <!--:options="hospitallist"-->
              <!--v-model="form.orgId"-->
              <!--&gt;-->
              <!--</a-select>-->
              <vxe-select
                v-model="form.orgId"
                :placeholder="$t('请选择院区')"
                :options="hospitallist"
                :loading="hospitalloading"
                clearable
                filterable
              />
            </a-form-model-item>
            <a-form-model-item
              prop="code"
              v-if="isCode == 1"
            >
              <div class="code_item">
                <a-input
                  v-model.lazy="form.code"
                  :placeholder="$t('请输入验证码')"
                  allowClear
                >
                  <template slot="prefix">
                    <win-icon
                      type="icon_code"
                      class="code_icon"
                    />
                  </template>
                </a-input>
                <div
                  class="login_code"
                  @click="getCaptchaImage"
                >
                  <img
                    class="code_img"
                    :src="codeImg"
                  />
                </div>
              </div>
            </a-form-model-item>
            <a-row class="login_hellp">
              <a-col :span="12">
                <a-checkbox
                  v-model="isCache"
                  @change="setCache"
                >
                  {{ $t('记住密码') }}
                </a-checkbox>
              </a-col>
              <a-col :span="12">
                <a-button
                  type="link"
                  v-if="false"
                  >忘记密码？</a-button
                >
              </a-col>
            </a-row>
            <a-form-model-item :wrapper-col="{ span: 24 }">
              <a-button
                type="primary"
                class="login_button"
                @click="onSubmit"
                :loading="loading"
              >
                {{ $t('登录') }}
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </a-tab-pane>
      </a-tabs>
    </div>
    <span class="span_copyright"> {{ $t('copyright') }}</span>
  </div>
</template>

<script type="text/javascript" src="./service.js"></script>

<style lang="less" scoped>
  .login_container {
    width: 100vw;
    height: 100vh;
    // background: url("../../assets/images/login_back.png") no-repeat;
    //background: url("../../assets/images/bg_dna.jpg") no-repeat;
    background-size: 100% 100%;
    position: relative;
    min-width: 1440px;
    min-height: 810px;

    .login_loge {
      width: auto;
      height: 45px;
      margin: 68px 68px;
      display: inline-block;
      position: absolute;
      img {
        width: 100%;
      }
    }

    .login_user_card {
      width: 490px;
      // height: 640px;
      padding: 42px;
      background: #ffffff;
      box-shadow: 0px 3px 20px 0px rgba(59, 102, 255, 0.36);
      border-radius: 4px;
      display: inline-block;
      position: absolute;
      right: 60px;
      top: 50%;
      margin-top: -300px;

      .welcome_title {
        font-size: 32px;
        font-weight: 500;
        color: #181818;
        margin-bottom: 5px;
      }

      .welcome_desc {
        font-size: 20px;
        font-weight: 400;
        color: #767676;
      }

      /deep/.ant-form-explain {
        padding: 5px 30px;
        position: absolute;
        z-index: 1;
        background: rgba(245, 34, 45, 0.9s);
        color: #fff;
        border-radius: 30px;
        right: 30px;
        top: 40px;
      }

      .loge_toggle {
        position: absolute;
        z-index: 1;
        width: 64px;
        height: 64px;
        background: linear-gradient(
          45deg,
          #fff,
          #fff 50%,
          rgba(33, 72, 131, 0.3) 50%,
          rgba(33, 72, 131, 0.2) 60%,
          rgba(33, 72, 131, 0.1) 68%,
          rgba(33, 72, 131, 0.05) 90%
        );
        top: 10px;
        right: 10px;
        text-align: right;
        font-size: 22px;
        padding-right: 8px;
      }

      .login_tab {
        margin-top: 20px;
        overflow: unset;
        /deep/.ant-tabs-bar {
          margin-bottom: 0;
        }
        /deep/.ant-tabs-nav {
          width: 100%;
          .ant-tabs-tab {
            width: 33.33%;
            margin: 0;
            text-align: center;
            font-size: 22px;
            font-weight: 400;
            color: #5b5b5b;
            line-height: 35px;

            &.ant-tabs-tab-active {
              color: #000000;
            }

            .ant-tabs-ink-bar-animated {
              background: #000000;
            }
          }
        }
      }
      /deep/.ant-form .ant-form-item {
        margin-bottom: 0;
      }
      .login_button {
        margin-top: 60px;
        width: 100%;
        height: 60px;
        line-height: 42px;
        font-size: 22px;
        font-weight: 500;
        border-radius: 42px;
      }
      /deep/.ant-input,
      /deep/.ant-select {
        border: 0;
        border-radius: 0;
        border-bottom: 2px solid #cbcbcb;
        font-size: 16px;
        font-weight: 400;
        height: 56px;
        line-height: 56px;
        padding-left: 42px;
        &.ant-select {
          padding-left: 30px;
        }
        &:focus {
          box-shadow: none;
        }
        .ant-select-selection {
          border: 0;
          box-shadow: none;
          height: 54px;
          line-height: 54px;

          .ant-select-selection__rendered {
            line-height: inherit;
          }
          .ant-select-arrow {
            font-size: 16px;
          }
        }
      }
      /deep/.vxe-select {
        width: 100%;
        height: 56px;
        line-height: 56px;
        padding-left: 42px;
        font-size: 16px;
        border: 0;
        border-radius: 0;
        border-bottom: 2px solid #cbcbcb;
        > .vxe-input {
          border: 0;
          .vxe-input--inner {
            padding-left: 0;
            font-size: 16px;
            border: 0;
          }
          .vxe-input--suffix {
            right: 10px;
          }
        }
        .vxe-select--panel-search {
          line-height: 34px;
        }
        [class*='vxe-icon-'] {
          font-size: 18px;
        }
      }
      .icon_campus {
        position: absolute;
        font-size: 20px;
        top: 50%;
        margin-top: -10px;
        left: 10px;
        z-index: 1;
      }
      /deep/.ant-input-suffix {
        i {
          font-size: 18px;
        }
      }
      /deep/.ant-input-affix-wrapper {
        .ant-input-prefix {
          font-size: 18px;
        }
      }

      .login_hellp {
        margin-top: 16px;
        .ant-checkbox-wrapper {
          font-size: 14px;
          font-weight: 500;
          color: #2e65ca;

          .ant-checkbox-inner {
            border-width: 1px;
          }
        }

        .ant-btn-link {
          float: right;
          font-size: 14px;
          font-weight: 500;
          color: #5b5b5b;
          padding: 0;
          height: initial;
        }
      }

      .certificate_body {
        width: 100%;
        display: inline-block;
        padding: 0 50px;
        img {
          width: 100%;
        }
      }
    }

    /deep/.ant-form-explain {
      padding: 5px 30px;
    }

    .span_copyright {
      font-size: 15px;
      font-weight: 500;
      color: #ffffff;
      position: absolute;
      bottom: 10px;
      left: 10px;
      right: 10px;
      text-align: center;
      opacity: 0.4;
    }
    .code_item {
      display: flex;
      /deep/.ant-input-affix-wrapper {
        flex: 1;
      }
      .login_code {
        width: 115px;
        cursor: pointer;
      }
      .code_icon {
        color: #8599c0;
      }
    }
  }
</style>
