<template>
  <view class="login_content">
    <view class="header">
      <image src="/static/svg/logo.svg" mode="heightFix" lazy-load="false" />
    </view>
    <view class="group_des">
      <view class="label"> 废品回收助手 </view>
      <view class="des"> <text>还没有账号？</text> 请在公众号联系管理员 </view>
    </view>

    <view class="group_from">
      <!-- <view class="title"> 手机号码登录 </view> -->
      <view class="form_input">
        <hs-input
          v-model:valueModel="from_data.username"
          placeholder="请输入帐号"
          textAlign="left"
        />
      </view>
      <view class="form_input">
        <hs-input
          v-model:valueModel="from_data.password"
          placeholder="请输入密码"
          textAlign="left"
          password
        />
      </view>
    </view>

    <view class="footer_btn">
      <hs-button label="登录" size="md" @click="onSubmit" />
      <view class="footer_des">
        小程序只供合作企业用户使用，无法登录请联系管理员
      </view>
    </view>

    <view class="PrivacyPolicy">
      <hs-private-policy
        policyName="《用户协议》"
        v-model:isAgree="CheckedVal"
        @clickPolicy="previewPdf"
      />
    </view>
  </view>
</template>
<script setup lang="ts">
import { useWeAppAuthStore } from "@/common";
import { ref } from "vue";
const from_data = ref({
  username: "",
  password: "",
});

const auth = useWeAppAuthStore();
let CheckedVal = ref(false);

const onSubmit = () => {
  if (!privacyToast()) {
    return false;
  }
  if (!from_data.value.username || !from_data.value.password) {
    uni.showToast({
      title: "请输入帐号和密码！",
      icon: "none",
    });
    return;
  }
  auth.handleUserLogin(from_data.value);
};

const privacyToast = () => {
  if (!CheckedVal.value) {
    uni.showToast({
      title: "请阅读并勾选隐私政策！",
      icon: "none",
    });
    return false;
  }
  return true;
};

const previewPdf = () => {
  uni.showLoading({
    title: "加载中...",
    mask: true,
  });
  uni.downloadFile({
    url: "https://nchl-dev.oss-cn-shenzhen.aliyuncs.com/uploads/cs-test/01JTM6CBGHTYPB7E4D4XENA2P7.pdf",
    success: function (e) {
      const filePath = e.tempFilePath;
      uni.hideLoading();
      // 预览pdf
      uni.openDocument({
        filePath: filePath as string,
        showMenu: true,
      });
    },
  });
};
</script>
<style lang="scss">
.login_content {
  padding-top: 200rpx;
}
.header {
  text-align: center;
  padding: 70rpx 0 20rpx 0;
  image {
    height: 90px;
  }
}

.group_des {
  text-align: center;
  font-weight: 400;
  .label {
    font-size: 40rpx;
    font-weight: 500;
  }
  .des {
    font-size: 22rpx;
    padding-top: 10rpx;
    text {
      color: #969696;
    }
  }
}

.group_from {
  padding: 60rpx 70rpx 0 70rpx;
  .title {
    font-size: 36rpx;
    padding: 0 0 20rpx 0;
  }
  .form_input {
    background-color: #f8f8f8;
    border-radius: 100rpx;
    padding: 10rpx 30rpx;
    &:last-child {
      margin-top: 20rpx;
    }
  }
}

.footer_btn {
  padding: 40rpx 70rpx;
  .footer_des {
    font-size: 22rpx;
    text-align: center;
    padding-top: 30rpx;
    color: #555;
  }
}

.PrivacyPolicy {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  position: fixed;
  bottom: 60rpx;
  width: 100%;
}
</style>
