/** 个人信息*/
<template>
  <div class="message-container">
    <div class="message-container_right">
      <el-form
        v-if="userInfo"
        :inline="true"
        v-model="userInfo"
        v-form
        data-vv-scope="form1"
      >
        <el-row :gutter="200">
          <el-col :span="24">
            <el-form-item class="imgItem">
              <el-avatar :size="88" :src="photoUrl">
                <!-- <img :src="photoUrl" /> -->
              </el-avatar>

              <el-upload
                action="string"
                :http-request="updateUserImage"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                accept=".jpg,.jpeg,.png,.gif,.ico"
                v-if="!show"
              >
                <el-button plain>修改头像</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('Navigator.UserName')">
              <ht-input v-model="userInfo.fullname" disabled></ht-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('Navigator.UserAccount')">
              <ht-input v-model="userInfo.account" disabled></ht-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="200">
          <el-col :span="12">
            <el-form-item :label="$t('Navigator.phoneNumber')">
              <ht-input v-model="userInfo.mobile" disabled></ht-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('Navigator.EmailAddress')">
              <ht-input
                v-model="userInfo.email"
                :disabled="show"
                validate="email"
              ></ht-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="200">
          <el-col :span="12">
            <el-form-item :label="$t('Navigator.UserGender')">
              <ht-input :value="userInfo.sex" disabled v-if="show"></ht-input>
              <ht-radio
                v-else
                v-model="userInfo.sex"
                permission="w"
                :rdlist="options"
                :props="{ key: 'code', value: 'desc' }"
              ></ht-radio>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('Navigator.UserStatus')">
              <!-- <div class="item">{{ userInfo.status | getUserStatus }}</div> -->
              <ht-input
                :value="userInfo.status | getUserStatus"
                disabled
              ></ht-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="200">
          <el-col :span="24">
            <el-form-item
              :label="$t('Navigator.HomeAddress')"
              style="width: 100%"
            >
              <ht-input
                v-model="userInfo.address"
                :disabled="show"
                :validate="{
                  regex: {
                    exp: '^[\\s\\S]{0,100}$',
                    message: '内容超出输入限制',
                  },
                }"
              ></ht-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="200">
          <el-col :span="24">
            <el-form-item style="width: 100%" :label="$t('Navigator.Role')">
              <div v-if="roleInfo.roleName">
                <span v-for="name in roleInfo" :key="name">
                  <el-tag type="warning">{{ name }}</el-tag>
                </span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item style="width: 100%" :label="$t('Navigator.Position')">
              <el-tooltip
                v-for="post in postInfo"
                :key="post.postId"
                placement="top"
                :content="post.pathName"
              >
                <el-tag type="success">{{ post.postName }}</el-tag>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              style="width: 100%"
              :label="$t('Navigator.Organization')"
            >
              <el-tooltip
                v-for="(org, index) in allOrgInfo"
                :key="index"
                placement="top"
                :content="org.pathName"
              >
                <el-tag>{{ org.orgName }}</el-tag>
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="bottom">
        <el-button type="primary" v-if="show" @click="() => (show = false)">
          编辑
        </el-button>
        <el-button type="primary" v-if="!show" @click="saveClick">
          保存
        </el-button>
        <el-button v-if="!show" @click="() => ((show = true), check())">
          取消
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import req from '@/utils/request'
  import { fileUpload } from '@/api/uc'
  import { downloadImg } from '@/api/portal'
  import { getDetailByAccountOrId, userUpdateUser } from '@/api/user'
  const { uc, form, portal, bpmModel, bpmRunTime, auth } = window.context
  import utils from 'hotent-ui/src/utils.js'

  export default {
    filters: {
      getUserStatus(val) {
        switch (val) {
          case 1:
            return '正常'
          case 0:
            return '禁用'
          case -1:
            return '未激活'
          default:
            return '离职'
        }
      },
    },

    data() {
      return {
        photoUrl: require('@/assets/images/defaultPhoto.jpg'),

        show: true,
        options: '[{"code":"男","desc":"男"},{"code":"女","desc":"女"}]',
        orgInfo: [],
        postInfo: {},
        roleInfo: {},
        userInfo: {},
        allOrgInfo: [],
        fileList: [],
      }
    },
    //   watch: {
    //     personalInfoVisible(val) {
    //       if (val && this.accountInfo) {
    //         this.orgInfo = this.accountInfo.org
    //         this.allOrgInfo = this.accountInfo.allOrgMap
    //         this.postInfo = this.accountInfo.post
    //         this.roleInfo = this.accountInfo.role
    //         this.userInfo = this.accountInfo.user
    //       }
    //     },
    // },
    mounted() {
      this.check()
    },
    methods: {
      //查询
      check() {
        const { account } = this.$store.state.user
        getDetailByAccountOrId(account).then((data) => {
          if (data) {
            this.accountInfo = data
            this.orgInfo = this.accountInfo.org
            this.allOrgInfo = this.accountInfo.allOrgMap
            this.postInfo = this.accountInfo.post
            this.roleInfo = this.accountInfo.role
            this.userInfo = this.accountInfo.user
            this.getSrc()
          }
        })
      },
      //头像上传
      updateUserImage(param) {
        const formData = new FormData()
        formData.append('files', param.file)
        fileUpload(formData)
          .then((response) => {
            this.userInfo.photo = response.fileId
            this.$store.commit('user/setAvatar', response.fileId)
            this.getSrc()
            param.onSuccess() // 上传成功的图片会显示绿色的对勾
          })
          .catch((response) => {
            param.onError()
          })
      },
      //获取图片
      getSrc() {
        let _this = this
        req({
          url: `${portal}/system/file/v1/preview?fileId=${this.userInfo.photo}`,
          method: 'get',
          responseType: 'blob',
        }).then((response) => {
          if (response.size > 0) {
            var blob = response
            var reader = new FileReader()
            reader.readAsDataURL(blob)
            reader.onload = function (e) {
              _this.photoUrl = e.target.result
            }
          }
        })
      },
      handleRemove(file, fileList) {},
      uploadClick(file, fileList) {
        this.userInfo.img = file.raw
      },
      //头像上传
      beforeAvatarUpload(file) {
        var FileExt = file.name.replace(/.+\./, '')
        let arr = ['jpg', 'jepg', 'png', 'gif', 'ico']
        if (arr.indexOf(FileExt.toLowerCase()) === -1) {
          this.$message({
            type: 'warning',
            message: '请上传后缀名为jpg、png、gif、ico、jepg类型的图片',
          })
          return false
        }
      },
      //保存
      saveClick() {
        utils
          .validateForm(this, 'form1')
          .then((r) => {
            userUpdateUser(this.userInfo).then((res) => {
              if (res.state) {
                this.$message.success(res.message)
                this.show = true
              }
            })
          })
          .catch((items) => {})
      },
    },
  }
