<template>
  <div class="max-big-box">
    <div class="info-box" v-if="pageType">
      <div class="info-title">
        <img src="~@/assets/images/xian_1.png">
        <p>账号设置</p>
        <img src="~@/assets/images/xian_2.png">
      </div>
      <div class="info-min-box-one">
        <p>姓名：</p>
        <p>{{infoData.userNick}}</p>
      </div>
      <div class="info-min-box-one">
        <p>性别：</p>
        <p>{{infoData.sex==0?"男":(infoData.sex==1?"女":"未知")}}</p>
      </div>
      <div class="info-min-box-one">
        <p>部门：</p>
        <p>{{infoData.organGroup}}</p>
      </div>
      <div class="info-min-box-one">
        <p>电话号：</p>
        <p>{{infoData.phoneNumber}}</p>
      </div>
      <div class="info-min-box-one">
        <p>账户名：</p>
        <p>{{infoData.userName}}</p>
      </div>
      <div class="info-min-box-two">
        <p>密码：</p>
        <p>********</p>
        <div class="cursor_pointer" @click="passwordClick('out')">
          <img src="~@/assets/images/icon_56.png">
          <p>修改密码</p>
        </div>
      </div>
      <div class="info-min-box-one">
        <p>角色：</p>
        <p>{{infoData.roleGroup}}</p>
      </div>
      <div class="info-min-box-three">
        <p>头像：</p>
        <img :src="infoData.avatar">
        <label class="cursor_pointer label-box" for="submit">
          <img src="~@/assets/images/icon_56.png">
          <p>修改</p>
          <input type="file"
                 name="img[]"
                 ref="clearFile"
                 @change="fileImage($event)"
                 id="submit"
                 accept="image/*"/>
        </label>
      </div>
      <div class="button-box">
        <p class="cursor_pointer" @click="buttonClick('out')">返回</p>
        <p class="cursor_pointer" @click="buttonClick('set')">保存</p>
      </div>
    </div>
    <div class="password-box" v-else>
      <div class="info-title">
        <img src="~@/assets/images/xian_1.png">
        <p>修改密码</p>
        <img src="~@/assets/images/xian_2.png">
      </div>
      <div class="password-min-box">
        <p>旧密码：</p>
        <input type="password" placeholder="请输入新密码" v-model="password">
      </div>
      <div class="password-input-box">
        <p>新密码：</p>
        <input type="password" placeholder="请输入新密码" v-model="newPassword">
      </div>
      <div class="password-input-box">
        <p>重复新密码：</p>
        <input type="password" placeholder="请重复新密码" v-model="repeatPassword">
      </div>
      <div class="button-box">
        <p class="cursor_pointer" @click="passwordClick('out')">返回</p>
        <p class="cursor_pointer" @click="passwordClick('set')">保存</p>
      </div>
    </div>
    <interactive-window
      v-if="windowType"
      :windowData="windowData"
      @windowLeftClick="windowLeftClick"
      @windowRightClick="windowRightClick"
    ></interactive-window>
  </div>
</template>

