<template>
  <div class="page">
    <h3 class="page-title">欧畅云支付</h3>
    <div class="content">
      <h3 class="left">请登录</h3>
      <p class="title left">请登录欧畅云账号</p>
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <div class="left">登录账号</div>
        <a-form-item
          labelAlign="left"
          name="username"
          class="input"
          :rules="[{ required: true, message: '请输入邮箱号' }]"
        >
          <a-input
            v-model:value="formState.username"
            placeholder="请输入邮箱号"
          />
        </a-form-item>
        <div class="left">登录密码</div>
        <a-form-item
          labelAlign="left"
          name="password"
          class="input"
          :rules="[{ required: true, message: '请输入登录密码' }]"
        >
          <a-input-password
            v-model:value="formState.password"
            placeholder="请输入登录密码"
            :bordered="false"
          />
        </a-form-item>
        <div class="left mb10">
          <a-radio v-model:checked="checked"></a-radio>点击同意《<span
            @click="onAgreement"
            style="color: blueviolet"
            >服务条款</span
          >》
        </div>
        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            @click="onSubmit"
            style="
              margin-left: 20px;
              width: 350px;
              height: 50px;
              border: blueviolet;
            "
            :loading="loading"
            >登录</a-button
          >
        </a-form-item>
      </a-form>
      <div class="resg">
        <div class="left">还没有账号?</div>
        <div style="color: blueviolet" @click="onRegister">去注册</div>
      </div>
    </div>
    <footer class="bottom">欧畅云提供技术支持</footer>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { defineExpose, reactive, ref, toRaw } from "vue";
import { onLogin } from "@/api/index";
import { message } from "ant-design-vue";
import { useStore } from "vuex";
import { setToken } from "@/utils/token";
import { setUserInfo,setUid,onSetRouter } from "@/utils/userInfo";

interface FormState {
  username: string;
  password: string;
}
     const routet =ref<any>({
    path: '/home',
    name: 'Home',
    component: ()=>import('@/views/home/index.vue'),
    redirect:'/home/paybind',
    children:[
      {
        path:'/home/page',
        component:  ()=>import('@/views/home/page/index.vue'),
        meta:{
          iconfont:'icon-fencengpeizhi'
        },
        redirect:'/home/page/paybind',
        children:[
          {
            path: '/home/page/paybind',
            name: 'PayBind',
            component:  ()=>import('@/views/home/page/pay-bind/index.vue')
          },
          {
            path: '/home/page/payconfig',
            name: 'PayConfig',
            component:  ()=>import('@/views/home/page/pay-config/index.vue')
          },
        ]
      },
      {
        path: '/home/goodscabinet',
        name: 'GoodsCabinet',
        meta:{
          iconfont:'icon-shangpin'
        },
        component:  ()=>import('@/views/goods-cabinet/index.vue')
      },
      {
        path: '/home/paylist',
        name: 'PayList',
        meta:{
          iconfont:'icon-zhifubao'
        },
        component:  ()=>import('@/views/pay-list/index.vue')
      },
    ]
  })
const checked = ref<boolean>(false);
const loading = ref<boolean>(false);
const router = useRouter();
const store = useStore();
const formState = reactive<FormState>({
  username: "",
  password: "",
});

const onFinish = (values: object) => {
  console.log("Success:", values);
};

const onFinishFailed = (errorInfo: object) => {
  console.log("Failed:", errorInfo);
};
const onSubmit = async () => {
  const user = {
    name: toRaw(formState).username,
    password: toRaw(formState).password,
  };
  if (checked.value) {
    const data: any = await onLogin(JSON.stringify(user));
    console.log(data,'data');
    loading.value = true
    if (data.message === "ok" && data.state === 1) {
      setUserInfo(user);
      setUid(data.data.uid)
      setToken(data.data.session_id);
  
  onSetRouter(routet.value);

      router.push({
        path: "/home",
      });
    } else {
       loading.value = false
      message.warning(data.data);
    }
  } else {
    message.warning("请勾选同意下方的服务协议");
  }
};
const onRegister = () => {
  window.open("https://testmanager.finezb.com/#/./user/register", "_blank");
};
const onAgreement = () => {
  window.open("https://xs-legal.finezb.com/service.html", "_blank");
};
defineExpose({
  formState,
  checked,
  loading,
  onFinish,
  onFinishFailed,
  onSubmit,
  onRegister,
  onAgreement,
});
</script>
<style scoped lang="less">
.page {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  .page-title {
    position: fixed;
    top: 10%;
    left: 30%;
    font-family: SourceHanSansSC;
    font-weight: 700;
    font-size: 28px;
    font-style: normal;
    letter-spacing: 0px;
    line-height: 41px;
    text-decoration: none;
    color: blueviolet;
  }

  .content {
    width: 400px;
    height: 450px;
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    h3 {
      line-height: 60px;
      height: 50px;
      font-weight: 900;
    }

    p {
      opacity: 0.8;
    }

    .title {
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      opacity: 0.67;
    }

    .input {
      width: 530px;
      margin-left: 20px;
      height: 40px;
      text-align: center;
      margin-bottom: 20px;

      .ant-input {
        height: 40px;
        background: rgb(245, 247, 250);
      }

      #basic_password {
        height: 40px;
        background: rgb(245, 247, 250);
      }

      .ant-input-password {
        height: 40px;
        background: rgb(245, 247, 250);
      }
    }

    ::placeholder {
      text-align: center;
      font-size: 14px;
    }
  }

  .left {
    text-indent: 20px;
    text-align: left;
  }

  .resg {
    display: flex;
  }

  .bottom {
    position: fixed;
    font-family: SourceHanSansSC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(153, 153, 153, 1);
    font-style: normal;
    letter-spacing: 0px;
    line-height: 20px;
    text-decoration: none;
    bottom: 5%;
  }
}
</style>
<style lang="less">
.page {
  .ant-input-affix-wrapper > input.ant-input {
    background: rgb(245, 247, 250);
  }

  span.ant-radio + * {
    text-align: left;
    margin-left: 0px;
  }

  .mb10 {
    margin-bottom: 10px;
  }
}
</style>
