<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2023-02-23 15:59:57
-->
<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :top-list="topList"
      :moren="moren"
    />
    <div class="main">
      <div class="user-info">
        <div class="title">{{ $t('MN_F_17') }}</div>
        <div class="avatar">
          <el-upload
            class="upload-demo"
            :show-file-list="false"
            :action="uploadImgUrl"
            :on-success="handleAvatarSuccess"
            :headers="headers"
          >
            <img
              v-if="userInfo.headPath==''||userInfo.headPath==null"
              style="width: 140px"
              src="@/assets/images/avatar.png"
              alt=""
            >
            <img
              v-if="userInfo.headPath"
              style="width: 140px;height: 140px"
              :src="userInfo.headPath"
              onerror="this.src='';this.οnerrοr=null"
              alt=""
            >
          </el-upload>
        </div>
        <div class="div-boxs" v-if="userInfo.userType!=9">
          <div v-if="userInfo.countryList" class="">
            <span class="" style="padding-right: 20px">{{$t('MN_F_18')}}</span>
            <span v-for="(item,index) in userInfo.countryList">
              {{ item.shortName }}<span v-if="index+1!=userInfo.countryList.length">/</span>
            </span>
          </div>
        </div>
        <div class="div-boxs" v-if="userInfo.userType!=9">
          <div v-if="userInfo.vertexList" class="">
            <span class="" style="padding-right: 20px">{{$t('MN_F_19')}}</span>
            <span v-for="(item,index) in userInfo.vertexList">
              {{ item.vertexName }}<span v-if="index+1!=userInfo.vertexList.length">/</span>
            </span>
          </div>
        </div>
        <div class="div-box" v-if="userInfo.userType!=9">
          <div class="">{{$t('MN_F_20')}}</div>
          <div class="">{{ userInfo.userName }}</div>
        </div>
        <div class="div-box" v-if="userInfo.userType!=9">
          <div class="">{{$t('MN_F_21')}}</div>
          <div class="">{{ userInfo.nickName }}</div>
        </div>
        <div class="div-box">
          <div class="">{{$t('MN_F_T_228')}}</div>
          <div class="">{{ userInfo.userName }}</div>
        </div>
        <div class="div-box">
          <div class="">{{$t('PER_DA_14')}}</div>
          <div class="">{{ userInfo.nickName }}</div>
        </div>
        <div class="div-box" v-if="userInfo.userType!=9">
          <div class="">{{$t('MN_F_22')}}</div>
          <div class="">{{ userInfo.authority==0?$t('ENU_POPUP_TYPE_1'):$t('ENU_POPUP_TYPE_2') }}</div>
        </div>
        <div class="div-box">
          <div class="">{{$t('w_0052')}}</div>
          <div class="">{{ userInfo.phonenumber }}</div>
        </div>
        <div class="div-box" v-if="userInfo.userType!=9">
          <div class="">{{$t('MN_F_24')}}</div>
          <div class="">{{ userInfo.deptName }}</div>
        </div>
        <div class="div-box" v-if="userInfo.userType!=9">
          <div class="">{{$t('MN_F_25')}}</div>
          <div v-if="userInfo.roleList" class="">{{ userInfo.roleList[0].roleName }}</div>
        </div>
        <div class="div-box" v-if="userInfo.userType!=9">
          <div class="">{{$t('PER_DA_9')}}</div>
          <div class="">{{ userInfo.creationTime }}</div>
        </div>
      </div>
      <div class="user-info" style="flex: 1;margin:0 20px;">
        <div class="title">{{$t('MN_F_26')}}</div>
        <div class="user-nav">
          <div v-for="(item,index) in userNavList" class="boxs" @click="naxIndex=index">
            <div :style="naxIndex==index?'color:#C8161D':''">{{ item.name }}</div>
            <div v-if="naxIndex==index" class="line" />
          </div>
        </div>
        <div class="lines" />
        <div class="content">
          <div v-if="naxIndex==0">
            <el-form
              ref="loginForm"
              :model="loginForm"
              :rules="rules"
              class="login-form"
              auto-complete="on"
              label-position="left"
            >
              <el-form-item :label="$t('MN_F_21')" prop="username">
                <el-input
                  ref="username"
                  v-model="loginForm.username"
                  style="width: 600px"
                  clearable
                  :placeholder="$t('S_C_70')"
                  name="username"
                  type="text"
                  tabindex="1"
                  auto-complete="on"
                />
              </el-form-item>
              <el-form-item :label="$t('w_0052')" prop="phone">
                <el-input
                  ref="phone"
                  v-model="loginForm.phone"
                  style="width: 600px"
                  clearable
                  :placeholder="$t('w_0052')"
                  name="phone"
                  type="text"
                  tabindex="1"
                  auto-complete="on"
                  max-length="11"
                />
              </el-form-item>
            </el-form>
          </div>
          <div v-if="naxIndex==1">
            <el-form
              ref="loginForm1"
              :model="loginForm1"
              :rules="rules"
              class="login-form"
              auto-complete="on"
              label-position="left"
            >
              <el-form-item style="margin-left: 12px" :label="$t('PER_DA_37')" prop="oldPassword">
                <el-input
                  ref="oldPassword"
                  v-model="loginForm1.oldPassword"
                  style="width: 600px"
                  clearable
                  :placeholder="$t('w_0348')"
                  name="username"
                  type="text"
                  tabindex="1"
                  show-password
                  auto-complete="on"
                  max-length="20"
                />
              </el-form-item>
              <el-form-item style="margin-left: 12px"  :label="$t('MN_F_29')" prop="newPassword">
                <el-input
                  ref="newPassword"
                  v-model="loginForm1.newPassword"
                  style="width: 600px"
                  clearable
                  :placeholder="$t('w_0048')"
                  name="phone"
                  type="text"
                  tabindex="1"
                  show-password
                  auto-complete="on"
                  max-length="20"
                />
              </el-form-item>
              <el-form-item :label="$t('MN_F_30')" prop="newPassword1">
                <el-input
                  ref="newPassword1"
                  v-model="loginForm1.newPassword1"
                  style="width: 600px"
                  clearable
                  :placeholder="$t('w_0050')"
                  show-password
                  name="phone"
                  type="text"
                  tabindex="1"
                  auto-complete="on"
                  max-length="20"
                />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button
        size="small"
        class="thebtn2"
      > {{ $t('ENU_P_TYPE0') }}</el-button>
      <el-button
        size="small"
        class="thebtn1"
        @click="submit"
      > {{ $t('MN_F_32') }}</el-button>
    </div>
  </div>
