<template>
  <div>
    <a-alert
      v-if="isAlertShow"
      :class="$style.alert"
      :message="alertMessage"
      type="error"
      show-icon
    />
    <sd-form ref="form" :init-values="values" :class="$style.form">
      <template v-slot="{ model }">
        <sd-form-item
          name="userName"
          :label="null"
          :input-props="{ placeholder: '请输入您的帐户名' }"
        >
          <template v-slot:input-prefix>
            <a-icon type="sd-user" theme="filled" :class="$style.tubiao" />
          </template>
        </sd-form-item>
        <sd-form-item name="password" :label="null">
          <a-input-password
            v-model="model.password"
            placeholder="请输入您的密码"
            @keyup.enter="handleSubmit"
          >
            <a-icon slot="prefix" type="sd-lock" theme="filled" :class="$style.tubiao" />
          </a-input-password>
        </sd-form-item>
        <ext-input-area-after
          :login-data="model"
          @change="
            ({ value, valid } = { value: '', valid: true }) => {
              model.extension = value
              extensionValid = valid
            }
          "
        />
        <a-form-item>
          <a-button
            block
            type="primary"
            :loading="isSubmitting"
            :disabled="!model.userName || !model.password || !extensionValid"
            @click="handleSubmit"
          >
            登录
          </a-button>
        </a-form-item>
      </template>
    </sd-form>
  </div>
</template>

<script>
import { sdSessionStorage } from '@/common/services/storage-service'
import components from './_import-components/sd-login-form-import'
import LoginService from './login-service'
export default {
  name: 'SdLoginForm',
  metaInfo: {
    title: 'SdLoginForm',
  },
  components,
  data() {
    return {
      isSubmitting: false,
      isAlertShow: false,
      alertMessage: '用户名或密码错误',
      values: [
        {
          name: 'userName',
          caption: '用户名',
          dataType: 'string',
          required: true,
        },
        {
          name: 'password',
          caption: '密码',
          dataType: 'string',
          required: true,
        },
        {
          name: 'extension',
          caption: '扩展',
          dataType: 'string',
          required: true,
        },
      ],
      extensionValid: true,
    }
  },
  methods: {
    handleSubmit() {
      const extension = this.$refs.form.getFieldValue('extension')
      if (extension && typeof extension !== 'string') {
        throw new Error('ext-input-area-after通过chang事件提供的值必须为字符串类型')
      }
      return this.$refs.form.validateFields().then(() => {
        this.isSubmitting = true
        return LoginService.doLogin(
          this.$refs.form.getFieldValue('userName'),
          this.$refs.form.getFieldValue('password'),
          extension
        )
          .then((res) => {
            sdSessionStorage.setItem('loginName', this.$refs.form.getFieldValue('userName'))
            this.$emit('loginSuccess')
          })
          .catch((res) => {
            this.isAlertShow = true
            this.alertMessage = res.message
            this.isSubmitting = false
            return Promise.reject(res)
          })
      })
    },
    setFieldValue() {
      return this.$refs.form.setFieldValue(...arguments)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.form {
  :global(.ant-input) {
    height: 48px;
  }
  :global(.ant-btn-primary) {
    height: 38px;
  }
  :global(.ant-input:not(:first-child)) {
    padding-left: 40px;
  }
  :global(.ant-form-item .ant-form-item-control-wrapper) {
    float: none;
    width: auto;
  }
}
.tubiao {
  color: $primary-color;
}
</style>
