<!-- 用户下拉菜单组件 -->
<template>
  <div>
    <ul class="user-component">
      <li class="user">
        <el-dropdown>
        <span class="el-dropdown-link">
          <i class="el-icon-pt-daohang-yonghu" style="font-size:22px"></i>
          <span class="username">{{username}}</span>
          <i class="el-icon-pt-jiantouxia" style="font-size:22px"></i>
        </span>
          <el-dropdown-menu slot="dropdown">
            <slot name="item"></slot>
            <el-dropdown-item><span @click="openReset">修改密码</span></el-dropdown-item>
            <el-dropdown-item><span @click="loginOut">注 销</span></el-dropdown-item>
          </el-dropdown-menu>

        </el-dropdown>
      </li>
      <li v-if="msgcenter">
        <router-link class="message-button" v-if="msgcenter" :to="msgcenter">
          <i class="el-icon-pt-daohang-xiaoxi" style="font-size:22px;vertical-align: middle"></i>
          <span v-if="msgcount" class="message-number">{{ msgcount }}</span>
        </router-link>
      </li>
      <slot></slot>
    </ul>
    <!-- 修改密码的model dialog -->
    <el-dialog size="tiny"
               top="80px"
               title="修改密码"
               :show-close="false"
               :modal="modal"
               v-model="resetShow">
      <el-form>
        <el-form-item label="旧密码">
          <el-input auto-complete="off" type="password" v-model="oldPwd"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input auto-complete="off" type="password" v-model="newPwd"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input auto-complete="off" type="password" v-model="reNewPwd"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetShow = false">取 消</el-button>
        <el-button type="primary" @click="checkPwd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script type="text/javascript">
  export default {
    name: 'elAppUser',
    data() {
      return {
        resetShow: false,
        modal: false,
        oldPwd: '',
        newPwd: '',
        reNewPwd: ''
      };
    },
    props: {
      username: {
        type: String,
        default: 'username'
      },
      messageCount: {
        type: Number,
        default: 0
      },
      msgcenter: {
        type: String,
        default: '/index'
      },
      msgcount: {
        type: Number,
        default: 0
      }
    },
    created() {
      console.log('+++++++++++++++++');
      console.log(JSON.stringify(this.showMessage));
    },
    methods: {
      getCookie(cName) {
        let cStart;
        let cEnd;
        if (document.cookie.length > 0) {
          cStart = document.cookie.indexOf(cName + '=');
          if (cStart !== -1) {
            cStart = cStart + cName.length + 1;
            cEnd = document.cookie.indexOf(';', cStart);
            if (cEnd === -1) {
              cEnd = document.cookie.length;
            }
            return decodeURIComponent(document.cookie.substring(cStart, cEnd));
          }
        }
        return '';
      },
      openReset() {
        this.oldPwd = '';
        this.newPwd = '';
        this.reNewPwd = '';
        this.resetShow = !this.resetShow;
      },
      loginOut() {
        localStorage.removeItem('appList');
        this.$emit('logout');
      },
      checkPwd() {
        alert(1);
        if (this.oldPwd === this.newPwd) {
          this.$message({
            message: '新旧密码不能相同！',
            type: 'error'
          });
        } else if (this.newPwd !== this.reNewPwd) {
          this.$message({
            message: '两次输入的新密码不一致！',
            type: 'error'
          });
        } else {
          this.changePwd();
        }
      },
      changePwd() {
        this.$http({
          url: '/riart/sfbase/sm/user/resetPwd?id=' + this.getCookie('_A_P_id') + '&oldPwd=' + this.oldPwd + '&newPwd=' + this.newPwd,
          method: 'get'
        }).then((res) => {
          if (res.data.success) {
            this.$message({
              message: '密码修改成功',
              type: 'success'
            });
            this.resetShow = false;
            this.loginOut();
          } else {
            this.$message({
              message: res.data.error.errorMessage,
              type: 'error'
            });
          }
        }).catch(() => {
          this.$message({
            message: '密码修改失败，请重试',
            type: 'error'
          });
        });
      }
    }
  };
</script>
<style scoped>
  .username {
    max-width: 64px;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
<style>
</style>
