<template>
  <el-dialog
    title="个人账号管理"
    width="30%"
    :visible.sync="modal"
    :close-on-click-modal="false"
    @close="$emit('cancel')"
  >
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="手机号码" prop="mobile">
        <el-input
          v-model="form.mobile"
          autocomplete="off"
          :maxlength="11"
          placeholder="请输入手机号码"
          disabled
        />
      </el-form-item>
      <!-- <el-form-item v-if="info.mobile === form.mobile" label="验证码" prop="captcha">
        <el-input v-model="form.captcha" placeholder="请输入验证码">
          <span slot="append" style="display:inline-block;text-align:center;width: 80px;" :class="isDisabled ? 'disable' : 'hand'" @click="getCode">
            {{ codeLabel }}
          </span>
        </el-input>
      </el-form-item> -->
      <el-form-item label="登录密码" prop="pwd">
        <el-input
          v-model="form.pwd"
          show-password
          autocomplete="off"
          placeholder="请输入登录密码"
        />
      </el-form-item>
      <el-form-item label="确认密码" prop="cPwd">
        <el-input
          v-model="form.cPwd"
          show-password
          autocomplete="off"
          placeholder="请再次输入密码"
        />
      </el-form-item>
      <el-form-item label="账号昵称" prop="name">
        <el-input
          v-model="form.name"
          autocomplete="off"
          placeholder="请输入账号昵称"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit('ruleForm')">确认</el-button>
      <el-button @click="modal = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import EMITKEY from '@/const/emitNameKey'
import { getItem, saveItem, getMyInfo } from '@/model/account'
import { Base64 } from 'js-base64'

const constData = ({
  nameMaxLength: '7'
})

export default {
  name: 'PersonModal',

  data() {
    const validateMobile = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入手机号码'))
      } else if (!/^\d{11}$/.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }

    const validateComfirmPwd = (rule, value, callback) => {
      if (this.pwd === value) {
        callback(new Error('确认密码和输入密码不同，请再次输入'))
      } else {
        callback()
      }
    }

    return {
      modal: true,
      ...constData,
      form: {
        mobile: null,
        captcha: null,
        pwd: null,
        cPwd: null,
        name: null
      },
      rules: {
        mobile: [{ required: true, validator: validateMobile, trigger: 'blur' }],
        captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        pwd: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
        cPwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: validateComfirmPwd, trigger: 'blur' }
        ],
        name: [{ required: true, message: '请输入账号昵称', trigger: 'blur' }]
      },

      info: {},

      isDisabled: false,
      codeLabel: '获取验证码',
      second: 0,
      timer: null
    }
  },

  created() {
    this.loadInfo()
  },

  beforeDestroy() {
    clearInterval(this.timer)
  },

  methods: {
    async loadInfo() {
      let id = ''
      const res = await getMyInfo()
      if (res.success) {
        id = res.data.info.accountId
      }
      const { success, data, msg } = await getItem({
        accountId: id
      })
      if (success) {
        this.info = data.info
        Object.assign(this.form, data)
      } else {
        this.$message.error(msg)
      }
    },

    // async getCode() {
    //   if (this.isDisabled) {
    //     return false
    //     // const { success, msg } = await ({
    //     //   mobile: this.form.mobile
    //     // })
    //     // if (success) {
    //     //   console.log('123')
    //     // } else {
    //     //   this.$message.error(msg)
    //     // }
    //   }
    //   clearInterval(this.timer)
    //   this.isDisabled = true
    //   this.second = 10
    //   this.timer = setInterval(() => {
    //     this.codeLabel = `${this.second}秒后重新发送`
    //     this.second--
    //     if (this.second < 0) {
    //       this.codeLabel = '重新发送'
    //       this.isDisabled = false
    //       clearInterval(this.timer)
    //     }
    //   }, 1000)
    // },

    handleSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.saveData()
        }
      })
    },
    async saveData() {
      const { success, msg } = await saveItem({
        data: {
          id: this.info.id,
          avatarUrl: this.info.avatarUrl,
          gender: this.info.gender,
          realname: this.info.realname,
          nickname: this.form.name,
          identifier: this.form.mobile,
          credential: Base64.encode(this.form.pwd),
          'signInType': 'MOBILE_NUMBER_PASSWORD'
        }
      })
      if (success) {
        this.modal = false
        this.$message.success('修改成功')
        this.bus.$emit(EMITKEY.ACCOUNTRELOAD)
      } else {
        this.$message.error(msg)
      }
    }
  }
}
</script>

<style scoped>
.btn-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.disable {
  cursor: not-allowed;
}
.hand {
  cursor:hand;
  cursor:pointer;
}
</style>
