<template>
  <div style="width:395px; padding:0 7px">
      <div style="height:42px;background: #F2F7FF;border-radius: 2px;display:flex;align-items: center;margin-top: 8px">
        <img src="../../assets/icon/phoneIcon.png" style="height: 13px;margin:0 8px 0 16px">
        <span style="font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #575757;">手机号：{{MOBIL}}</span>
      </div>
      <!-- 验证码 -->
      <div style="display:flex;margin: 16px 0px 24px;justify-content: space-between;">
        <div style="position:relative;flex:1">
          <Input class="input" v-model="verifyCode" :maxlength="4" placeholder="请输入验证码" size="large" @on-keyup="replaceCode" @on-focus="focusCoode"/>
          <span class="error"  v-if="errors">验证码错误</span>
        </div>
        <div :class="{'codeBtn':true,'canSetCode':canSetCode}" @click="getVerifyCode">{{btnTitle}}</div>
      </div>
      <!-- <JcRange 
          :success-fun="getCaptcha"
        /> -->
      <div class="pop-btn" style="display:flex;justify-content:center;padding-top:16px;border-top:1px solid #DEDEDE;width: calc(100% + 46px);margin-left: -22px;">
        
        <Button
          class="cancel-btn"
          @click="cancel" 
        >取消</Button>
        <Button
          type="posdefault"
          class="sav-btn" 
          style="margin-left:22px"
          @click="save"
        >确定</Button>
      </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    name: '',
    props: {
      externalOptions: {
        type: Object,
        default: ()=>{}
      },
      idArray: { // 获取ID用于多选
        type: Array,
        default: () => []
      },
    },
    data() {
      return {
        MOBIL:'',
        captcha:'',
        verifyCode:'',
        btnTitle:'发送验证码',
        errors:false,
        canSetCode:true,
      };
    },
    created(){
       let str= '';
      if(this.externalOptions){
        str = this.externalOptions.massage
        this.MOBIL=str.slice(0,3)+'*****'+str.slice(str.length-3)//手机号脱敏
      }else {
        this.getMobile();
      }
    },
    methods: {
      // 获取手机号
      getMobile() {
        let userId = JSON.parse(localStorage.getItem('userInfo')).id;
        let virtual = {
              table: 'V_USERS', // USERS
              objid: userId,
            };
            this.$network.post('/p/cs/object/query', virtual).then((res) => {
              let str = res.data.MOBIL;
              let a = /^1\d{10}$/;
              if (str && a.test(str)) {
                this.MOBIL=str.slice(0,3)+'*****'+str.slice(str.length-3)//手机号脱敏
              } else {
                this.$Modal.fcError({
                    title: '错误',
                    content: '当前用户手机号为空或格式不正确，请联系管理员在【用户档案】中进行修改',
                    mask: true,
                    
                });
              }
            });
      },
      // 输入框聚焦提示信息消失
      focusCoode(){
        this.errors =false
      },
      // 限制只能输入数字
      replaceCode(){
        this.verifyCode=this.verifyCode.replace(/\D/g,'')
      },
      save() {
        // 校验验证码接口
        this.$network.post( '/p/cs/verifyCodeMsgExport',this.$urlSearchParams({code:this.verifyCode}))
          .then(res => {
            if(res.data.code==0){
              if(window.location.href.indexOf('V_RB_LACKSKUDETAIL') > -1){  // 缺货需补货导出定制
                let params = {
                  ids: this.idArray
                }
                this.$network.post('/p/cs/lackSkuDetail/export',params).then(res => {
                  if(res.data.code == 0){
                    this.$Modal.fcSuccess({
                      title: '成功',
                      mask: true,
                      content: res.data.message
                    });
                    this.$emit('cancel'); // 取消导出，关闭弹框
                  }
                })
              }else {
                this.$emit('ok'); // 让父组件继续走导出逻辑
              }
              this.errors =false
            }else if(res.data.code==-10){
              this.$Message.error({
                  content: res.data.message,
                  duration: 3
              });
              this.errors =true
            }
          })
      },
      cancel() {
        if(this.externalOptions){
          if(!this.externalOptions.refresh){
          }else {
            this.externalOptions.refresh();// 手动刷新页面
          }
        }
        this.$emit('cancel'); // 取消导出，关闭弹框
      },
      getVerifyCode(){
        //获取验证码
        if(this.canSetCode) {
            this.validateBtn()
            //发送网络请求获取验证码
            this.$network.post('/p/cs/sendCodeMsgExport').then(res=>{
              console.log(res.data)
            })
          }
      },
      // 点击验证码发送倒计时
      validateBtn(){
        //倒计时
        let time = 60;
        let timer = setInterval(() => {
        if(time == 0) {
          clearInterval(timer);
          this.canSetCode = true;
          this.btnTitle = "获取验证码";
        } else {
          this.btnTitle ='重新获取（'+time+'s）';
          this.canSetCode = false;
          time--
        }
        },1000)
      },
     
    }
  };
</script>
<style lang="less" scoped>
  .input /deep/ .ark-input-large{
    height: 42px;
  }
  .error{
    color:#FC3537;
    position: absolute;    
    right: 10px;
    top: 14px;
  }
  .codeBtn{
    width: 100px;
    height: 42px;
    background: #BFBFBF;
    border-radius: 2px;
    margin-left: 24px;
    color: #FFFFFF;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor: default;
  }
  .canSetCode{
    background: #0550FF;
    cursor: pointer;
  }
</style>
