<template>
  <view class="logincontent">
    <view class="title">登录观看</view>
    <up-form labelPosition="left"  ref="form" labelWidth="115rpx">
      <up-form-item
        label="手机号"
        prop="userInfo.name"
        borderBottom
        v-if="!isPhoneLogin"
      >
        <up-input
          v-model="phone"
          placeholder="请输入肝胆相照专家版手机号"
        ></up-input>
      </up-form-item>
      <!-- <view v-if="isPhoneLogin" class="pwdbox">
        <up-form-item label="密码" prop="userInfo.name" borderBottom>
          <up-input
            v-model="model.name"
            type="password"
            placeholder="请输入密码"
          ></up-input>
        </up-form-item>
        <up-form-item
          label="图形验证码"
          prop="userInfo.name"
          borderBottom
          v-if="isPwdPic"
        >
          <up-input
            v-model="model.name"
            placeholder="请输入图形验证码"
          ></up-input>
          <template #right>
            <up-image
              :show-loading="true"
              src="https://cdn.uviewui.com/uview/album/1.jpg"
              width="160rpx"
              height="74rpx"
            ></up-image>
          </template>
        </up-form-item>
      </view> -->
      <view class="smsbox" v-if="!isPhoneLogin">
        <!-- <up-form-item label="图形验证码" prop="userInfo.name" borderBottom>
          <up-input
            v-model="model.name"
            placeholder="请输入图形验证码"
          ></up-input>
          <template #right>
            <up-image
              :show-loading="true"
              src="https://cdn.uviewui.com/uview/album/1.jpg"
              width="160rpx"
              height="74rpx"
            ></up-image>
          </template>
        </up-form-item> -->
        <up-form-item label="验证码" prop="userInfo.name" borderBottom>
          <up-input v-model="code" placeholder="请输入验证码"></up-input>
          <template #right>
            <view class="wrap">
              <up-toast ref="uToastRef"></up-toast>
              <up-code
                :seconds="seconds"
                @end="end"
                @start="start"
                ref="uCodeRef"
                @change="codeChange"
              ></up-code>
              <up-button
                @tap="getCode"
                :customStyle="customCode"
                color="#e2e2e2"
                class="custom-code"
                ><text class="codetext">{{ tips }}</text></up-button
              >
            </view>
          </template>
        </up-form-item>
      </view>
    </up-form>

    <view class="row" v-if="!isPhoneLogin">
      <up-button
        @click="phoneLogin"
        :customStyle="customStyle"
        class="custom-style"
        type="success"
        text="登录"
        color="#3cc7c0"
        size="large"
      ></up-button>
    </view>
    <view class="row" style="margin-top: 120rpx" v-else>
      <up-button
        :customStyle="customStyle"
        class="custom-style"
        type="success"
        @getphonenumber="getPhoneNumber"
        open-type="getPhoneNumber"
        text="手机号快捷登录"
        color="#3cc7c0"
        size="large"
      ></up-button>
    </view>
    <view class="row">
      <view class="left" @click="switchType">
        {{ isPhoneLogin ? "用短信验证码登录" : "快捷登录" }}
      </view>
      <view class="right" @click="goRegister"> 注册 </view>
    </view>
    <view class="row" style="margin-top:10rpx">
      <radio-group @click="radioChange">
       <label class="radio"><radio  value="1" :checked="checked" color="rgb(41, 121, 255)" />
        我已阅读并同意<a class="agree">《用户协议》</a>
      </label>
     </radio-group>
      <!-- <up-radio-group v-model="checked">
      <up-radio
        label="我已阅读并同意<a>《用户协议》</a>"
      ></up-radio>
    </up-radio-group> -->
    </view>
    <view class="row">
      <view class="tip">操作说明</view>
    </view>
    <view class="line">
      <view class="qq">1、</view>
      肝胆相照注册账号与微信绑定，肝胆相照相关直播、视频无忧随心看
    </view>
    <view class="line">
      <view class="qq">2、</view>
      仅需操作一次，后续通过微信观看直播、视频无需额外操作，立即进入
    </view>
    <view class="line">
      <view class="qq">3、</view>
      若您还未注册肝胆相照专家版App, 请直接点击“注册”进行注册操作
    </view>
    <view class="desc">
      若您有任何疑问或需要我们协助，请与您的小助手联系或直接微信联系<text
        class="red"
        >igandan1000</text
      >
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onShow,onLoad } from "@dcloudio/uni-app";
import api from "@/api/api";
import auth from "@/utils/auth";
const code = ref('');
const phone = ref(null);
const isPwdPic = ref(false);
const isPhoneLogin = ref(true);
const customStyle = reactive({
  height: "90rpx",
  fontSize: "36rpx",
});
const customCode = reactive({
  color: "#3ec7c0",
  height: "64rpx",
  fontSize: "28rpx",
  borderColor: "#e2e2e2",
  opcity: "1",
});
const tips = ref("");
const seconds = ref(10);
const uCodeRef = ref(null);
const checked = ref(false);
const hasRedirectUrl = ref(false);
const radioChange = (e) => {
  checked.value =!checked.value;
};
onLoad((options) => {
if (options.redirectUrl) {
				hasRedirectUrl.value = true
		};
})
const goPage=()=>{
  	if (hasRedirectUrl.value) {
      console.log('true')

						let url="";
						let redirectUrl = uni.getStorageSync('redirectUrl');
						if(redirectUrl && redirectUrl.indexOf('/login/login')==-1){
							url = redirectUrl
						}else{
							url='pages/index/index'
						}
            console.log('url:' + url)

						uni.redirectTo({
							url: '/' + url,
							success(){
								uni.setStorageSync('redirectUrl', '');
							}
						})
					} else {
            console.log('false')
						uni.redirectTo({
							url: '/pages/index/index'
						})
					}

}
const getPhoneNumber = (e) => {
  if (e.detail.errMsg === "getPhoneNumber:ok") {
    console.log(e.target.code)
    auth().then((res) => {
      console.log(res);
      api.wxLogin({
          phone_code: e.target.code,
          wx_code: res,
        })
        .then((data) => {
         let result=data.data.data;
           console.log(data.data)
          const { envVersion } = uni.getAccountInfoSync().miniProgram;
          if (envVersion == "release") {
            uni.setStorageSync("AUTH_TOKEN_CASEDATA",result.token);
          } else {
            uni.setStorageSync("DEV_AUTH_TOKEN_CASEDATA",result.token);
          };
            console.log(2222222)
          goPage()
        }).catch((err)=>{
            uni.showToast({
          title: err,
          icon: "none",
        });
        });
    });
  }
};
const phoneLogin = () => {
  if (!isPhoneNum(phone.value)) return;
  if (!code.value){
    uni.showToast({
      title: "请输入验证码",
      icon: "none",
    });
    return false
  };
  auth().then((res) => {
      api.mobileLogin({
          code: code.value,
          phone: phone.value,
          wx_code: res,
        })
        .then((data) => {
           let result=data.data.data;
          const { envVersion } = uni.getAccountInfoSync().miniProgram;
          if (envVersion == "release") {
            uni.setStorageSync("AUTH_TOKEN_CASEDATA", result.token);
          } else {
            uni.setStorageSync("DEV_AUTH_TOKEN_CASEDATA",result.token);
          }
          goPage()
        });
    });
}

