<template>
  <!-- 更换手机号弹窗 -->
  <el-dialog :title="$t('setting.setControlPassword')" visible width="500px" append-to-body :close-on-click-modal="false" :before-close="cancel">
    <el-form ref="changePhoneForm" :model="form" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item :label="$t('setting.oldMobile')" prop="oldMobile" :rules="[{ required: true, message: $t('setting.oldMobileRules') }]">
            <span>+{{ loginUser.areaCode }} {{ loginUser.mobile }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item :label="$t('setting.controlPassword')" prop="password" :rules="[{ required: true, message: $t('setting.passworkRules1') }]">
        <el-input v-model="form.password" type="password" :placeholder="$t('setting.passworkNotice1')" />
      </el-form-item>
      <el-form-item :label="$t('setting.confirmPassword')" prop="password" :rules="[{ required: true, message: $t('setting.passworkRules1') }]">
        <el-input v-model="form.confirm_password" type="password" :placeholder="$t('setting.passworkNotice1')" />
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item :label="$t('setting.mobileCode')" prop="code" :rules="[{ required: true, message: $t('setting.mobileCodeRules') }]">
            <el-input v-model="form.code" :placeholder="$t('setting.mobileCodeNotice')" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <jd-send-code :form="{ mobile: loginUser.mobile, scene: 3, areaCode: loginUser.areaCode }" />
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">{{ $t('setting.determine') }}</el-button>
      <el-button @click="cancel">{{ $t('common.cancel') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import JdSendCode from '@/components/JdSendCode/index.vue'
import { mapGetters } from 'vuex'
import { resetControlPwd } from '@/api/user'

export default {
  components: { JdSendCode },
  data() {
    return {
      form: {}
    }
  },
  computed: {
    ...mapGetters(['loginUser'])
  },
  created() {},
  methods: {
    cancel() {
      this.$emit('close')
    },
    submit() {
      // 密码强度校验
      if (!this.form.password.match(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,32}$/)) {
        return this.$message.error(this.$t('请输入6-32位数字与字母组合的密码'))
      }
      // 判断两次密码是否一致
      if (this.form.password != this.form.confirm_password) {
        return this.$message.error(this.$t('common.passwordNotSame'))
      }
      this.form.mobile = this.loginUser.mobile
      resetControlPwd(this.form).then((res) => {
        this.$message.success(this.$t('common.submitSuccess'))
        this.$emit('close')
      })
    }
  }
}
</script>
