<template>
  <view class="p-3">
    <view v-if="type == 'mobile'" class="d-flex flex-column align-center justify-center">
      <image class="width-300 m-5" :src="baseLogo" mode="widthFix"></image>
      <view class="w-100 mt-3 mb-3">
        <u-form
          labelPosition="top"
          labelWidth="180"
          :model="loginFormModel"
          :rules="loginFormRules"
          ref="uForm"
        >
          <u-form-item
            label="用户名"
            prop="mobile"
            borderBottom
          >
            <u-input
              v-model="loginFormModel.mobile"
              placeholder="请输入用户名"
            />
          </u-form-item>
          <u-form-item
            label="密码"
            prop="password"
            borderBottom
          >
            <u-input
              v-model="loginFormModel.password"
              :password="true"
              placeholder="请输入密码(6-16位)"
            ></u-input>
          </u-form-item>
          <u-form-item
            label="登录为"
            prop="loginType"
            borderBottom
          >
            <u-radio-group
              v-model="loginFormModel.loginType"
              :options="loginTypeOptions"
            >
              <u-radio 
                v-for="(item, index) in loginTypeOptions" :key="index" 
                :name="item.value"
                :label="item.label"
              /> 
            </u-radio-group>
          </u-form-item>
        </u-form>
      </view>
      <u-button type="primary" @click="loginMobile">
        登录
      </u-button>
      <view class="mt-3" />
      <u-button class="mt-3" type="primary" :plain="true" @click="type='wechat'">
        微信登录
      </u-button>
    </view>

    <view v-if="type == 'wechat'" class="d-flex flex-column align-center justify-center">
      <image 
        :class="[
          debugClicks == 6 ? 'width-200' : 'width-300',
          'm-5'
        ]"
        :src="baseLogo" 
        mode="widthFix"
        @click="debugClick"
      />
      <view class="mt-3 mb-3">
        <text v-if="debugCodes" class="text-align-center text-bold color-danger" @click="debugCopy">{{ debugCodes }}</text>
        <text class="text-align-center">请登录后进入平台继续操作</text>
      </view>

      <!-- #ifdef MP-WEIXIN -->
      <u-button type="primary" @click="loginWechat">
        微信登录
      </u-button>
      <!-- #endif -->
      <view class="mt-3" />
      <u-button type="primary" :plain="true" @click="type='mobile'">
        用户名密码登录
      </u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import baseLogo from '/static/logo.png';
import { useAuthStore } from '@/store/auth';
import { back, navTo } from '@imengyu/imengyu-utils/dist/uniapp/PageAction';
import { toast } from '@imengyu/imengyu-utils/dist/uniapp/DialogAction';
import { ref } from 'vue';
import { showError } from '@/common/composeabe/ErrorDisplay';

const type = ref('wechat');
const authStore = useAuthStore();

const loginFormModel = ref({
  mobile: '',
  password: '',
  loginType: 0,
});
const loginTypeOptions = ref([
  {
    label: '志愿者',
    value: 0,
  },
  {
    label: '管理员',
    value: 1,
  },
]);
const loginFormRules = {
  'mobile': {
    type: 'string',
    required: true,
    message: '请填写用户名',
    trigger: ['blur', 'change']
  },
  'password': {
    type: 'string',
    min: 6,
    max: 16,
    required: true,
    message: '请填写密码(6-16位)',
    trigger: ['blur', 'change']
  },
}

const debugClicks = ref(0);
const debugCodes = ref('');

function debugCopy() {
  uni.setClipboardData({ data: debugCodes.value });
  toast('已复制到剪贴板');
}
function debugClick() {
  debugClicks.value ++;
  if (debugClicks.value > 10) {
    toast('你已经点击了10多次了，你是机器人吗？');
    return;
  }
}
function loginWechat() {

  uni.showLoading({ title: '登录中...' });

  if (debugClicks.value == 6) {
    uni.login({ provider: 'weixin' })
      .then((res) => debugCodes.value = res.code)
      .catch(showError)
      .finally(() => uni.hideLoading());
    return;
  }
  debugClicks.value = 0;

  Promise.all([
    uni.login({ provider: 'weixin' }),
    uni.getUserProfile({ desc: '用于完善会员资料' }),
  ])
    .then((res) => {
      console.log(res);
      //return;
      authStore.loginWechart(res[0].code, res[1]).then(() => {
        toast('登录成功');
        setTimeout(back, 200);
      }).catch(showError);
    })
    .catch(showError)
    .finally(() => uni.hideLoading());
}
function loginMobile() {
  uni.showLoading({ title: '登录中...' });
  authStore.loginMobile(
    loginFormModel.value.mobile, 
    loginFormModel.value.password,
    loginFormModel.value.loginType,
  ).then(() => {
    toast('登录成功');
    setTimeout(back, 200);
  }).catch(showError)
}

</script>