const isPhoneNum = (phonenum) => {
  let reg = /^1[3456789]\d{9}$/;
  if (!reg.test(phonenum)) {
    uni.showToast({
      title: "请输入有效的手机号码！",
      icon: "none",
    });
    return false;
  } else {
    return true;
  }
};
const codeChange = (text) => {
  tips.value = text;
};
const switchType = () => {
  isPhoneLogin.value = !isPhoneLogin.value;
};
const goRegister = () => {
  uni.navigateTo({
    url: "/pages/register/register",
  });
};
const getCode = () => {
  if (!isPhoneNum(phone.value)) return;
  if (uCodeRef.value.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: "正在获取验证码",
    });
    getSms();
    // setTimeout(() => {
    //   uni.hideLoading();
    //   // 这里此提示会被start()方法中的提示覆盖
    //   uni.$u.toast("验证码已发送");
    //   // 通知验证码组件内部开始倒计时
    //   uCodeRef.value.start();
    // }, 2000);
  } else {
    uni.$u.toast("倒计时结束后再发送");
  }
};
const getSms=()=>{
    api.getCode({phone: phone.value}).then(res=>{
      uni.hideLoading();
      uni.$u.toast("验证码已发送");
      uCodeRef.value.start();
    })
}
const end = () => {
  customCode.opacity = 1;
};

const start = () => {
  customCode.opacity = 0.5;
};
</script>

<style lang="scss" scoped>
.radio{
  display: inline-flex;
  font-size: 28rpx;
  radio{
    transform:scale(0.8) translateY(-2px);
    
  }
  .agree {
    background: none;
    color:#3cc7c0;
  }
}
.logincontent {
  width: 100%;
  height: 100vh;
  background: #fff;
  .pwdbox ::v-deep .u-form-item:nth-child(2) .u-form-item__body__left {
    width: 180rpx !important;
  }
  .smsbox ::v-deep .u-form-item:first-child .u-form-item__body__left {
    width: 180rpx !important;
  }
  ::v-deep .u-form-item__body__left__content__label {
    font-size: 34rpx;
    color: #000;
  }
  .title {
    padding: 124rpx 0 64rpx 30rpx;
    //padding-left: 30rpx;
    font-size: 46rpx;
    font-stretch: normal;
    letter-spacing: 2rpx;
    color: #000000;
  }
  ::v-deep .u-form {
    padding: 0 30rpx;
  }
  .row {
    margin-top: 30rpx;
    display: flex;
    justify-content: space-between;
    padding: 0 30rpx;
    .left {
      flex: 1;
      color: #3cc7c0;
      text-align: left;
    }
    .right {
      flex: 1;
      color: #666;
      text-align: right;
    }
    ::v-deep .u-button--large .u-button__text {
      font-size: 36rpx !important;
    }
    .tip {
      color: rgb(51, 51, 51);
      font-size: 26rpx;
    }
  }
  ::v-deep .wrap {
    border-radius: 16rpx;
    overflow: hidden;
    border: none;
  }
  //   ::v-deep .custom-code .codetext,::v-deep .custom-code .u-button{
  // 	display: flex;
  // 	justify-content: center;
  // 	align-content: center;
  // 	color:#3ec7c0!important;
  // 	height:64rpx!important;
  // 	font-size: 28rpx!important;
  // 	border:none!important;

  //   }

  .line {
    padding: 0 30rpx;
    margin-top: 10rpx;
    color: rgb(153, 153, 153);
    line-height: 44rpx;
    font-size: 26rpx;
    display: flex;
    letter-spacing: 1px;
  }
  .desc {
    padding: 0 30rpx;
    color: rgb(153, 153, 153);
    line-height: 44rpx;
    font-size: 26rpx;
    letter-spacing: 2rpx;
    .red {
      color: rgb(255, 0, 0);
    }
  }
}
</style>