<template lang="html">
  <div class="ibps-fixed-top my-pwd">
    <van-sticky>
      <van-nav-bar :title="generateTitle()" :left-text="$t('common.button.back')" left-arrow fixed
        @click-left="onBack" />
    </van-sticky>

    <!-- 头像 -->
    <div class="photo">
      <img :src="avatar">
    </div>

    <div class="divider" />
    <van-form @submit="onSave" @failed="onFailed" class="submitStyle">
      <van-cell-group>
        <van-field v-model="form.primitivePassword" :label="$t('platform.my.change-password.primitivePassword')"
          :placeholder="$t('platform.my.change-password.primitivePasswordPlaceholder')"
          :rules="[{ required: true, message: $t('platform.my.change-password.primitivePasswordPlaceholder') }]"
          type="password" name="my.primitivePassword" :size="size" autocomplete="off" required clearable />
        <van-field v-model="form.newPassword" :label="$t('platform.my.change-password.newPassword')"
          :placeholder="$t('platform.my.change-password.newPasswordPlaceholder')"
          :rules="[{ required: true, message: $t('platform.my.change-password.newPasswordPlaceholder') }]"
          type="password" name="my.newPassword" :size="size" autocomplete="off" required clearable />
        <van-field v-model="form.repeatPassword" :label="$t('platform.my.change-password.repeatPassword')"
          :placeholder="$t('platform.my.change-password.repeatPasswordPlaceholder')" :rules="[{ required: true, message: $t('platform.my.change-password.newPasswordPlaceholder') },
                   { validator :repeatValidator,message:$t('platform.my.change-password.repeatErrorMessage') }
          ]" type="password" name="my.repeatPassword" :size="size" autocomplete="off" required clearable />
      </van-cell-group>
      <div style="margin: 10px 0;border:0">
        <van-button block size="large" native-type="submit" color="	#1E90FF">
          {{ $t('common.button.save') }}
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
  import { changePassword } from '@/api/platform/org/user'
  import navbar from '@/mixins/navbar'
  import defaultImage from '@/assets/images/logo/lc.png'
  import { mapState } from 'vuex'
  import { getFile } from '@/utils/image'

  export default {
    mixins: [navbar],
    data() {
      return {
        form: {
          primitivePassword: '',
          newPassword: '',
          repeatPassword: ''
        },
        size: 'large'
      }
    },
    computed: {
      ...mapState('ibps/user', [
        'info'
      ]),
      // 获取用户头像
      avatar() {
        let str = "/file/getImage?attachmentId="
        const photo = this.info && this.info.employee ? (/^\d+$/.test(this.info.employee.photo) ? (str + this.info.employee.photo) : this.info.employee.photo) : null
        if (this.$utils.isEmpty(photo)) {
          return this.errorImage
        }
        return getFile(photo)
      },
      errorImage() {
        return defaultImage
      },
    },
    methods: {
      repeatValidator(val) {
        return this.form.newPassword === val
      },
      updatePassWord() {
        this.form['userIds'] = [this.$store.getters.userId]
        changePassword(this.form).then(response => {
          this.$notify({
            type: 'success',
            message: this.$t('platform.my.change-password.success')
          })
          this.$router.push({ name: 'my' })
        }).catch(e => {
          console.error(e.cause)
        })
      },
      onSave() {
        this.updatePassWord()
      },
      onFailed() {
        this.$notify({
          type: 'danger',
          message: this.$t('common.formError')
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .my-pwd {
    min-height: calc(100vh - 46px);
    background: #f8f8f8;
  }

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

  .photo {
    width: 25%;
    height: 25%;
    margin: auto;
    padding-top: 15%;
    box-sizing: border-box;


    img {
      width: 100%;
      border-radius: 50%;
      box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.4);
    }
  }

  .submitStyle {
    width: 96%;
    margin: auto;

    .van-cell-group {
      box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
      border-radius: 4%;
      padding: 0 1%;

      .van-field {


        ::v-deep .van-field__label {
          color: #6f6f70;
        }

        ::v-deep .van-field__control::-webkit-input-placeholder {
          color: #828283;
        }
      }
    }
  }
</style>