<template>
  <div>
    <a-list
      itemLayout="horizontal"
      :dataSource="data"
    >
      <a-list-item slot="renderItem" slot-scope="item" :key="item.key">
        <a-list-item-meta>
          <a slot="title">{{ item.title }}</a>
          <span slot="description">
            <span class="security-list-description">{{ item.description }}</span>
            <span v-if="item.value"> : </span>
            <span class="security-list-value">{{ item.value }}</span>
          </span>
        </a-list-item-meta>
        <template v-if="item.actions">
          <a slot="actions" @click="item.actions.callback">{{ item.actions.title }}</a>
        </template>
      </a-list-item>
    </a-list>

    <a-modal
      title="修改密码"
      :visible="visible"
      @ok="handleOk"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
    >
      <a-form :form="form">
        <a-form-item label="旧密码" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input
            v-decorator="['oldPassword', { rules: [{ required: true, message: '请输入旧密码' }, ] }]"
            type="password"
          />
        </a-form-item>
        <a-form-item label="新密码" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input
            v-decorator="['password', { rules: [{ required: true, message: '请输入新密码' }, {min: 6, max: 16, message: '密码长度小于6或者大于16'} ] }]"
            type="password"
          />
        </a-form-item>
        <a-form-item label="确认密码" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input
            v-decorator="['confirmPassword', { rules: [{ required: true, message: '请确认新密码' }, { validator: compareToFirstPassword } ] }]"
            type="password"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <mobile-modal ref="mobileModal" @ok="handleRefreshMobile"></mobile-modal>
  </div>
</template>

<script>
import { changeUserPwd } from '@/api/upms/user'
import { encryptPassword } from '@/common/common'
import MobileModal from './modules/MobileModal'

export default {
  components: {
    MobileModal
  },
  data () {
    return {
      data: [
        { key: 1, title: '账户密码', description: '当前密码强度', value: '强', actions: { title: '修改', callback: this.showModal } },
        { key: 2, title: '密保手机', description: '已绑定手机', value: this.$store.getters.userInfo.phone, actions: { title: '修改', callback: () => { this.$refs.mobileModal.base() } } }
        // { key: 3,title: '密保问题', description: '未设置密保问题，密保问题可有效保护账户安全', value: '', actions: { title: '设置', callback: () => { this.$message.error('This is a message of error') } } },
        // { key: 4,title: '备用邮箱', description: '已绑定邮箱', value: 'ant***sign.com', actions: { title: '修改', callback: () => { this.$message.warning('This is message of warning') } } },
        // { key: 5,title: 'MFA 设备', description: '未绑定 MFA 设备，绑定后，可以进行二次确认', value: '', actions: { title: '绑定', callback: () => { this.$message.info('This is a normal message') } } }
      ],
      confirmLoading: false,
      visible: false,
      form: this.$form.createForm(this)
    }
  },
  methods: {
    handleOk (e) {
      this.confirmLoading = true
      e.preventDefault()
      this.form.validateFields(async (err, values) => {
        if (err) return
        changeUserPwd({
          password: values.password ? encryptPassword(values.password) : '',
          oldPassword: values.oldPassword ? encryptPassword(values.oldPassword) : ''
        }).then(() => {
          setTimeout(() => {
            this.confirmLoading = false
            this.$message.info(`提示：修改成功 `)
            this.handleCancel()
          }, 1500)
        }).catch(() => {
          this.confirmLoading = false
        })
      })
    },
    showModal () {
      this.visible = true
    },
    handleRefreshMobile (value) {
      this.reload()
    },
    handleCancel () {
      this.visible = false
      this.form.resetFields()
    },
    compareToFirstPassword (rule, value, callback) {
      const form = this.form
      if (value && value !== form.getFieldValue('password')) {
        // eslint-disable-next-line standard/no-callback-literal
        callback('两次输入的密码不一致')
      } else {
        callback()
      }
    },
    reload () {
      this.data = [
        { key: 1, title: '账户密码', description: '当前密码强度', value: '强', actions: { title: '修改', callback: this.showModal } },
        { key: 2, title: '密保手机', description: '已绑定手机', value: this.mobile ? this.mobile : this.$store.getters.userInfo.phone, actions: { title: '修改', callback: () => { this.$refs.mobileModal.base() } } }
        // { key: 3,title: '密保问题', description: '未设置密保问题，密保问题可有效保护账户安全', value: '', actions: { title: '设置', callback: () => { this.$message.error('This is a message of error') } } },
        // { key: 4,title: '备用邮箱', description: '已绑定邮箱', value: 'ant***sign.com', actions: { title: '修改', callback: () => { this.$message.warning('This is message of warning') } } },
        // { key: 5,title: 'MFA 设备', description: '未绑定 MFA 设备，绑定后，可以进行二次确认', value: '', actions: { title: '绑定', callback: () => { this.$message.info('This is a normal message') } } }
      ]
    }
  }
}
</script>

<style scoped>

</style>