</script>

<style lang="scss" scoped>
  .message-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: 100%;
    &_right {
      border-radius: 12px 12px 12px 12px;
      background: $base-color-white !important;
      width: 100%;
      height: 100%;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .el-tooltip,
  .el-tag {
    background: #f5f5f5 !important;
    border-color: #f5f5f5 !important;
    color: black !important;
  }
  .el-form {
    width: 50vw;
  }

  .el-form-item {
    width: 100%;
  }
  ::v-deep .el-form-item__content {
    width: calc(100% - 70px);
    .inputs {
      width: 100%;
    }
    & .el-tag:nth-child(n + 2) {
      margin-left: 20px;
    }
  }
  ::v-deep .el-input.is-disabled .el-input__inner {
    border: none !important;
    background: #f5f5f5 !important;
  }
  .imgItem {
    ::v-deep .el-form-item__content {
      display: flex;
      align-items: center;
    }
    ::v-deep .el-upload-list {
      display: none !important;
    }
    ::v-deep .el-button {
      margin-left: 16px;
      border-color: var(--themeColor) !important;
      color: var(--themeColor) !important;
    }
    ::v-deep {
      .el-avatar {
        img {
          width: 100%;
        }
      }
    }
  }
  ::v-deep .el-button {
    width: 108px;
  }
  .bottom {
    z-index: 99;
    text-align: center;
    .el-button {
      margin: 20px;
    }
  }
  .message-container_right {
    display: flex;
    flex-direction: column;
  }
</style>