<template>
  <div class="login-a">
    <div class="toper-box">
      <div>
        
      </div>
    </div>

    <div class="login-box">
      <div class="login-ad">
        <img v-if="logoAd" :src="logoAd" />
      </div>
      <div class="subfrom">
        <div class="title">欢迎登录SUCCESS</div>
        <t-form ref="formDom" class="form" :rules="FORM_RULES" :data="formData" label-width="0">
          <t-form-item name="account">
            <!-- <t-input v-if="!isDev" v-model="formData.account" size="large" type="text" placeholder="请输入用户名">
              <template #prefix-icon>
                <user-icon />
              </template>
            </t-input>

            <t-select v-else v-model="formData.account" placeholder="请选择" size="large" :clearable="false" :options="devOptions" /> -->
            <t-input v-model="formData.account" size="large" :maxlength="30" type="text" placeholder="请输入用户名">
              <template #prefix-icon>
                <user-icon />
              </template>
            </t-input>
          </t-form-item>
          <t-form-item name="password">
            <t-input v-model="formData.password" size="large" :maxlength="20" type="password" placeholder="请输入密码">
              <template #prefix-icon>
                <UserPasswordIcon />
              </template>
            </t-input>
          </t-form-item>
          <t-form-item name="code">
            <t-input v-model="formData.code" size="large" type="text" style="width: 160px" :maxlength="4" placeholder="请输入验证码">
              <template #prefix-icon>
                <location-icon />
              </template>
            </t-input>
            <img class="code" :src="src" @click="doGetCaptcha" />
          </t-form-item>
          <t-form-item>
            <t-button type="primary" :disabled="!agreenStatus" :loading="loading" size="large" block @click="handleSubmit">登 录</t-button>
          </t-form-item>
          <t-form-item>
            <t-checkbox v-model="agreenStatus">使用该系统表示同意</t-checkbox><t-button variant="text" style="color: #0275E8;">《用户协议和保护条款》</t-button>
          </t-form-item>
        </t-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'FxModelLogin'
}
</script>
<script setup lang="ts">
import { Data, DialogPlugin, FormRules} from 'tdesign-vue-next';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const props = defineProps({
  config: {  // 配置项
    type: Object,
    default: {},
  },
});

const { config } = props

const formData = ref({
  account: '',
  password: '',
  code: '',
  ukeyCode: '',
  passwordTokenCode: '',
});

const FORM_RULES = ref<FormRules<Data>>({
  account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' },
            { min: 8, message: '至少输入8位密码',  type: 'error', trigger: 'blur', }
  ],

  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
});
const logoAd = ref(null);
const agreenStatus = ref(true)
const loading = ref(false);
const src = ref(
  'data:image/png;base64,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',
);
const doGetCaptcha = () => {
  // api.auth.captcha().then((data) => {
  //   console.log('data', data);
  //   src.value = data;
  //   formData.value.code = '';
  // });
  config.api.request(config.url.checkCode, config.coverter).then((data)=>{
    console.log("data", data)
     src.value = data; 
    // pageType.value = res.pageModel
  })

};
const formDom = ref(null);
const handleSubmit = () => {
  // console.log("ttt")
  formDom.value.validate().then((valid: boolean) => {
    if (valid === true) {
      console.log("15263")
      doSubmit();
    }
  });
};

const doSubmit = () => {
  
  config.url.formSubmit.data = {...formData.value}
  console.log("config.url.formSubmit", config.url.formSubmit)
   config.api.request(config.url.formSubmit, config.coverter).then((data)=>{
    console.log("data", data)
    router.push('/home')
    
    // pageType.value = res.pageModel
  }).catch((err)=>{
    console.log("err", err)
  }).finally(()=>{
    
  })

};
// const doSubmit_Bak = () => {
//   loading.value = true;
//   api.auth.login(formData.value)
//     .then((data) => {
//       console.log('data', data);
//       localStorage.setItem('token', data.accessToken)
//       if (data && data.accessToken && data.refreshToken) {
//         const tokenResult = {
//           AccessToken: data.accessToken,
//           RefreshToken: data.refreshToken,
//           ExpiresIn: parseInt(data.expireTime), // 单位秒
//         };
//         apiClient.tokenProvider.put(tokenResult);
//         if (data.isForceUpdatePwd){
//           formData.value.passwordTokenCode=''
//           resetPasswordRef.value.open(data.forceUpdatePwdTips);
//           //doGetCaptcha();
//           formData.value.password = "";
//           loading.value = false;
//         } else {
//           doGetUserMenu();
//         }
//       } else {
//         submitDataHandler(data);
//       }
//     })
//     .catch(() => {
//       doGetCaptcha();
//     })
//     .finally(() => {
//       loading.value = false;
//       formData.value.passwordTokenCode = ''
//     })

// };


onMounted(()=>{
  console.log("LoginIndex", config.value)
  doGetCaptcha()
})

</script>

<style lang="less" scoped>

</style>
