<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 routers = 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(routers.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,
  routers,
  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>