<script>
  import axios from 'axios'
  import { profile,avatar,saveAvatar,savePwd } from '@/api/userApi'
  export default {
    name: "accountSettings",//账号设置
    components:{
      interactiveWindow: resolve => {require(['@/components/interactiveWindow'], resolve)},//提示弹窗
    },
    data () {
      return {
        // 弹窗状态
        windowType:false,
        //弹窗组件数据
        windowData:{},
        //页面状态
        pageType:true,
        infoData:{},
        userImgOne:"",
        userImgTwo:"",
        password:"",
        newPassword:"",
        repeatPassword:"",
      }
    },

    created(){
      this.profile();

    },
    mounted() {
    },
    methods: {
      //获取个人信息
      async profile () {
        let self = this;
        const { data } = await profile();
        if(data.code==200){
          self.infoData = data.data;
          self.userImgOne = data.data.avatar
          self.userImgTwo = data.data.avatar
        }
      },
      //上传图片
      async fileImage(e) {
        let self = this;
        let param = new FormData();
        param.append('avatarFile ',e.target.files[0]);
        const { data } = await avatar(param);
        self.$refs.clearFile.value = '';
        self.$forceUpdate();
        if(data.code==200){
          self.userImgOne = data.msg;
          self.infoData.avatar = data.msg;
        }
      },
      //修改密码
      async passwordClick(type){
        let self = this;
        if(type=='out'){
          this.pageType = !this.pageType;
        }else if(type=='set'){
          if(!self.password){
            self.windowData = {
              type:"3",
              title:"提示",
              text:"请输入旧密码",
            };
            self.windowType = !self.windowType;
          }else if(!self.newPassword){
            self.windowData = {
              type:"3",
              title:"提示",
              text:"请输入新密码",
            };
            self.windowType = !self.windowType;
          }else if(!self.repeatPassword){
            self.windowData = {
              type:"3",
              title:"提示",
              text:"请重复新密码",
            };
            self.windowType = !self.windowType;
          }else if(self.newPassword!=self.repeatPassword){
            self.windowData = {
              type:"3",
              title:"提示",
              text:"新密码与重复输入不一致",
            };
            self.windowType = !self.windowType;
          }else{
            let param = new FormData();
            param.append('oldPassword',self.password);
            param.append('newPassword',self.newPassword);
            param.append('confirmPassWord',self.repeatPassword);
            const { data } = await savePwd(param);
            if(data.code==200){
              self.windowData = {
                type:"2",
                title:"提示",
                text:"修改成功",
              };
              self.windowType = true;
              setTimeout(function(){
                self.pageType = !self.pageType;
              },2000);
            }
          }
        }
      },
      // 修改头像并且保存
      async buttonClick(type){
        let self = this;
        if(type=='out'){
          //取消
          self.$parent.outPage();
        }else if(type=='set'){
          //修改
          if(self.userImgTwo==self.infoData.avatar){
            self.windowData = {
              type:"3",
              title:"提示",
              text:"请上传新头像",
            };
            self.windowType = !self.windowType;
          }else{
            let param = new FormData();
            param.append('avatar',self.userImgOne);
            const { data } = await saveAvatar(param);
            if(data.code==200){
              self.windowData = {
                type:"2",
                title:"提示",
                text:"修改成功",
              };
              self.windowType = true;
              setTimeout(function(){
                self.$parent.outPage();
              },2000);
            }else{
              self.infoData.avatar = self.userImgTwo;
            }
          }
        }
      },
      //弹窗组件左侧按钮方法
      windowLeftClick(){
        this.windowType = !this.windowType;
      },
      //弹窗组件右侧按钮方法
      windowRightClick(){
        this.windowType = false;
        console.log("点击确定")
        let self = this;
        setTimeout(function(){
          self.windowText();
        },500);
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    height:100%;
    width:100%;
    .info-box
      height:670px;
      width:1000px;
      margin:90px 456px 44px;
      background:url("~@/assets/images/min_back_04.png");
      background-size 100% 100%
      .info-title
        display flex
        height:74px;
        margin:0 369px 44px;
        img
          display block
          height:1px;
          width:76px;
          margin-top:38px;
        p
          width:109px;
          line-height 74px
          font-size $font_20
          color:$theme;
      .button-box
        display flex
        width:202px;
        margin:96px 399px 0;
        p
          width:92px;
          height:31px;
          line-height:31px;
          font-size:$font_12;
        p:nth-child(1)
          color:$theme;
          background:url("~@/assets/images/button_01.png");
          background-size 100% 100%
          margin-right:18px;
        p:nth-child(2)
          color:$color_ff;
          background:url("~@/assets/images/button_02.png");
          background-size 100% 100%
      .info-min-box-one
        width:430px;
        display flex
        margin:0 285px;
        p
          text-align left
          line-height:40px;
          font-size:$font_17;
        p:nth-child(1)
          color:$theme;
          width:150px;
        p:nth-child(2)
          color:$color_ff;
          width:280px;
      .info-min-box-two
        width:430px;
        display flex
        margin:0 285px;
        p
          text-align left
          line-height:40px;
          font-size:$font_17;
        p:nth-child(1)
          color:$theme;
          width:150px;
        p:nth-child(2)
          color:$color_ff;
          width:151px;
        div
          display flex
          img
            height:20px;
            width:20px;
            margin:10px 5px 0 0;
          p
            color:$theme !important;
            font-size:$font_14;
            width:62px !important;
      .info-min-box-three
        width:430px;
        display flex
        margin:0 285px;
        p
          text-align left
          line-height:40px;
          font-size:$font_17;
        p:nth-child(1)
          color:$theme;
          width:150px;
        img:nth-child(2)
          height:80px;
          width:80px;
          margin:10px 71px 0 0;
        .label-box
          display flex
          img
            height:20px;
            width:20px;
            margin:10px 5px 0 0;
          p
            color:$theme !important;
            font-size:$font_14;
            width:62px !important;
          input
            display: none;
    .password-box
      height:670px;
      width:1000px;
      margin:90px 456px 44px;
      background:url("~@/assets/images/min_back_04.png");
      background-size 100% 100%
      .info-title
        display flex
        height:74px;
        margin:0 369px 44px;
        img
          display block
          height:1px;
          width:76px;
          margin-top:38px;
        p
          width:109px;
          line-height 74px
          font-size $font_20
          color:$theme;
      .button-box
        display flex
        width:202px;
        margin:96px 399px 0;
        p
          width:92px;
          height:31px;
          line-height:31px;
          font-size:$font_12;
        p:nth-child(1)
          color:$theme;
          background:url("~@/assets/images/button_01.png");
          background-size 100% 100%
          margin-right:18px;
        p:nth-child(2)
          color:$color_ff;
          background:url("~@/assets/images/button_02.png");
          background-size 100% 100%
      .password-min-box
        margin:130px 0 0 260px;
        height:58px;
        display flex
        p:nth-child(1)
          line-height:58px;
          width:149px;
          color:$theme;
          text-align left
        input:nth-child(2)
          height:24px;
          line-height:24px;
          width:354px;
          border-bottom:1px solid $color_a1;
          margin-top:15px;
          color:$color_ff;
      .password-input-box
        margin:0 0 0 260px;
        height:58px;
        display flex
        p:nth-child(1)
          line-height:58px;
          width:149px;
          color:$theme;
          text-align left
        input:nth-child(2)
          height:24px;
          line-height:24px;
          width:354px;
          border-bottom:1px solid $color_a1;
          margin-top:15px;
          color:$color_ff;
      ::-webkit-input-placeholder
        color: $border_1;
      ::-moz-placeholder
        color: $border_1;
      ::-ms-input-placeholder
        color: $border_1;
</style>
