<template>
  <view>
    <xd-dailog
      :show.sync="uiShow"
      width="90%"
      title="设置支付密码"
      :cancel="false"
      :confirm="false"
      :zIndex="1100"
      :showClose="showClose"
      @close="handleClose"
    >
      <view class="pwd">
        <view class="pwd__title" v-if="title">
          <view>
            {{title}}
          </view>
        </view>
        <view class="pwd__form">
          <view class="pwd__form-item">
            <view>
              手机号：
            </view>
            <view>
              <input
                :disabled="editPhone!==''"
                :style="{width:370+'rpx'}"
                type="number"
                placeholder="请输入手机号"
                :adjust-position="false"
                v-model="form.phone"
              />
            </view>
          </view>

          <view class="pwd__form-item">
            <view style="display: flex;align-items: center;flex: 1;
          width: 0;">
              <view>验证码：</view>
              <view>
                <input
                  :style="{width:160+'rpx',marginRight:30+'rpx'}"
                  type="text"
                  placeholder="请输入验证码"
                  :adjust-position="false"
                  v-model="form.sms_code"/>
              </view>
            </view>
            <view style="flex-shrink: 0;">
              <xd-button
                size="mini"
                type="default"
                @click="getSmsCodeHandle"
                :disabled="!form.phone || status"
                :style="{width:codeWidth+'rpx'}"
              >
                {{statusMsg}}
              </xd-button>
            </view>
          </view>

          <view class="pwd__form-item">
            <view>设置支付密码：</view>
            <view>
              <input
                type="password"
                placeholder="请输入六位纯数字密码"
                :adjust-position="false"
                v-model="form.password"
                maxlength="6"
              />
            </view>
          </view>

          <view class="pwd__form-item">
            <view>确认支付密码：</view>
            <view>
              <input
                type="password"
                placeholder="请输入确认密码"
                :adjust-position="false"
                v-model="form.confirmPwd"
                maxlength="6"
              />
            </view>
          </view>
        </view>

        <view>
          <xd-button
            type="primary"
            size="mini"
            :disabled="!form.phone || !form.sms_code || !form.password || !form.confirmPwd"
            @click="submit"
          >确定</xd-button>
        </view>
      </view>
    </xd-dailog>
  </view>
</template>

<script>
  import XdDailog from "@/components/XdDailog/XdDailog";
  import XdButton from "@/components/XdButton/XdButton";

  export default {
    name: "SetPassword",
    props: {
      show: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      },
      editPhone: {
        type: String,
        default: ''
      },
      showClose: {
        type: Boolean,
        default: true
      }
    },
    components: {
      XdDailog,
      XdButton
    },
    data() {
      return {
        form: {
          sms_code: '',
          phone: '', //手机号
          password: '',
          confirmPwd: '',
        },
        status: false,
        second: 0,
        statusMsg: '获取验证码',
        codeWidth: '200',
        confirm: true,
        uiShow: false
      }
    },
    created() {
      if (this.editPhone) {
        this.form.phone = this.editPhone
      }
      this.uiShow = this.show;
    },
    computed: {},
    watch: {
      'form.password': {
        handler: function (val, oldval) {
          let num = val.charAt(val.length - 1);
          let reg = new RegExp("^[0-9]*$");
          if (!reg.test(num)) {
            setTimeout(() => {
              this.form.password = val.slice(0, -1);
            }, 0);
          } else {
            setTimeout(() => {
              this.form.password = val;
            }, 0);
          }

        },
      },

      'form.confirmPwd': {
        handler: function (val, oldval) {
          let num = val.charAt(val.length - 1);
          let reg = new RegExp("^[0-9]*$");
          if (!reg.test(num)) {
            setTimeout(() => {
              this.form.confirmPwd = val.slice(0, -1);
            }, 0);
          } else {
            setTimeout(() => {
              this.form.confirmPwd = val;
            }, 0);
          }

        },
      },

      show(newVal) {
        this.uiShow = newVal;

      },

      uiShow(value) {
        this.$emit('update:show', value);
      }
    },
    methods: {
      getSmsCodeHandle() {
        //无手机号
        if (!this.form.phone) {
          this.$xdAlert({
            content: '请输入手机号!',
            time: 1500,
            isClose: false,
            zIndex: 5000
          });
          return
        }

        if (this.status) {
          return;
        }
        this.$emit('onGetCode', this.form.phone, () => {
          this.sendSmsSuccess()
        })

      },

      sendSmsSuccess() {
        this.status = true;
        this.second = 119;
        this.codeWidth = '300';
        this.statusMsg = `短信已发送:${this.second}s`;
        let time = setInterval(() => {
          this.statusMsg = `短信已发送:${this.second}s`;
          this.second--;
          if (this.second === 0) {
            clearInterval(time);
            this.status = false;
            this.second = 0;
            this.codeWidth = '200';
            this.statusMsg = '获取验证码';
          }
        }, 1000)
      },

      submit() {

        if (this.form.password.length < 6 || this.form.confirmPwd.length < 6) {
          this.$xdAlert({
            content: '密码长度不能少于六位!',
            time: 1500,
            isClose: false,
            zIndex: 5000
          });
          return
        }

        if (this.form.password !== this.form.confirmPwd) {
          this.$xdAlert({
            content: '确认密码和密码不一致!',
            time: 1500,
            isClose: false,
            zIndex: 5000
          });
          return
        }
        this.$emit('onSubmit', this.form)
      },

      handleClose() {
        this.$emit('onClose')
      }
    }
  }
</script>

<style lang="less">
  .pwd {
    font-size: @xd-font-size-base;

    &__title {
      border: 1px solid #ccc;
      padding: unit(20, rpx);
      text-align: center;
      font-size: @xd-font-size-base + 4;
      margin-bottom: unit(20, rpx);
    }

    &__form {
      margin-bottom: unit(27, rpx);

      &-item {
        display: flex;
        align-items: center;
        padding: unit(10, rpx) 0;

        input {
          font-size: @xd-font-size-base;
          border-bottom: 1px solid #ccc;
          text-align: left;
          padding: unit(10, rpx);
        }
      }
    }
  }

</style>

