<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
        v-if="checked"
        :customStyle="customStyle"
        class="custom-style"
        type="success"
        @getphonenumber="getPhoneNumber"
        open-type="getPhoneNumber"
        text="手机号快捷登录"
        color="#3cc7c0"
        size="large"
      ></up-button>
       <up-button
        v-else
        :customStyle="customStyle"
        class="custom-style"
        type="success"
        @click="alertAgree"
        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  :labelDisabled="true" class="group" >
       <label class="radio"><radio :labelDisabled="true"  @click="radioChange" value="1" :checked="checked" color="rgb(41, 121, 255)" />
        
      </label>
	  我已阅读并同意<text class="agree" @click="goAgree">《用户协议》</text>
     </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>
  <up-overlay :show="showModal" :mask-click-able="false">
    <view class="zanboxpop">
      <view class="zanwraper">
        <view class="title">提示</view>
        <view class="content">{{reason}} </view>
  
        <view class="btnbox" style="justify-content: center;">
         <view class="cancle" @click="showModal = false">取消</view>
          <view class="ok" @click="goPrefect">去完善</view>
        </view>
      </view>
    </view>
  </up-overlay>
</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";
import navTo from "../../utils/navTo";
const code = ref('');
const phone = ref(null);
const showModal=ref(false)
const isPwdPic = ref(false);
const isPhoneLogin = ref(true);
const reason=ref('');
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;
};
const alertAgree=()=>{
  uni.showToast({
    title: '请先同意用户协议',
    icon:'none'
  })
};
onLoad((options) => {
if (options.redirectUrl) {
				hasRedirectUrl.value = true
		};
})
onShow(()=>{
	checked.value=false;
})
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,
          source:1
        })
        .then((data) => {
			uni.hideKeyboard()
         let result=data.data.data;
      if(process.env.UNI_PLATFORM =="h5"){
			if(window.location.href.indexOf('//casedata.igandan.com')>-1){
			   uni.setStorageSync("AUTH_TOKEN_CASEDATA",result.token);
			}else{
				 uni.setStorageSync("DEV_AUTH_TOKEN_CASEDATA",result.token);
			}
		}else{
         const { envVersion } = uni.getAccountInfoSync().miniProgram;
          if (envVersion == "release") {
            uni.setStorageSync("AUTH_TOKEN_CASEDATA",result.token);
          } else {
            uni.setStorageSync("DEV_AUTH_TOKEN_CASEDATA",result.token);
          };
    }
          
         
            uni.setStorageSync("userInfo",{
            avatar:result.avatar,
            user_id:result.user_id,
            status:result.status,
            user_name:result.user_name,
            doctor_id:result.doctor_id,
           });
          goPage()
        }).catch(err=>{
			 let err_result=err.data;
			 if(err_result.code==10007){
				 showModal.value=true;
				 reason.value=err_result.message;
				 
			 }
			
		});
    });
  }
};
const goAgree=()=>{
	uni.navigateTo({
		url:'/pages/web/web?src=https://doc.igandan.com/app/integral/expert_zcxy.html'
	})
}
const goPrefect=()=>{
	showModal.value=false;
	const { envVersion } = uni.getAccountInfoSync().miniProgram;
	let  src =''
	if (envVersion == "release") {
	  src = "https://wx.igandan.com/hcp/perfect?mobile="+phone.value+"&fromType=weChat";
	} else {
	  src = "https://dev-wx.igandan.com/hcp/perfect?mobile="+phone.value+"&fromType=weChat";
	} 
	 uni.navigateTo({
		 url:'/pages/register/register?src='+encodeURIComponent(src)
	 })
}
const phoneLogin = () => {
  if (!isPhoneNum(phone.value)) return;
  if (!code.value){
    uni.showToast({
      title: "请输入验证码",
      icon: "none",
    });
    return false
  };
  if(!checked.value){
    uni.showToast({
    title: '请先同意用户协议',
    icon:'none'
    })
    return false;
  }
  auth().then((res) => {
      api.mobileLogin({
          code: code.value,
          phone: phone.value,
          wx_code: res,
        })
        .then((data) => {
			uni.hideKeyboard()
           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);
          }
           uni.setStorageSync("userInfo",{
            avatar:result.avatar,
            user_id:result.user_id,
            status:result.status,
            user_name:result.user_name,
            doctor_id:result.doctor_id,
           });
          goPage()
        }).catch(err=>{
			 let err_result=err.data;
			 if(err_result.code==10007){
				 showModal.value=true;
				 reason.value=err_result.message;
				 
			 }
			
		});
    });
}

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,
      scene:1
    }).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>
.group{
	display: flex;
	font-size: 28rpx;
	.agree {
	  background: none;
	  color:#3cc7c0;
	  font-size: 28rpx;
	}
	.radio{
	  display: inline-flex;
	  
	  font-size: 28rpx;
	  radio{
	    transform:scale(0.8) translateY(-2px);
	    
	  }
	  
	}
}

.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: 114rpx !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: 40rpx;
    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);
    }
  }
}
.zanboxpop {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .zanwraper {
    width: 630rpx;
    margin: 0 auto;
    padding-bottom: 50rpx;
    background: #f5f6f9;
    border-radius: 16rpx;
    .title {
      margin-top: 48rpx;
      text-align: center;
      font-weight: 500;
      font-size: 36rpx;
      color: rgba(0, 0, 0, 0.85);
    }
    .content {
      padding: 30rpx 0;
      background: #f5f6f9;
      text-align: center;
	  :deep(.imgstyle){
		  max-width: 100%!important;
	  }
	  :deep(._block){
		  text-align: left!important;
	  }
    }
    .count {
      margin-top: 24rpx;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      font-weight: 400;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.65);
      .num {
        color: #ff0000;
        font-size: 32rpx;
      }
      .earn {
        font-size: 32rpx;
        color: #3cc7c0;
      }
    }
    .countbox {
      display: flex;
      width: 100%;
      margin: 30rpx 0px 40rpx;
      padding: 0 40rpx;
      justify-content: center;
      box-sizing: border-box;
      .minus {
        flex-shrink: 0;
        margin-left: 10rp;
        width: 90rpx;
        height: 90rpx;
        font-size: 60rpx;
        color: #333;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ffffff;
        border-radius: 12rpx;
        border: 2rpx solid #e9e9e9;
      }
      .add {
        flex-shrink: 0;
        width: 90rpx;
        margin-left: 10rpx;
        height: 90rpx;
        font-size: 60rpx;
        color: #333;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background: #3cc7c0;
        border-radius: 12rpx;
        border: 2rpx solid #3cc7c0;
      }
      :deep(.u-input__content__field-wrapper__field) {
        height: 60rpx;

        font-size: 34rpx !important;
        text-align: center !important;
      }
      :deep(.u-input) {
        background: #f2f2f2;
        width: 200rpx !important;
        flex: none;
      }
      :deep(.u-input--radius) {
        border-radius: 24rrpx;
      }
    }
    .btnbox {
      margin: 0px 40rpx 0px;
      display: flex;
      justify-content: space-between;
      .cancle {
        color: rgba(0, 0, 0, 0.3);
        width: 256rpx;
        height: 88rpx;
        background: #f5f6f9;
        border-radius: 25px;
        border: 2rpx solid rgba(0, 0, 0, 0.15);
        font-weight: 500;
		margin-right: 18rpx;
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.85);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .ok {
        color: #fff;
        width: 256rpx;
        height: 88rpx;
        background: #3cc7c0;
        border-radius: 25px;
        border: 2rpx solid #3cc7c0;
        font-weight: 500;
        font-size: 32rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>