</template>

<script>
import Editor from '@/components/Editor'
import * as api from '@/api/translate'
import topBar from '@/components/topBar'
import { getToken } from '@/utils/auth'
export default {
  components: {
    Editor,
    topBar
  },
  data() {
    return {
      fileList: [],
      noneUploadImg: false,
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/system/manage/user/center-head',
      headers: {
        Authorization: getToken()
      },
      coverList: [],
      loginForm: {
        username: '',
        phone: ''
      },
      loginForm1: {
        oldPassword: '',
        newPassword: '',
        newPassword1: ''
      },
      naxIndex: 0,
      moren: 'userCentre',
      userNavList: [{ 'name': this.$t('MN_F_26') }, { 'name': this.$t('MN_F_34') }],
      topList: [
        {
          name: this.$t('MN_F_16'),
          path: 'userCentre'
        }
      ],
      ruleForm: {
        functionType: 1,
        startTime: '',
        endTime: '',
        websiteTypes: [],
        publishLocations: [],
        grades: []
      },
      rules: {
        oldPassword: [{ required: true, message: this.$t('w_0498'), trigger: 'blur' },
          { min: 6, max: 20, message: this.$t('w_0501'), trigger: 'blur' },
          // { pattern: /^(?=.*\d)(?=.*[a-z]).{6,20}$/, message: '请输入6-20位，由大小写字母组合的密码' }
        ],
        newPassword: [{ required: true, message:  this.$t('w_0499'), trigger: 'blur' },
          { min: 6, max: 20, message: this.$t('w_0501'), trigger: 'blur' },
          // { pattern: /^(?=.*\d)(?=.*[a-z]).{6,20}$/, message: '请输入6-20位，由大小写字母组合的密码' }
        ],
        newPassword1: [{ required: true, message: this.$t('w_0500'), trigger: 'blur' },
          { min: 6, max: 20, message: this.$t('w_0501'), trigger: 'blur' },
          // { pattern: /^(?=.*\d)(?=.*[a-z]).{6,20}$/, message: '请输入6-20位，由大小写字母组合的密码' }
        ],
        username: [{ required: true, message: this.$t('MN_F_T_778'), trigger: 'blur' }],
        phone: [{ required: true, message: this.$t('w_0053'), trigger: 'blur' },
          { pattern: /^1[3|4|5|6|7|8|9]\d{9}$/, message: this.$t('CK_KS_73') }
        ]
      },
      localList: [],
      popList: [],
      webList: [],
      gradeList: [],
      pkId: '',
      funcList: [],
      jsList: [],
      isAdmin: false,
      lookOver: false,
      userInfo: {}
    }
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    handleAvatarSuccess(response, file, fileList) {
      if (response.code == '200') {
        this.$message({
          message: response.msg,
          type: 'success'
        })
        this.userInfo.headPath = response.data.url
      }
    },
    getUserInfo() {
      api.getUserInfo().then((res) => {
        this.userInfo = res.data
      })
    },
    submit() {
      if (this.naxIndex == 0) {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            api.updateUserInfo({ 'nickName': this.loginForm.username, 'phone': this.loginForm.phone }).then((res) => {
              if (res.code == '200') {
                this.$message({
                  message: res.msg,
                  type: 'success'
                })
                this.getUserInfo()
                this.loginForm = {
                  'userName': '',
                  'phone': ''
                }
              } else {
                this.$message({
                  message: res.msg,
                  type: 'error'
                })
              }
            })
          }
        })
      }
      if (this.naxIndex == 1) {
        this.$refs.loginForm1.validate((valid) => {
          if (valid) {
            if (this.loginForm1.newPassword1 !== this.loginForm1.newPassword) {
              this.$message({
                message: this.$t('MN_F_35')
              })
              return
            }
            api.updateUserPwd({ 'oldPassword': this.loginForm1.oldPassword, 'newPassword': this.loginForm1.newPassword }).then((res) => {
              if (res.code == '200') {
                this.$message({
                  message: res.msg,
                  type: 'success'
                })
                this.getUserInfo()
                this.loginForm1 = {
                  'oldPassword': '',
                  'oldPassword1': '',
                  'newPassword': ''
                }
              } else {
                this.$message({
                  message: res.msg,
                  type: 'error'
                })
              }
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-demo{
  width: 150px;
  height: 150px;
}
::v-deep .el-form-item__error{
  left: 80px;
}
.content{
  padding: 20px 20px;
}
.lines{
  height: 4px;
  background: rgba(0,0,0,0.05);
  opacity: 1;
  position: absolute;
  top: 108px;
  width: 100%;
}
.user-info{
  width: 440px;
  height: 868px;
  background: #FFFFFF;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
  opacity: 1;
  position: relative;
  .user-nav{
    display: flex;
    .boxs{
      text-align: center;
      cursor: pointer;
      padding: 30px 30px 10px 20px;
      box-sizing: border-box;
    }
    .line{
      width: 60px;
      height: 4px;
      background: #C8161D;
      border-radius: 0px 0px 0px 0px;
      margin-top: 10px;
    }
  }
  .avatar{
    height: 190px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .div-boxs{
    //height: 60px;
    padding:15px 20px;
    line-height: 20px;
    //line-height: 60px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    color: #000;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    flex-wrap: wrap;
  }
  .div-box{
    padding:15px 20px;
    line-height: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    color: #000;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    flex-wrap: wrap;
  }
  .title{
    border-bottom: 1px solid rgba(0,0,0,0.1);
    color: #000;
    font-size: 18px;
    font-weight: 600;
    padding: 20px 0 10px 20px;
  }
}
.page {
  padding: 20px;
  background: #f9f9f9;
  font-size: 14px;
  .main {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    display: flex;
  }
  ::v-deep .el-select {
    width: 100%;
  }
}
.footer {
  height: 68px;
  background: #ffffff;
  box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
  // margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  .thebtn1 {
    background: #3181e5;
    color: #ffffff;
    padding: 9px 45px;
  }
  .thebtn2 {
    background: #cccccc;
    color: #ffffff;
    padding: 9px 45px;
  }
}
</style>
