<template>
  <div class="login-main column no-wrap q-px-lg q-py-lg">
    <h4 class="text-bold q-mb-sm" style="color:#ffefba">云朵小店</h4>
    <p class="text-bold text-white text-h5 q-mb-xl">
      为您打造专属店铺品牌
    </p>
    <q-card class="login-form">
      <!-- DELAY 短信验证码登陆 -->
      <!-- <q-card-section>
        <div class="text-h6">密码登录</div>
      </q-card-section> -->
      <q-card-section>
        <q-form
          @submit.prevent.stop="register"
          class="q-gutter-y-sm"
          ref="formRef"
        >
          <q-input
            v-model="phone"
            lazy-rules
            :rules="[
              (val) =>
                (val && val.length > 0 && val.match(/^(0)?1\d{10}$/)) ||
                '请输入手机号'
            ]"
            name="phone"
            autocomplete="phone-new"
            placeholder="请输入手机号"
            label="手机号"
          >
          </q-input>
          <q-input
            type="password"
            name="password"
            autocomplete="phone-new"
            v-model="password"
            lazy-rules
            :rules="[
              (val) =>
                (val !== null && val !== '' && val.length > 3) ||
                '请输入密码'
            ]"
            label="密码"
            placeholder="请输入密码"
          >
          </q-input>
          <q-input
            type="password"
            name="password2"
            autocomplete="phone-new"
            v-model="password_confirmation"
            lazy-rules
            :rules="[
              (val) =>
                (val == password) ||
                '确认密码与密码不一致'
            ]"
            label="确认密码"
            placeholder="请输入确认密码"
          >
          </q-input>
          <q-checkbox dense size="xs" v-model="agree"
            checked-icon="task_alt"
            unchecked-icon="panorama_fish_eye"
            class="text-caption">
            已阅读并同意<span @click.stop.prevent="showAgreement=true" class="text-red">《用户协议及法律声明》</span></q-checkbox>
          <div class="q-mt-lg">
            <q-btn
              class="full-width"
              ref="submit"
              size="16px"
              color="primary"
              label="注册"
              type="submit"
              unelevated
              :loading="loading"
              :disable="!phone || !password || !password_confirmation || loading || !agree"
            />
          </div>
        </q-form>
      </q-card-section>
    </q-card>
    <q-dialog v-model="showAgreement">
      <q-card>
        <q-card-section>
          <div class="text-h6">用户协议及法律声明</div>
        </q-card-section>
        <q-separator />
        <q-card-section style="max-height: 50vh" class="scroll">
          <div>
            <p>1、下载注册本软件视为同意本协议所有内容，本协议解释权归开发者所有。 </p>
            <p>2、本软件并非互联网投注平台，仅作为店主管理客户订单参考使用。 </p>
            <p>3、本软件不提供资金结算，仅提供资金结算凭据。 </p>
            <p>4、本软件不提供任何彩票代购、代销服务。 </p>
            <p>5、本软件所提供赛事资料，赛事结果、彩民晒单等信息均为参考信息，本软件不对任何信息的准确性负责。 </p>
            <p>6、本软件收取的各类服务费均为软件服务费，并非彩票代销代购费用。 </p>
            <p>7、保密义务。使用软件者不得向其他第三方透漏本软件之信息内容。 </p>
            <p>8、因使用本软件造成的损失，除非是因为账务计算错误导致的损失，其他意外的资金和财产损失均与本软件无关，本软件不负责赔偿。 </p>
            <p>9、使用者应当严格遵守本协议之规定，同时遵守国家有关彩票管理相关之规定，因为违反相关规定造成的民事责任以及刑事责任由使用者自行承担。 </p>
            <p>10、使用者应当严格遵守彩票销售之规定，不得利用本软件进行违法行为，包括但不限于虚假订单，收钱不出单，挪用他人订单向购彩者展示等。 </p>
            <p>11、使用者出现上述情况被发现者，本软件有权立即终止提供服务，并要求使用者对相关行为进行整改，由此造成的一切损失均有使用者本人承担。 </p>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="center">
          <q-btn flat label="已阅读并同意" color="primary" @click="agree=true" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>
<script setup>
import { ref } from "vue";

import axios from "axios";
import { useQuasar } from "quasar";
import qs from 'qs'
const $q = useQuasar();
const loading = ref(false);
const phone = ref("");
const password = ref("");
const password_confirmation = ref("");
const formRef = ref(null);
const result=ref(false)
const agree = ref(false)
const showAgreement = ref(false)
function register() {
  loading.value = true;
  const baseUrl = BASE_URL;

  axios
    .post(baseUrl + "api/seller/register" + location.search, {
      phone: phone.value,
      password: password.value,
      password_confirmation: password_confirmation.value
    })
    .then((res) => {
      if (res.data.code == 200) {
        $q.notify({type: 'positive',position:'center',message: res.data.message || '注册成功' })
        // $q.dialog({
        //   title: '恭喜',
        //   message: res.data.message || '注册成功'
        // }).onOk(()=>{
        setTimeout(()=>{
          window.location.href=res.data.data?.redirect || 'https://file.daxiangzj.com/mhsk/app_download?type=seller'
          // window.location.href='https://file.daxiangzj.com/client/app_download?type=seller'
        },2000)
        // })
        return;
      }
      return Promise.reject(new Error(res.data.message));
    })
    .catch((err) => {
      $q.notify({
        color: "red-5",
        type: "negative",
        position: "center",
        message: err.message
      });
    })
    .finally(() => {
      loading.value = false;
    });
}
</script>
<style lang="scss">
.login-main {
  position: relative;
  height:100vh;
  // background:  url("../src/assets/bg1.png") no-repeat top center;
  // background-size: 100% auto;
  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    bottom: 0%;
    background: linear-gradient(135deg,#3cab89,#428886);
  }
}
.login-form {
  // margin-top: 50px;
  border-radius: 10px;
}

input{
  &:-webkit-autofill{
    &,&:hover,&:focus,&:active{
      box-shadow: 0 -1px 0 1000px #fff inset;
    }
  }
}
.q-field .q-field__control{
  &:before,&:after{
    bottom: -1px;
  }
}
</style>
