<template>
  <div class="UserAccount">
    <div class="UserAccountMain">
      <div class="CRTop">
        <div>
          <span>个人账号</span>
        </div>
      </div>
      <div class="userDetail">
        <div class="userDetailTop">
          <div class="userDetailTopOne">
            <img :src="userAvatar" alt />
          </div>
          <div class="userDetailTopsecond">
            <p>姓名：{{userDetail.name}}</p>
            <p>角色：{{userDetail.roleName}}</p>
          </div>
          <div class="userDetailTopthird">
            <p>手机号：{{userDetail.mobile}}</p>
            <p>小梯号：<el-input type="text" v-model="userDetail.account" :disabled="isAccount"></el-input><span class="spanSet" @click="setAccount">{{isAccount?'设置':'保存'}}</span></p>
          </div>
        </div>
        <div class="userDetailBottom">
          <div style="margin-bottom: 15px;">个人简介<span class="spanSet" @click="setRemarks">{{Isremarks?'编辑':'保存'}}</span></div>
          <el-input type="textarea" v-model="userDetail.remarks" :rows="5" :disabled="Isremarks"></el-input>
        </div>
      </div>
      <div class="CRTop">
        <div>
          <span>团队信息</span>
        </div>
      </div>
      <div class="CompanyList">
        <div class="CompanyListOne" v-for="item in userDetail.maintenanceCompanyList"
                      :key="item.id">
          <div class="CompanyListOneLeft">
            <img :src="item.logoImg" alt />
          </div>
          <div class="CompanyListOneRight">
            <p>团队名称：{{item.name}}</p>
            <p><span :class="item.isCertificated==1?'reCertificated':'isreCertificated'">{{item.isCertificated==0?'未认证':(item.isCertificated==1?'已认证':(item.isCertificated==2?'审核中':(item.isCertificated==3?'认证失败':'')))}}</span></p>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  name: "UserAccount",
  data() {
    return {
      userAvatar:'',
      userDetail:{},
      remarks:'',
      isAccount:true,
      Isremarks:true,
    };
  },
  created() {
    this.showUserDetail()
    this.userAvatar =JSON.parse(JSON.parse(sessionStorage.getItem('userAvatar')))
  },
  methods: {
    showUserDetail(){
      var url = "system/user/personalCenter";
      var param = {
        userId:JSON.parse(sessionStorage.getItem('user')),
        
      };
      this.axios.post(url, param).then(result => {
        var data = result;
        if(data.statusCode==="1"){
          this.userDetail = data.data
        }else{
          this.$message.error(data.message);
        }
      });
    },
    setAccount(){
      if(this.isAccount){
        this.isAccount=!this.isAccount
        
      }else{
      this.isAccount=!this.isAccount
      var url = "system/user/modifyAccount";
      var param = {
        userId:JSON.parse(sessionStorage.getItem('user')),
        account:this.userDetail.account
      };
      this.axios.post(url, param).then(result => {
        var data = result;
        if(data.statusCode==="1"){
          this.$message.success(data.message)
        }else{
          this.$message.error(data.message);
        }
      });
      }
    },
    setRemarks(){
      if(this.Isremarks){
        this.Isremarks=!this.Isremarks
        
      }else{
        this.Isremarks=!this.Isremarks
        var url = "system/user/modifyRemarks";
        var param = {
          userId:JSON.parse(sessionStorage.getItem('user')),
          remarks:this.userDetail.remarks
        };
        this.axios.post(url, param).then(result => {
          var data = result;
          if(data.statusCode==="1"){
            this.$message.success(data.message)
          }else{
            this.$message.error(data.message);
          }
        });
      }
      
      
    },

  }
};
</script>
<style lang="stylus">
span.spanSet{
      font-size: 15px;
    color: #40A9FF;
    padding-left: 10px;
    cursor pointer
}
  .UserAccount {
    height: 100%;
    .UserAccountMain{
      height: 100%;
      background: #fff;
      font-size 18px
      .userDetail{
        padding 20px 10px
        .userDetailTop{
              padding-bottom: 20px;
          div{
            display inline-block
            vertical-align top
          }
          .userDetailTopOne{
            
            img{
              width 100px
              height 100px
              border-radius: 50%;
            }
          }
          .userDetailTopsecond,.userDetailTopthird{
              margin: 0 30px;
              p{
                margin-top 10px
                .el-input{
                  width 100px
                  .el-input__inner{
                    border:none
                  }
                }
              }
          }
        }
        .userDetailbottom{
              font-size: 16px;
          div{
            margin-bottom: 15px;

          }
          .el-textarea__inner{
            background: rgb(245, 247, 249);
            border: none;
            color: rgb(102, 102, 102);
          }
        }
      }
      .CompanyList{
        padding 20px 10px
        font-size 14px
        .CompanyListOne{
          display inline-block
          width 32%
          div{
            display inline-block
            vertical-align top
          }
          .CompanyListOneLeft{
            width 20%
            img{
              width 100px
              height 100px
              border-radius: 50%;
              }
          }
           
          .CompanyListOneRight{
            width 80%
            padding: 0 30px;
            p{
              margin-top 10px
              span.reCertificated{
                padding: 5px 10px;
                background: rgba(64,169,255,1);
                border-radius: 10px;
                color: #fff;
              }
              span.isreCertificated{
                padding: 5px 10px;
                background:rgba(155,155,155,1)
                border-radius: 10px;
                color: #fff;
              }
            }
          }

        }
      }
    }
  }
</style>