<!--
 * @Author: jixiang
 * @Date: 2021-06-25 15:54:18
 * @LastEditTime: 2021-07-12 11:44:54
 * @LastEditors: Please set LastEditors
 * @Description: 登录页面
 * @FilePath: /vite_pc/src/views/login/userLogin.vue
 * 56580223@qq.com
-->

<template>
  <a-form layout="inline" :model="formState" @finish="handleFinish" :rules="rules">
    <a-form-item>
      <a-input v-model:value="formState.username" placeholder="Username">
        <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input v-model:value="formState.password" type="password" placeholder="Password">
        <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-button
        type="primary"
        html-type="submit"
        :disabled="formState.username === '' || formState.password === ''"
      >
        Log in
      </a-button>
    </a-form-item>
  </a-form>
  <div>欢迎你:{{ formState.username }}</div>
</template>

<script lang="ts">
  import { setStoreState, getStoreGetter } from '@/store/utils';
  import {
    defineComponent,
    reactive,
    UnwrapRef,
    getCurrentInstance,
    toRaw,
    ref,
    computed,
  } from 'vue';
  import { message } from 'ant-design-vue';

  import { StateType } from '@/@type';
  import { useStore } from 'vuex';
  import { useRoute, useRouter } from 'vue-router';

  // import { setCookie } from '@/utils/common'
  // import { SessionStorageService, LocalStorageService } from '@/utils/storage'
  import cookie from 'js-cookie';
  interface FormState {
    username: string;
    password: string;
    captcha: number;
  }
  export default defineComponent({
    setup() {
      const app = computed(() => store.state.app);
      const { ctx } = getCurrentInstance() as any;
      const router = useRouter();
      const route = useRoute();

      const store = useStore<StateType>();
      const formState: UnwrapRef<FormState> = reactive({
        username: 'admin',
        password: 'e10adc3949ba59abbe56e057f20f883e',
        captcha: 1111,
      });
      const handleFinish = (values: FormState) => {
        console.log(values, formState);

        store.dispatch('user/loginInfo', {
          userName: formState.username,
          password: formState.password,
        });

        // UserService.login({
        //   username: formState.username,
        //   password: formState.password,
        //   captcha: formState.captcha
        // }).then(res => {
        //   const { data, code, msg } = res.data
        //   if (code === 200) {
        //     message.success(msg)
        //     setStoreState('user', 'userInfo', data.loginInfo)
        //     setStoreState('user', 'token', data.token)
        //     // cookie.set('token', data.token)
        //     // setCookie('token', data.token, 6)
        //     // LocalStorageService.set('token', data.token)
        //     // SessionStorageService.set('token', data.token)

        //     const user = store.state.user.userInfo
        //     console.log(toRaw(user))
        //     const params = {
        //       year: 2021
        //     }
        //     UserService.getBatchList(params).then(res => {
        //       console.log(res)
        //     })
        //     // console.log(LocalStorageService.get('token'), 'sssss')
        //   }
        // })
      };
      const rules = {
        username: [
          {
            require: true,
            message: '请输入用户名',
            trigger: 'blur',
          },
        ],
        password: [
          {
            require: true,
            message: '请输入密码',
            trigger: 'blur',
          },
        ],
      };
      // const handleFinishFailed = (errors: ValidateErrorEntity<FormState>) => {
      //   console.log(errors)
      // }
      return {
        formState,
        handleFinish,
        rules,
        //   handleFinishFailed
      };
    },
    //   components: {
    //     UserOutlined,
    //     LockOutlined
    //   }
  });
</script>
