<template>
  <div class="reset-password-com">
    <dee-form
      ref="editForm"
      :form="form"
      :form-data="editData"
      form-btn-position="center"
      :rules="formRules"
      :inline="true"
    >
      <span style="display:flex">
        <el-button
          type="primary"
          class="searchBtn"
          @click="handleSubmit"
        >确定</el-button>

        <el-button
          class="searchBtn"
          @click="handleClose"
        >取消</el-button>
      </span>
    </dee-form>
  </div>
</template>
<script>
import { resetPassword } from '@/api/userSystem/user.js'
export default {
  name: 'ResetPassword',
  components: { },
  props: {
    selectionRow: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      passwordType: '',
      password1Type: '',
      form: {},
      formRules: {
        password: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        password1: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    editData: function() {
      const arr = [
        {
          data: [{
            key: 'password',
            title: '密码',
            hiden: this.passwordType === 'password',
            component: {
              name: 'el-input',
              type: 'text',
              autocomplete: 'off'
            },
            handler: {
              input: () => {
                this.changePasswordType()
              }
            }
          }, {
            key: 'password',
            title: '密码',
            hiden: this.passwordType !== 'password',
            component: {
              name: 'el-input',
              type: 'password',
              autocomplete: 'new-password'
            },
            handler: {
              input: () => {
                this.changePasswordType()
              }
            }
          },
          {
            key: 'password1',
            title: '确认密码',
            hiden: this.password1Type === 'password',
            component: {
              name: 'el-input',
              type: 'text',
              autocomplete: 'off'
            },
            handler: {
              input: () => {
                this.changePassword1Type()
              }
            }
          }, {
            key: 'password1',
            title: '确认密码',
            hiden: this.password1Type !== 'password',
            component: {
              name: 'el-input',
              type: 'password',
              autocomplete: 'new-password'
            },
            handler: {
              input: () => {
                this.changePassword1Type()
              }
            }
          }]
        }
      ]

      arr[0].data = arr[0].data.filter(r => !r.hiden)
      return arr
    }
  },
  watch: {
    selectionRow: {
      deep: true,
      immediate: true,
      handler: function(val) {
        this.selectionRow = val
      }
    }
  },
  methods: {
    changePasswordType(type) {
      if (this.form.password) {
        this.passwordType = 'password'
      } else {
        this.passwordType = 'text'
      }
    },
    changePassword1Type(type) {
      if (this.form.password1) {
        this.password1Type = 'password'
      } else {
        this.password1Type = 'text'
      }
    },
    handleSubmit() {
      this.$refs['editForm'].$refs.form.validate((valid, obj) => {
        if (this.form.password !== this.form.password1) {
          this.$utils.showMessageError('请检查密码是否一致')
          return
        }
        if (valid) {
          const form = {
            'ids': this.selectionRow.map(n => n.id),
            'password': this.form.password
          }
          this.handleSubmitAjax(form)
        }
      })
    },
    handleSubmitAjax(form) {
      resetPassword(form).then(res => {
        this.$emit('handleClose')
        this.$emit('getList')
        this.$utils.showMessageSuccess(res.message)
      })
    },
    handleClose() {
      this.$emit('handleClose')
    }
  }
}
</script>

<style lang="scss" >

</style>