<script setup lang="ts">
import { saveUserSWApi } from "@/services/home";
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";

const auth_next = ref<any>();

const current = ref<number>(0);
//选中背景色
const activeColor = ref<string>("#007aff");
//分段器的类型
const styleType = ref<string>("text");
//分段器的标题
const titleArr = ref<any>(["新版登录", "旧版登录"]);
//点击分段器修改参数
const onClickTitle = (e: any) => {
  console.log(e.currentIndex);
  current.value = e.currentIndex;
};
//纳税人识别号
const swNum = ref<string>("sw00shjsa0fdjf12");
//企业名称
const name = ref<string>("xxxxx公司");
//电子税务局账号
const swAcount = ref<string>("");
//电子税务局密码
const swPas = ref<string>("");
//类型输入的类型
const type = ref<string>("");

//表单所用到的数据绑定
onLoad((options: any) => {
  name.value = options.name;
  swNum.value = options.swNum;
  type.value = options.type;
});
//点击授权登录按钮
const authorizedLogin = () => {
  if (swAcount.value == "") {
    uni.showToast({
      title: "请输入账号",
      icon: "none",
    });
    return;
  }
  if (swPas.value == "") {
    uni.showToast({
      title: "请输入密码",
      icon: "none",
    });
    return;
  }
  //开始了
  //弹出提示框显示5秒钟后
  //然后提示报告已生成请查看

  uni.showToast({ title: "正在生成中", icon: "none", mask: true });
  setTimeout(() => {
    //5秒钟后显示弹框

    auth_next.value.openSH();
    uni.hideToast();
    //显示提示框

    //弹出框里有下一步
    //点击下一步跳转到主页面可以在列表中查看数据
    //弹出提示框
  }, 1000);
};
//保存用户的接口
const saveUserSWFun = async (val: any) => {
  const res = await saveUserSWApi(val);
};
</script>
<template>
  <view class="login">
    <view class="login_top">
      <image
        class="login_image"
        mode="'scaleToFill'"
        src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
      ></image>
    </view>
    <view class="login_mid">
      <view class="login_mid_inner"
        ><view class="uni-padding-wrap uni-common-mt">
          <uni-segmented-control
            :current="current"
            :values="titleArr"
            :style-type="styleType"
            :active-color="activeColor"
            @clickItem="onClickTitle"
          />
        </view>
        <view class="content">
          <view v-if="current === 0">
            <view class="content_info">
              <view class="login_text">纳税人识别号</view>
              <view>
                <uni-easyinput
                  :disabled="true"
                  v-model="swNum"
                  placeholder="请输入纳税人识别号"
                ></uni-easyinput
              ></view>
            </view>
            <view class="content_info">
              <view class="login_text">企业名称</view>
              <view>
                <uni-easyinput
                  :disabled="true"
                  v-model="name"
                  placeholder="请输入企业名称"
                ></uni-easyinput
              ></view>
            </view>
            <view class="content_info">
              <view class="login_text">电子税务局账号</view>
              <view>
                <uni-easyinput
                  :clearable="false"
                  v-model="swAcount"
                  placeholder="请输入电子税务局账号"
                ></uni-easyinput
              ></view>
            </view>
            <view class="content_info">
              <view class="login_text">电子税务局密码</view>
              <view>
                <uni-easyinput
                  :clearable="false"
                  type="password"
                  v-model="swPas"
                  placeholder="请输入电子税务局密码"
                ></uni-easyinput
              ></view>
            </view>
            <view>
              <button
                @click="authorizedLogin"
                size="default"
                style="color: #ffffff; background: #302ebe; margin-top: 90rpx"
                hover-class="is-hover"
              >
                授权登录
              </button></view
            >
          </view>
          <view v-if="current === 1"><text class="content-text">旧版登录</text></view>
        </view></view
      >
    </view>
  </view>
  <ShuiWuAuth ref="auth_next" />
</template>
<style lang="scss" scoped>
.login {
  .login_top {
    .login_image {
      width: 750rpx;
      height: 300rpx;
    }
  }
  .login_mid {
    width: 750rpx;
    padding: 0rpx 20rpx;
    position: relative;
    .login_mid_inner {
      padding: 0px 20rpx;
      width: 710rpx;
      position: absolute;
      padding-top: 40rpx;
      border-radius: 40rpx;
      background-color: #ffffff;
      margin-top: -60rpx;
      .content {
        .login_text {
          font-size: 30rpx;
          color: #000000;
          margin-bottom: 20rpx;
          margin-top: 20rpx;
        }
        .content_info {
          margin-top: 40rpx;
        }
        .content_button {
          background: linear-gradient(#302ebe #110981);
        }
      }
    }
  }
}
</style>
