<template>
  <el-dialog
    v-loading="loading"
    :title="title"
    :center="true"
    align="left"
    top="5vh"
    width="600px"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    @close="closeModel"
  >
    <el-card>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            status-icon
            :rules="rulesThis"
            label-width="110px"
            class="demo-ruleForm"
          >
            <el-form-item prop="password" label="新密码：">
              <el-input
                ref="password"
                v-model="ruleForm.password"
                placeholder="新密码"
                name="password"
                type="password"
                tabindex="1"
                autocomplete="on"
              />
            </el-form-item>
            <el-form-item prop="confirmPassword" label="确认密码：">
              <el-input
                ref="confirmPassword"
                v-model="ruleForm.confirmPassword"
                placeholder="确认密码"
                name="confirmPassword"
                type="password"
                tabindex="1"
                autocomplete="on"
              />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="24" style="text-align: right">
          <el-button type="primary" @click="submitForm">保 存 </el-button>
          <el-button @click="showModelThis = false">{{
            isDetail ? "关 闭" : "取 消"
          }}</el-button>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>
<script>
import asyncRequest from '@/apis/service/interest/account'
import {
  isnumber,
  isAlphanumeric,
  validAlphabets
} from '@/utils/validate'
export default {
  name: 'Account',
  props: ['showModel', 'id', 'isDetail'],
  data() {
    const validateNewPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('新密码不能为空！'))
      } else {
        if (!isAlphanumeric(value)) {
          callback(new Error('新密码为6-16位数字字母组合！'))
        } else if (value.length < 6 || value.length > 16) {
          callback(new Error('新密码为6-16位数字字母组合！'))
        } else if (isnumber(value)) {
          callback(new Error('新密码不能为纯数字！'))
        } else if (validAlphabets(value)) {
          callback(new Error('新密码不能为纯字母！'))
        } else {
          callback()
        }
      }
    }
    const validateConfirmPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('确认密码不能为空！'))
      } else {
        if (this.ruleForm.password !== value) {
          callback(new Error('确认密码与新密码不一致！'))
        } else {
          callback()
        }
      }
    }
    return {
      roleList: [],
      loading: false,
      title: '重置密码',
      showModelThis: this.showModel,
      ruleForm: {
        id: this.id,
        password: '',
        confirmPassword: ''
      },
      rulesThis: this.rules,
      rules: {
        password: [
          { required: true, trigger: 'blur', validator: validateNewPassword }
        ],
        confirmPassword: [
          {
            required: true,
            trigger: 'blur',
            validator: validateConfirmPassword
          }
        ]
      }
    }
  },
  watch: {
    showModel: function(val) {
      this.showModelThis = val
      if (val) {
        this.initForm()
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit('cancel')
      }
    }
  },
  methods: {
    closeModel() {
      console.log('closeModel!!')
    },
    async initForm() {
      this.rulesThis = this.rules
      await this.resetForm()
    },

    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields()
          this.$refs.ruleForm.clearValidate()
          this.ruleForm = {
            id: this.id,
            password: '',
            confirmPassword: ''
          }
        }
      })
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          this.loading = true
          const obj = JSON.parse(JSON.stringify(this.ruleForm))
          const res = await asyncRequest.setpwd(obj)
          this.loading = false
          if (res.code === 0) {
            this.$notify.success({
              title: '密码修改成功！',
              message: ''
            })
            this.showModelThis = false
            // 刷新
            this.$emit('refresh')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

   <style lang="scss" scoped>
.account {
}
</style>
