<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">
      <q-card-section>
        <div v-if="!paramsStr" class="text-red text-center">授权失败，请关闭后重试</div>
        <div v-else-if="success" class="text-center q-py-md">
          <div class="text-h6">绑定成功</div>
          <p class="q-mt-md text-subtitle1">{{success}}</p>
        </div>
        <q-form v-else
          @submit.prevent.stop="onSubmit"
          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>
          <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 || loading"
            />
          </div>
        </q-form>
      </q-card-section>
    </q-card>
  </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 formRef = ref(null);
const success = ref('')
const paramsStr = location.search.substring(1)
const params = qs.parse(paramsStr)
function onSubmit() {
  loading.value = true;
  axios
    .post(BASE_URL + "api/seller/wechat/bind_seller"/* + location.search*/, {
      ...params,
      phone: phone.value,
      password: password.value,
    })
    .then((res) => {
      if (res.data.code == 200) {
        success.value = res.data.message||"操作完成，将会为您即时推送云朵小店新消息。"
        // $q.notify({type: 'positive',position:'center',message: res.data.message || '绑定成功' })
        // $q.dialog({
        //   title: '恭喜',
        //   message: res.data.message || '绑定成功'
        // }).onOk(()=>{
        // })
        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>
