<template>
  <view>
    <view class="title">欢迎使用在生万有回收平台</view>
    <view class="logo">
      <image :src="`${url}/static/img/logo.png`"></image>
    </view>
    <view class="login-form">
      <u-form
        labelPosition="left"
        :model="model1"
        :rules="rules"
        ref="loginForm"
        :labelWidth="0"
      >
        <u-form-item prop="userInfo.phone">
          <u-input
            v-model="model1.userInfo.phone"
            placeholder="请输入手机号"
            :shape="'circle'"
            clearable
            :customStyle="{
              'border-color':
                currentFocus === 'phone' ? '#00dcee !important' : '',
            }"
            border="none"
            type="number"
            @focus="handleFocus('phone')"
            @change="(e:any) => {handleInput(e, 'phone')}"
            @clear="handleClear({ key: 'phone' })"
          >
          </u-input>
        </u-form-item>
        <u-form-item prop="userInfo.code">
          <u-input
            v-model="model1.userInfo.code"
            placeholder="请输入验证码"
            :shape="'circle'"
            type="text"
            border="none"
          >
            <template #suffix>
              <text v-if="seconds === 0" class="code_text" @click="getCode"
                >获取验证码</text
              >
              <text v-else class="code_text">{{ seconds }}s后重新发送</text>
            </template>
          </u-input>
        </u-form-item>
      </u-form>
      <view class="login-btn">
        <u-button
          @click="submit"
          type="primary"
          :customStyle="{
            'border-radius': '43rpx',
          }"
          >立即登录</u-button
        >
        <view class="agree">
          <u-checkbox
            :key="1"
            :size="'28rpx'"
            :activeColor="'#00dcee'"
            :name="1"
            :usedAlone="true"
            :checked="checkGroup.agreeCheck"
            @change="
            (v:any) => {
              checkGroup.agreeCheck = v;
            }
          "
          ></u-checkbox>
          <view>
            我已阅读并同意在生万有
            <text class="agree-item" @click="openDoc('在生万有用户协议')"
              >《 用户协议 》</text
            >
            和
            <text class="agree-item" @click="openDoc('在生万有隐私政策')"
              >《 隐私政策 》</text
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Layout from "@/components/Layout/index.vue";
import { useMemberStore } from "@/store/index";
import valid from "@/utils/validate";
import pinia from "@/store";
import { onShow } from "@dcloudio/uni-app";
import { url } from "@/utils/data";

const handleClear = (item: any) => {
  setTimeout(() => {
    (model1.userInfo as any)[item.key] = "";
  }, 100);
};
const store = useMemberStore(pinia);
const loginForm = ref(null);
const model1 = reactive({
  userInfo: {
    phone: "",
    code: "",
  },
});
const seconds = ref(0);
// 控制focus 边框样式
const currentFocus = ref("");
// 记住密码 // 同意协议
const checkGroup = reactive({
  agreeCheck: false,
});

const rules = ref({
  "userInfo.phone": {
    type: "string",
    required: true,
    message: "请输入手机号",
    trigger: ["blur", "change"],
  },
  "userInfo.code": {
    type: "string",
    required: true,
    message: "请输入验证码",
    trigger: ["blur", "change"],
  },
});

const getCode = () => {
  if (!valid.mobile.pattern.test(model1.userInfo.phone)) {
    uni.showToast({ icon: "none", title: "请输入正确的手机号" });
    return;
  }
  // ProfileApi.getCommonDbPhone({ phone: model1.userInfo.phone }).then(
  //   (res: any) => {
  //     if (res.code === 200) {
  //       if (res.data.length > 0) {
  //         store.setMechanism({mechanismCode: res.data[0].mechanismCode, mechanismName: res.data[0].mechanismName});
  //         sendMsg();
  //       } else {
  //         uni.showToast({
  //           title: "当前号码未加入货场",
  //           icon: 'none'
  //         });
  //       }
  //     }
  //   }
  // );
};
const sendMsg = () => {
  // ProfileApi.sendMsg({ phone: model1.userInfo.phone }).then((res) => {
  //   if (res.code === 200) {
  //     uni.$u.toast("验证码已发送");
  //     seconds.value = 60;
  //     let countDownTimer = setInterval(() => {
  //       if (seconds.value > 0) {
  //         --seconds.value;
  //       } else {
  //         clearInterval(countDownTimer);
  //       }
  //     }, 1000);
  //   }
  // });
};
const handleInput = (e: any, key: string) => {
  if (key === "phone") {
    const temp = e?.replace(valid.valid_number, "");
    setTimeout(() => {
      (model1.userInfo as any)[key] = temp;
    }, 10);
  }
};

const handleFocus = (attr: string) => {
  currentFocus.value = attr;
};
const submit = () => {
  if (model1.userInfo.phone) {
    if (!valid.mobile.pattern.test(model1.userInfo.phone)) {
      uni.showToast({ icon: "none", title: "请输入正确的手机号" });
      return;
    }
  }

  (loginForm.value as any).validate().then((res: any) => {
    if (res) {
      if (!checkGroup.agreeCheck) {
        uni.showToast({
          title: "请同意协议",
          icon: "none",
        });
        return;
      }
      // ProfileApi.loginPhone(model1.userInfo).then((res: any) => {
      //   if (res.code === 200) {
      //     store.setProfile(res.data);
      //     uni.reLaunch({
      //       url: "/pagesHome/index", // 要跳转到的页面路径
      //     });
      //   }
      // });
    }
  });
};

const openDoc = (item: string) => {
  //文件预览
  const isWX = uni.getSystemInfoSync().uniPlatform === "mp-weixin";
  console.log(
    `${url}/static/${
      isWX && item === "在生万有隐私政策" ? "weixin/" : ""
    }${item}.docx`
  );
  uni.downloadFile({
    url: `${url}/static/${
      isWX && item === "在生万有隐私政策" ? "weixin/" : ""
    }${item}.docx`,
    success: function (res) {
      setTimeout(
        () =>
          uni.openDocument({
            filePath: res.tempFilePath,
            showMenu: false,
            success: function () {
              console.log("打开文档成功");
            },
            fail: function () {
              uni.showToast({
                title: "暂不支持此类型",
                duration: 2000,
                icon: "none",
              });
            },
          }),
        100
      );
    },
    fail: function (res) {
      console.log(res); //失败
    },
  });
};
</script>

<style lang="scss" scoped>
.title {
  text-align: center;
  font-size: 40rpx;
  font-weight: bold;
  padding: 100rpx 0rpx;
}
.logo {
  text-align: center;
  image {
    width: 150rpx;
    height: 150rpx;
  }
}

.login-form {
  margin-top: 50rpx;
  padding: 0rpx 50rpx;
}
::v-deep .u-form-item__body__right__content {
  border-radius: 100px;
  border: 1px solid #dadbde;
}
.custom-icon {
  width: 37.18rpx;
  height: 18.59rpx;
}
.login-btn {
  margin-top: 23.72rpx;
}
.agree {
  display: flex;
  font-size: 21rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #000000;
  margin-top: 10rpx;
  align-items: flex-start;
  text-align: center;
  line-height: 41rpx;
  margin-top: 26.28rpx;
  .agree-item {
    color: $u-primary;
    font-size: 24rpx;
  }
}
.code_text {
  color: $u-primary;
}
</style>
