<template>
  <div class="login-con">
    <!-- <div class="flex-default uni-row logo-con">
      <div class="logo"></div>
    </div> -->
    <m-nav-bar background="transparent" />
    <div class="header-con">
      <div class="title">你好，</div>
      <div class="title">欢迎登录一幕数字藏品</div>
    </div>
    <div class="content-con">
      <div class="login-form">
        <div class="flex-default form-item">
          <div class="area-view flex-default" @click="showAreaPopup = true">
            <span>{{ areaList[areaIndex].code }}</span>
            <m-icon icon="icon-dropdown" :size="8" class="icon" />
          </div>
          <input
            class="login-input"
            type="number"
            v-model="loginForm.account"
            placeholder="请输入手机号"
          />
        </div>
        <div class="flex-default form-item">
          <input
            class="login-input"
            type="number"
            v-model="loginForm.verificationCode"
            maxlength="4"
            placeholder="请输入验证码"
          />
          <div class="code-view flex-default" @click="sendSmsCode">
            {{ codeLabel }}
          </div>
        </div>

        <van-button
          type="primary"
          :disabled="submitDisabled"
          @click="handleSubmit"
          class="submit-btn"
          block
          round
        >
          提 交
        </van-button>
      </div>
      <div class="agreement" v-show="hideshow">
        若手机号未注册，登录将自动注册，注册即为同意
        <font class="name" @click="handleAgreement('registration')">《一幕数字藏品用户注册服务协议》</font>
        <font class="name" @click="handleAgreement('privacy')">《一幕数字藏品隐私协议》</font>
      </div>
    </div>

    <van-popup v-model="showAreaPopup" round position="bottom">
      <van-picker
        show-toolbar
        :columns="areaList"
        value-key="name"
        @cancel="showAreaPopup = false"
        @confirm="handleAreaSelect"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      showAreaPopup: false,
      areaIndex: 0,
      areaList: [
        {
          name: "中国 (+86)",
          code: "+86",
        },
        {
          name: "美国 (+1)",
          code: "+1",
        },
      ],
      loginForm: {
        area: "+86",
        account: "",
        verificationCode: "",
        registerCode: "",
      },

      codeLoading: false,
      codeSec: 0,
      docmHeight: document.documentElement.clientHeight ||document.body.clientHeight,
      showHeight: document.documentElement.clientHeight ||document.body.clientHeight,
      hideshow: true,
      isResize: false
    };
  },
  watch: {
    showHeight() {
      if(this.docmHeight > this.showHeight){
        this.hideshow=false
      }else{
        this.hideshow=true
      }
    }
  },
  computed: {
    codeLabel() {
      return this.codeSec > 0 ? `发送验证码(${this.codeSec})` : "发送验证码";
    },
    codeDisabled() {
      return !this.loginForm.account || this.codeSec > 0;
    },
    submitDisabled() {
      return !this.loginForm.account || !this.loginForm.verificationCode;
    },
  },
  methods: {
    ...mapMutations(["setToken", "setAccountInfo", "clearSearchHistory"]),
    ...mapActions(["getShoppingCart", "getRewardRule"]),
    handleAreaSelect(value, index) {
      this.areaIndex = index;
      this.showAreaPopup = false;
    },
    handleSubmit() {
      this.$showLoading();
      this.$api({
        apiName: "login",
        postData: this.loginForm,
        success: (res) => {
          this.setToken(res.token);
          this.setAccountInfo(res);
          // this.getShoppingCart();
          // this.getRewardRule();
          this.clearSearchHistory();
          if(this.$route.query.source) {
            this.$router.go(-1)
          }else {
            this.$router.replace({ name: "home" });
          }
          
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    },
    sendSmsCode() {
      if (this.codeDisabled) {
        return;
      }
      this.codeLoading = true;
      let { area, account } = this.loginForm;
      this.$api({
        apiName: "sendSmsCode",
        postData: {
          area,
          account,
          type: 1,
        },
        success: (res) => {
          this.codeSec = 60;
          let taskId = setInterval(() => {
            this.codeSec--;
            if (this.codeSec == 0) {
              clearInterval(taskId);
            }
          }, 1000);
          this.$toast("已发送");
        },
        complete: () => {
          this.codeLoading = false;
        },
      });
    },
    handleAgreement(name){
      this.$router.push({ name: name });
    }
  },
  mounted() {
    window.onresize = () => {
      return(() => {
       this.showHeight = document.documentElement.clientHeight || document.body.clientHeight;
      })()
    }
 }
};
</script>

<style lang="less">
.login-con {
  // min-height: 600px;
  height: 100%;
  position: relative;

  > .m-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }

  > .logo-con {
    margin-top: 50px;
    -webkit-justify-content: center;
    justify-content: center;

    .logo {
      height: 90px;
      width: 90px;
      border-radius: 50%;
      background: #dd2e41;
    }
  }

  > .header-con {
    height: 230px;
    background: url(~@/assets/img/login-bg.png);
    background-size: 100%;
    margin-bottom: 20px;
    padding: 90px 17px 0 17px;
    .title{
      font-size: 28px;
      font-weight: bold;
    }
  }

  > .content-con {
    padding: 0 17px;
  }

  > .content-con .login-form {
    .form-item {
      margin-bottom: 20px;
      height: 50px;
      border: 1px solid #dbdbdb;
      border-radius: 4px;
    }

    .area-view {
      width: 60px;
      height: 100%;
      background: #f1f1f1;
      border-radius: 4px 0 0 4px;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      color: #333649;
      .icon {
        margin-left: 5px;
        margin-top: 2px;
      }
    }

    input {
      font-size: 15px;
    }

    .login-input {
      height: 100%;
      flex: 1;
      padding: 0 15px;
    }

    .code-view {
      width: 130px;
      height: 100%;
      align-items: center;
      justify-content: center;
      border-left: 1px solid #d9dce9;
    }

    .submit-btn {
      margin-top: 60px;
      font-size: 16px;
    }
  }

  > .content-con .agreement {
    width: 100%;
    position: absolute;
    color: #aeaeae;
    font-size: 12px;
    left: 0;
    bottom: 45px;
    padding: 0 16px;
    .name {
      color: #2C66F5;
    }
  }
}
</style>
