<template>
  <!-- 密码 -->
  <van-popup
    v-model="passwordShow"
    round
    :close-on-click-overlay="false"
    :style="{
      width: '80vw',

      padding: '0.3rem',
    }"
    class="process-popup"
    v-if="passwordShow"
  >
    <div class="title">修改密码</div>

    <van-form @submit="onSubmit" :show-error="false" ref="myform">
      <div class="content">
        <van-field
          v-model="passForm.oldPassword"
          name="旧密码"
          label="旧密码"
          required
          :type="oldPassword ? 'text' : 'password'"
          placeholder="请输入原密码"
          :rules="[
            { required: true, message: '请输入旧密码', trigger: 'onChange' },
          ]"
          @click-right-icon="clickPassword('oldPassword')"
        >
          <template #right-icon>
            <i :class="!oldPassword ? 'icon-yincang' : 'icon-xianshi'"></i>
          </template>
        </van-field>

        <van-field
          v-model="passForm.newPassword"
          name="新密码"
          label="新密码"
          required
          :type="newPassword ? 'text' : 'password'"
          placeholder="请设置新密码"
          :rules="[
            {
              validator: validateNew,
              message: errorMessage,
              trigger: 'onChange',
            },
          ]"
          @click-right-icon="clickPassword('newPassword')"
        >
          <template #right-icon>
            <i :class="!newPassword ? 'icon-yincang' : 'icon-xianshi'"></i>
          </template>
        </van-field>
        <van-field
          v-model="passForm.saPassword"
          name="确认密码"
          label="确认密码"
          :type="saPassword ? 'text' : 'password'"
          required
          placeholder="请再次输入新密码"
          :rules="[
            {
              validator: validateNewReapeat,
              message: errorMessageReapeat,
              trigger: 'onChange',
            },
          ]"
          @click-right-icon="clickPassword('saPassword')"
        >
          <template #right-icon>
            <i :class="!saPassword ? 'icon-yincang' : 'icon-xianshi'"></i>
          </template>
        </van-field>
      </div>
      <van-row gutter="20" class="processButton">
        <van-col span="12">
          <van-button type="default" class="close" @click="passwordClose">
            取消
          </van-button>
        </van-col>
        <van-col span="12">
          <van-button type="info" native-type="submit">确定</van-button>
        </van-col>
      </van-row>
    </van-form>
  </van-popup>
</template>

<script>
  import { releaseWakeLock } from '@/utils/index.js'
  import { Dialog } from 'vant'
  import { encryptWithRsa } from '@/utils/index.js'
  export default {
    props: {
      account: {
        type: String,
        default: '',
      },
      loginPage: {
        type: Boolean,
        default: false,
      },
    },
    components: {
      Dialog,
    },
    data() {
      return {
        passwordShow: false,
        saPassword: false,
        newPassword: false,
        oldPassword: false,
        passForm: {
          oldPassword: '',
          newPassword: '',
          saPassword: '',
        },
        errorMessage: '',
        errorMessageReapeat: '',
      }
    },
    methods: {
      validateNewReapeat(value) {
        if (value === '') {
          this.errorMessageReapeat = '请再次输入新密码'
          return false
        } else if (value !== this.passForm.newPassword) {
          this.errorMessageReapeat = '两次输入的密码不一致'
          return false
        }
      },
      validateNew(value) {
        if (value == '') {
          this.errorMessage = '请输入新密码'
          return false
        }
        let config = this.pwdStrategy

        if (config.enable && config.enable == 1) {
          let pwdRule = config.pwdRule
          let pwdLength = config.pwdLength
          if (pwdRule) {
            if (value.length < pwdLength) {
              this.errorMessage = '新密码长度至少为' + pwdLength
              return false
            } else if (pwdRule == 2) {
              var re = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])')
              if (!re.test(value)) {
                this.errorMessage = '新密码必须包含数字、字母'
                return false
              }
            } else if (pwdRule == 3) {
              var re = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])')
              if (!re.test(value)) {
                this.errorMessage = '新密码必须包含数字、字母、特殊字符'
                return false
              }
            } else if (pwdRule == 4) {
              var re = new RegExp(
                '(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9])'
              )
              if (!re.test(value)) {
                this.errorMessage = '新密码必须包含数字、大小字母、特殊字符'
                return false
              }
            }
          }
        } else {
          if (value.length < 6) {
            this.errorMessage = '新密码长度至少为6'
            return false
          }
        }
      }, //修改密码保存
      onSubmit(values) {
        let self = this
        this.$http
          .post(`${window.context.uc}/api/user/v1/user/changUserPsd`, {
            account: this.account,
            oldPwd: encryptWithRsa(this.passForm.oldPassword),
            newPwd: encryptWithRsa(this.passForm.newPassword),
          })
          .then((data) => {
            if (data && data.state) {
              self.$refs['myform'].resetValidation()
              Dialog.alert({
                title: '提示',
                message: '修改密码成功, 请使用新密码重新登录。',
              }).then(() => {
                self.exit()
                self.passwordShow = false
                self.$emit('close')
              })
            } else {
              self.$toast.fail(data.message)
            }
          })
      }, //修改密码关闭
      passwordClose() {
        this.passForm = {}
        this.$refs['myform'].resetValidation()
        this.passwordShow = false
      },
      clickPassword(da) {
        this[da] = !this[da]
      },
      //退出登陆
      exit() {
        if (!this.loginPage) {
          let loginRouthPath =
            localStorage.getItem(
              this.$store.state.login.currentUser.account + 'loginRoutePath'
            ) || '/login'
          this.$store.dispatch('login/logoutAndCleanUp').then(() => {
            this.postMessage()
            releaseWakeLock()
            this.$router.push(loginRouthPath)
          })
        }
        this.passwordShow = false
      },
      postMessage() {
        window.uni &&
          uni.postMessage({
            data: {
              action: 'logout',
            },
          })
      },
      openResetPasswordDialog() {
        this.passwordShow = true
        this.$store.dispatch('user/getDefPwdStrategy').then((res) => {
          this.pwdStrategy = res
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import '@/styles/matterButton.scss';
  @mixin placeholder {
    color: #cccccc;
    font-weight: 400;
    font-size: 14px;
  }
  ::v-deep .van-field__label {
    width: 70px;
  }
  ::v-deep {
    input::-webkit-input-placeholder {
      /* 使用webkit内核的浏览器 */
      @include placeholder;
    }
    input:-moz-placeholder {
      /* Firefox版本4-18 */
      @include placeholder;
    }
    input::-moz-placeholder {
      /* Firefox版本19+ */
      @include placeholder;
    }
    input:-ms-input-placeholder {
      /* IE浏览器 */
      @include placeholder;
    }
    .van-cell {
      padding: 12px 12px !important;
      margin: 0 !important;
    }
    .van-field__right-icon {
      font-size: 16px;
    }
  }

  .process-popup {
    padding: 24px 16px !important;
    .title {
      text-align: center;

      font-size: 17px;
      font-weight: 800;
      color: #1a1a1a;
    }
    .content {
      margin: 16px 0 24px 0;
    }
    .van-cell::after {
      border-bottom: 0.02667rem solid #ebedf0 !important;
      display: block !important;
    }
    .processButton {
      // position: absolute;
      width: 100%;
      // bottom: 20px;
      .van-button {
        width: 100%;

        border-radius: 8px 8px 8px 8px;
      }
    }
    .van-cell__right-icon {
      color: #969799;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .van-cell::after {
      border: none;
    }
    .group-All {
      .van-cell {
        padding-bottom: 2px;
      }
    }
    .van-cell {
      padding: 12px 12px;
    }
  }
</style>