<template>
  <div class="user">
    <!-- <MenuItem name="1">
      <Icon type="md-contact" />
      <Input placeholder="全文检索" style="width: 245px"><Icon type="ios-search" slot="suffix" /></Input>
      <Icon type="md-menu" />
    </MenuItem> -->
    <Dropdown @on-click="handleClick">
      <Badge :dot="!!messageUnreadCount">
        <!-- <Avatar :src="userAvatar"/> -->
        <Avatar style="background-color: rgb(0,0,0,0.2)" icon="ios-person" />
      </Badge>
      <Icon :size="18" type="md-arrow-dropdown"></Icon>
      <DropdownMenu slot="list">
        <!-- <DropdownItem name="message">
          消息中心<Badge style="margin-left: 10px" :count="messageUnreadCount"></Badge>
        </DropdownItem> -->
        <DropdownItem name="logout">退出登录</DropdownItem>
        <DropdownItem name="changePwd">修改密码</DropdownItem>
        <Dropdown placement="right-start" style="display:inline">
                <DropdownItem>
                    更换皮肤
                    <Icon type="ios-arrow-forward"></Icon>
                </DropdownItem>
                <DropdownMenu slot="list">
                    <DropdownItem name="theme-sky-blue">天蓝</DropdownItem>
                     <DropdownItem name="theme-uc-dark">UC风格</DropdownItem>
                    <DropdownItem name="theme-blue">极致蓝</DropdownItem>
                    <DropdownItem name="theme-black">淡雅黑</DropdownItem>
                    <!-- <DropdownItem name="theme-rainbow">彩虹</DropdownItem> -->
                </DropdownMenu>
        </Dropdown>
      </DropdownMenu>
    </Dropdown>
    <Modal v-model="changePwdModal" title="密码修改" footer-hide>
      <Form :model="model" ref="action" :rules="rules">
          <Form-item label="原密码" prop="old" v-validate:old.required.maxInputLength="rules">
            <Input type="password" v-model="model.old" placeholder="请输入原密码" maxlength="32"></Input>
          </Form-item>
          <Form-item label="新密码" prop="new" v-validate:new.required.maxInputLength="rules">
            <Input type="password" v-model="model.new" placeholder="请输入新密码" maxlength="32"></Input>
          </Form-item>
          <Form-item label="确认新密码" prop="newConfirm" v-validate:newConfirm.required.maxInputLength="rules">
            <Input type="password" v-model="model.newConfirm" placeholder="请输入新密码" maxlength="32"></Input>
          </Form-item>
          <Form-item style="text-align:center">
            <Button type="primary" @click="submitForm">确定</Button>
            <Button style="margin-left: 8px" @click="changePwdModal=false">关闭</Button>
          </Form-item>
      </Form>
    </Modal>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from "vue-property-decorator";

@Component
export default class user extends Vue {
  @Prop({
    type: String,
    default: () => []
  })
  private userAvatar! : string;
  private changePwdModal: boolean=false;
  private model:any={"old":"","new":"","newConfirm":""}
  rules:any={};

  @Prop({ type: Number, default: 0 }) private messageUnreadCount!: number;

  logout () {
    this.getApiData('post',this.$msPrefix.base+'/login/out',{},res=>{
       this.$cookie.remove("X-ACCESS-TOKEN");
      });
      this.$router.push({
        name: 'login'
      })
  }

  changePwd(){
    this.model={"old":"","new":"","newConfirm":""}
    this.changePwdModal=true;
  }


  save(){
        if(this.model.new!==this.model.newConfirm){
            this.$tools.message('info',"两次新密码输入不一致!")
            return;
        }
        this.getApiData('post',this.$msPrefix.base+'/api/v1/user/pwd/change',this.model,res=>{
            if (res.rtnCode == 0) {
              this.$tools.message('info',"密码修改成功！")
              this.changePwdModal=false;
            }else{
               this.$tools.message('error',res.msg)
            }
        })
    }
    /*提交*/
      submitForm () {
      	
        (this.$refs.action as any).validate((valid) => {
          if (valid) {
                this.save()
          } else {
           this.$tools.message('info',"请完善必填项!")
          }
        });
      }



  message () {
      this.$router.push({
        name: 'message_page'
      })
    }
changeTheme(name){
  jq(jq("body")[0]).removeClass().toggleClass(name);
  localStorage.setItem("theme",name);
}
  handleClick(name){
    if(name.indexOf("theme")>-1){
      this.changeTheme(name)
    }else{
      this[name]()
    }
  }
}
</script>
