<template>
  <xy-page title="个人中心">
    <ul id="content-ul">
      <li>
        <label>姓名</label>
        <p>{{ userInfo.name }}</p>
      </li>
      <li>
        <label>密码</label>
        <span
          href="javascript:void(0);"
          @click="editRow()"
        >修改密码</span>
      </li>
    </ul>

    <!-- 保存记录-STR -->
    <el-dialog
      :title="editDialog.title"
      :visible.sync="editDialog.show"
      class="modal-resetpwd"
    >
      <div class="form-row form-group">
        <label class="text-right">
          <span class="require">*</span>原始密码:
        </label>
        <el-input
          v-model="editDialog.data.passwd"
          type="password"
          placeholder="请输入原始密码"
          auto-complete="off"
        />
        <span class="errmsg">{{ editDialog.errmsg.passwd }}</span>
      </div>

      <div class="form-row form-group">
        <label class="text-right">
          <span class="require">*</span>修改密码:
        </label>
        <el-input
          v-model="editDialog.data.newPasswd"
          type="password"
          placeholder="请输入修改密码"
          auto-complete="off"
        />
        <span class="errmsg">{{ editDialog.errmsg.newPasswd }}</span>
      </div>

      <div class="form-row form-group">
        <label class="text-right">
          <span class="require">*</span>确认密码:
        </label>
        <el-input
          v-model="editDialog.data.renewPasswd"
          type="password"
          placeholder="请输入确认密码"
          auto-complete="off"
        />
        <span class="errmsg">{{ editDialog.errmsg.renewPasswd }}</span>
      </div>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <xy-save
          v-model="editDialog.save"
          type="primary"
          @click="saveDialog"
        >确 定</xy-save>
        <el-button @click="editDialog.show = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 保存记录-END -->
  </xy-page>
</template>

<script>
// import userModel from '@M/user'

export default {
  name: 'AuthUserIndex',
  data() {
    return {
      // userInfo: userModel.get(),
      editDialog: {
        title: '修改密码',
        url: '/admin/auth/instance/authApp/rePasswd.do',
        data: {
          passwd: '',
          newPasswd: '',
          renewPasswd: ''
        },
        errmsg: {
          passwd: '',
          newPasswd: '',
          renewPasswd: ''
        },
        save: false,
        show: false
      }
    }
  },
  methods: {
    editRow() {
      this.editDialog = this.$options.data().editDialog
      this.editDialog.show = true
    },
    saveDialog() {
      this.editDialog.errmsg = this.$options.data().editDialog.errmsg
      if (!this.editDialog.data.passwd) {
        this.editDialog.errmsg.passwd = '请输入原始密码'
        return
      }
      if (!this.editDialog.data.newPasswd) {
        this.editDialog.errmsg.newPasswd = '请输入确认密码'
        return
      }
      if (this.editDialog.data.newPasswd !== this.editDialog.data.renewPasswd) {
        this.editDialog.errmsg.renewPasswd = '请确认二次密码一致'
        return
      }
      this.editDialog.save = true
      this.$postStream(this.editDialog.url, {
        data: this.editDialog.data,
        success: res => {
          if (res.success) {
            this.$message.warning(res.message)
            this.editDialog.show = false
          } else {
            this.$message.error(res.message)
          }
          this.editDialog.save = false
        },
        error: () => {
          this.editDialog.save = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#content-ul {
  margin-top: 20px;
  font-size: 14px;
  overflow: hidden;
  li {
    position: relative;
    width: 500px;
    overflow: hidden;
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: block;
      float: left;
    }
    label,
    p,
    i,
    em,
    span {
      width: 64px;
      height: 38px;
      line-height: 38px;
      display: block;
      float: left;
      margin-right: 10px;
    }
    p {
      width: 410px;
    }
    i,
    em,
    span {
      text-align: center;
      height: 24px;
      line-height: 24px;
      margin-top: 7px;
      color: #00aaee;
    }
    span,
    em {
      cursor: pointer;
    }
  }
}
</style>
