<template>
  <div class="main">
    <h3>{{$t('modify_personal_info')}}</h3>
    <div class="content">
      <div class="form">
        <Form ref="formCustom" :model="info" :rules="ruleCustom" :label-width="80">
          <p class="username">{{$t('account')}}：<span>{{info.username}}</span></p>
          <FormItem :label="$t('account_nickname')+':'" prop="nickname">
              <Input clearable v-model="info.nickname"/>
          </FormItem>
          <FormItem :label="$t('tel')+':'" prop="moblie">
              <Input clearable v-model="info.mobile"/>
          </FormItem>
          <FormItem :label="$t('email')+':'" prop="email">
              <Input clearable type="text" v-model="info.email" number/>
          </FormItem>
          <FormItem>
              <Button type="primary" class="btn" @click="handleSubmit('formCustom')">{{$t('submit')}}</Button>
          </FormItem>
      </Form>
      </div>
    <div class="header">
      <img :src="info.avatar||defaultHead">
      <Button @click="editHead">{{$t('alter_avatar')}}</Button>
      <Modal
          :title="$t('alter_avatar')"
          v-model="modal"
          width="50%"
          :closable="true">
            <cropper
            ref="info"
            :crop-button-text="$t('confrim')"
            v-if="modal"
            @transmitInfo="handleCroped"
          ></cropper>
          <div slot="footer">
            <!-- <Button type="text" size="large" @click="modalCanel">取消</Button> -->
          </div>
        </Modal>
    </div>
    </div>

  </div>
</template>

<script>
import headImg from '@/assets/images/headImg.jpg'
import { GetAccountInfo, SetAccountInfo } from '@/api/account.js'
import { Upload } from '@/api/user'
import { getToken } from '@/libs/util'
import Cropper from '@/components/cropper'
export default {
  components: {
    Cropper
  },
  name: 'accountSettings',
  data () {
    return {
      modal: false,
      defaultHead: headImg,
      token: getToken(),
      info: {
        username: '',
        nickname: '',
        moblie: '',
        email: '',
        avatar: ''
      },
      ruleCustom: {
        nickname: [
          { type: 'string', min: 1, max: 20, message: this.$t('nickname_length_error_tips') }
        ],
        phone: [
          // { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误', trigger: 'blur' }
        ],
        email: [
          // { pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '邮箱格式错误', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    handleSubmit () {
      if (this.info.moblie && !/^1[3-9]\d{9}$/.test(this.info.moblie)) {
        return this.$Message.error(this.$t('tel_input_error'))
      }
      if (this.info.email && !/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(this.info.email)) {
        return this.$Message.error(this.$t('email_input_error'))
      }
      // console.log(this.info)
      const data = new FormData()
      data.append('access_token', this.token)
      for (const key in this.info) {
        if (this.info[key]) {
          data.append(key, this.info[key])
        }
      }
      SetAccountInfo(data).then(res => {
        // console.log(res)
        if (res.ret === 200) {
          if (res.data.is_update) {
            this.$Message.success(this.$t('successfully_altered'))
            setTimeout(() => {
              this.$router.push({ name: 'accountInfo' })
            }, 1000)
          } else {
            this.$Message.success(this.$t('nothing_altered'))
          }
        } else {
          this.$Message.error(this.$t('fail_altered'))
        }
      })
    },
    getInfo () {
      const data = new FormData()
      data.append('access_token', this.token)
      GetAccountInfo(data).then(res => {
        this.info = res.data.profile
        this.info.avatar = res.data.profile.avatar || this.defaultHead
      })
    },
    editHead () {
      this.modal = true
    },
    handleCroped (fileData) {
      if (/image/i.test(fileData.type)) {
        const formdata = new FormData()
        formdata.append('access_token', this.token)
        formdata.append('file', fileData.updataFile)
        Upload(formdata).then((res) => {
          if (res.ret === 200) {
            this.modal = false
            this.info.avatar = res.data.url || defaultHead
          } else {
            this.modal = false
            this.$Message.error(this.$t('file_too_large_error_content'))
          }
        })
      } else {
        this.$Message.error(this.$t('document_format_error_content'))
        this.modal = false
      }
    },
    modalCanel () {
      this.modal = false
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  padding: 18px;
  background-color: #fff;
  height: 800px;

  h3{
    font-size: 18px;
    padding-bottom: 20px;
  }
}
.content {
  width: 660px;
  margin: 10px 20px;
  display: flex;
  justify-content: space-between;

  .form {
    width: 350px;

    .username {
      padding: 13px 17px;
      margin-bottom: 12px;

      span {
        padding-left: 11px;
      }
    }
  }

  .header {
    display: flex;
    flex-flow: column;

    img {
      width: 150px;
      height: 150px;
      margin-bottom: 22px;
    }
  }
  .btn {
    width: 80px
  }
}
/deep/ .ivu-modal{
  top: 50px;
}
/deep/ .cropper-wrapper{
  max-height: 80%;
  .cropper-box{
    width: 80%;
    height: 300px;
    .img-box{
        width: inherit;
        height: inherit;
        img{
          width: inherit;
          height: inherit;
        }
        .cropper-container .cropper-bg{
        height: 300px;
        }
    }
  }
}

</style>
