<template>
  <div class="ibps-fixed-top my-user-info">
    <van-nav-bar :title="generateTitle()" :left-text="$t('common.button.back')" left-arrow fixed @click-left="onBack" />
    <van-cell-group v-if="loading">
      <div class="divider" />

      <van-field label="头像" :size="size" class="photoPic">
        <template #right-icon>
          <van-uploader :deletable="false" :preview-full-image="false" :after-read="afterRead">
            <van-image v-show="$utils.isNotEmpty(employee)" :src="getImage(employee.photo)" width="50" height="50"
              round />
          </van-uploader>
        </template>
      </van-field>

      <!-- <van-cell>
        <div slot="title" class="ibps-swipe-button ibps-flex-c my-user-info_size">
          头像
        </div>
        <van-image v-show="$utils.isNotEmpty(employee)" slot="right-icon" :src="getImage(employee.photo)"
          :error-icon="defaultImage" width="50" height="50" round />
      </van-cell> -->
      <van-cell :value="employee.orgName" title="单位名称" :size="size" :value-class="className"
        :title-class="tClassName" />
      <van-field v-model="employee.name" label="客户姓名" :size="size" clearable />
      <van-field :value="employee.gender==='male'?'男':'女'" label="性别" :size="size" clearable />
      <van-field v-model="employee.mobile" label="手机号" :size="size" clearable />
      <van-field v-model="employee.qq" label="邮箱" :size="size" clearable />
      <van-field v-model="employee.address" label="地址" :size="size" clearable />
      <van-cell :value="employee.position" title="岗位" :size="size" :value-class="className" :title-class="tClassName" />
    </van-cell-group>
    <div style="border:0;width: 96%;margin:10px auto;">
      <van-button block size="large" color="#1E90FF" @click="updateInfu">保存</van-button>
    </div>
  </div>
</template>

<script>
  import { changeUserInfo } from '@/api/platform/org/user'
  import { load } from '@/api/platform/org/employee'
  import { getFile } from '@/utils/image'
  import defaultImage from '@/assets/images/logo/lc.png'
  import navbar from '@/mixins/navbar'
  import { uploadFile, getImage } from '@/api/platform/file/attachment'

  export default {
    filters: {
      sexFilter(sex) {
        if (sex === 'male') {
          return '男'
        } else if (sex === 'female') {
          return '女'
        } else {
          return ''
        }
      }
    },
    mixins: [navbar],
    data() {
      return {
        trueFile: null,
        imgId: '',
        loading: false,
        employee: {
          name: '',
          gender: '',
          wcAccount: '',
          account: '',
          mobile: '',
          orgName: '',
          qq: '',
          address: '',
          // wcAccount: '',
          org: '',
          position: '',
          photo: ''
        },
        defaultImage: defaultImage,
        size: 'large',
        className: 'my-user-info_size',
        tClassName: 'ibps-flex-c',
        roleList: []
      }
    },
    created() {
      this.loading = false
      // 获取用户信息
      load({
        employeeId: this.$store.getters.userId
      }).then(response => {
        this.loading = true
        const data = response.data
        const variables = response.variables
        // 设置用户信息
        this.employee = data || {}
        const pos = []
        if (this.employee.photo === '') {
          this.getPhotoImage(this.employee.photo)
        }
        this.roleList = variables ? variables.partyRoles.length > 0 ? variables.partyRoles : [] : []
        const positions = variables ? variables.partyPositions : []
        if (this.$utils.isNotEmpty(positions)) {
          for (var i = 0; i < positions.length; i++) {
            pos.push(positions[i].name)
          }
        }
        this.employee.position = pos.join(',')
      }).catch(e => {
        this.loading = true
        console.error(e)
      })
    },
    methods: {
      getPhotoImage(photo) {
        if (this.$utils.isNotEmpty(photo)) {
          return getFile(photo)
        } else {
          return defaultImage
        }
      },
      // 更换头像
      afterRead(file) {
        this.trueFile = file.file
        uploadFile(file.file).then(res => {
          const url = getImage(res.data.id)
          this.employee.photo = res.data.id
        })
      },
      updateInfu() {
        const arr = {
          attrValueVoList: [],
          positionVoList: [],
          roleVoList: this.roleList,
          userGroupPoList: [],
          partyEmployeePo: this.employee,
          user: this.employee
        }
        // console.log(arr)
        changeUserInfo(arr).then(res2 => {
          this.$toast('更新个人信息成功！')
        }).catch(err => {
          console.log('错误信息', err)
        })
      },
      getImage(id) {
        if (id === '') {
          return defaultImage
        }
        if (/^\d+$/.test(id)) {
          return getImage(id)
        } else {
          return getFile(id)

        }

        // return getImage(id)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .my-user-info {
    .my-user-info_size {
      font-size: 16px;
    }

    .divider {
      height: 8px;
      background: #f8f8f8;
    }

    ::v-deep .photoPic .van-field__label {

      padding-top: 5%;
      box-sizing: border-box;

    }

    ::v-deep .van-field__label {
      color: #313131;

    }

    ::v-deep .van-field__control {
      text-align: right;
      color: #999999;
      font-size: 16px;
    }
  }
</style>