<template>
  <div class="application">
    <div class="application__h">
      <p class="application__h--p">{{$t('add_account')}}</p>
    </div>
     <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100" class="application__form">
      <div class="application__form--box">
        <div class="application__h--left">
          <FormItem class="formitem" :label="$t('developer_type')+'：'" prop="member_type">
            <Select clearable v-model="member_type" style="width:300px">
                <Option v-for="item in member_type_list" :value="item.level" :key="item.level">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem class="formitem" :label="$t('account')+'：'" prop="username">
              <Input clearable v-model="formValidate.username" :placeholder="$t('account')"  style="width: 300px;" />
          </FormItem>
          <FormItem class="formitem" :label="$t('developer_pwd')+'：'" prop="password">
              <Input clearable v-model="formValidate.password" type="password" :placeholder="$t('pwd_length_error')" style="width: 300px" />
          </FormItem>
          <FormItem class="formitem" :label="$t('account_nickname')+'：'" prop="nickname">
              <Input clearable v-model="formValidate.nickname" :placeholder="$t('account_nickname')"  style="width: 300px" />
          </FormItem>
          <FormItem class="formitem" :label="$t('tel')+'：'" prop="mobile">
              <Input clearable v-model="formValidate.mobile"  :placeholder="$t('tel')"  style="width: 300px" />
          </FormItem>
          <FormItem class="formitem" :label="$t('email')+'：'" prop="email">
              <Input clearable v-model="formValidate.email"  :placeholder="$t('email')"  style="width: 300px" />
          </FormItem>
        </div>
        <div class="application__h--right">
          <img v-if="!headImgUrl " :src="headImg">
          <img v-else :src="headImgUrl" alt="">
          <Button class="application__h--right--btn" type="primary" @click="modal = true">{{$t('submit')}}</Button>
          <Modal
          :title="$t('edit_avatar')"

          v-model="modal"
          width="50%"
          :closable="true">
            <cropper
            ref="info"
            :crop-button-text="$t('submit')"
            v-if="modal"
            @transmitInfo="handleCroped"
          ></cropper>
            <div slot="footer">
            </div>
          </Modal>
        </div>
      </div>
      <div class="application__btn">
        <Button type="primary" @click="addUser">{{$t('submit')}}</Button>
      </div>
    </Form>
  </div>
</template>

<script>
import { AddMember, Upload, GetAllMemberLevelList } from '@/api/user'
// import { UploadByBase64 } from '@/api/data'
import { getToken } from '@/libs/util'
import Cropper from '@/components/cropper'
import headImg from '@/assets/images/headImg.jpg'
export default {
  components: {
    Cropper
  },
  data () {
    return {
      modal: false,
      headImg,
      headImgUrl: '',
      token: getToken(),
      /* member_type_list: [
        { value: 3, label: '个人开发者' },
        { value: 4, label: '企业开发者' },
        { value: 0, label: '普通会员' },
        { value: 1, label: '管理员' }
      ], */
      member_type_list: [],
      formValidate: {
        username: '',
        password: '',
        nickname: '',
        mobile: '',
        email: ''
      },
      ruleValidate: {
        username: [
          { required: true, message: this.$t('input_please') + this.$t('account'), trigger: 'blur' },
          { type: 'string', min: 1, max: 30, message: this.$t('new_account_tips') }
        ],
        password: [
          { required: true, message: this.$t('developer_pwd_tips'), trigger: 'blur' },
          { type: 'string', min: 6, message: this.$t('pwd_length_error') }
        ],
        nickname: [
          { message: this.$t('input_please') + this.$t('account_nickname'), trigger: 'blur' },
          { type: 'string', max: 30 }
        ],
        mobile: [
          { message: this.$t('input_please') + this.$t('tel'), trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: this.$t('tel_input_error'), trigger: 'blur' }
        ],
        email: [
          { message: this.$t('input_please') + this.$t('email'), trigger: 'blur' },
          { pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: this.$t('email_input_error'), trigger: 'blur' }
        ]
      },
      member_type: 3
    }
  },
  created () {
    this.getBerLevel()
  },
  methods: {
    // 获取用户类型
    getBerLevel () {
      const data = new FormData()
      data.append('access_token', this.token)
      GetAllMemberLevelList(data).then(res => {
        if (res.ret === 200) {
          this.member_type_list = res.data.list
        }
      })
    },
    addUser () {
      this.$refs['formValidate'].validate((val) => {
        if (!val) {
          this.$Message.error(this.$t('input_error_please_check_again'))
          return
        }
        this.$Modal.confirm({
          title: this.$t('operation_confirm'),
          content: this.$t('new_account_warning'),
          onOk: () => {
            this.addUserFun()
          }
        })
      })
    },
    addUserFun () {
      const formdata = new FormData()
      formdata.append('access_token', this.token)
      formdata.append('member_type', this.member_type)
      formdata.append('username', this.formValidate.username)
      formdata.append('password', this.formValidate.password)
      formdata.append('nickname', this.formValidate.nickname)
      formdata.append('mobile', this.formValidate.mobile)
      formdata.append('email', this.formValidate.email)
      formdata.append('avatar', this.headImgUrl)
      AddMember(formdata).then(res => {
        if (res.ret === 200 && res.data.is_add) {
          this.$Message.success(this.$t('add_successfully'))
          this.$router.push({ name: 'userList' })
        } else {
          this.$Message.error(this.$t('sumbmit_fail') + res.msg)
        }
      })
    },
    handleCroped (fileData) {
      const formdata = new FormData()
      formdata.append('access_token', this.token)
      formdata.append('file', fileData.updataFile)
      // formdata.append('file_name', fileData.name)
      Upload(formdata).then((res) => {
        if (res.ret === 200) {
          this.modal = false
          this.headImgUrl = res.data.url
        } else {
          this.modal = false
          this.$Message.warning(this.$t('file_too_large_error_content'))
        }
      })
    },
    modalCanel () {
      this.modal = false
    }
  }
}
</script>

<style  lang="scss" scoped>
.application {
  &__h{
    height:72px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 30px 0px rgba(0,0,0,0.05);
    border-radius:10px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    &--p{
      font-size:16px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      margin-left: 30px;
      color:rgba(35,35,42,1);
    }
    &--left {
      margin-right: 10%;
    }
    &--right{
      height: 80%;
      width: 120px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      img{
        width: 120px;
        height: 120px;
        border: 2px solid #999;
        margin-bottom: 30px;
      }
    }
  }
  &__form{
    display: flex;
    text-align: left;
    flex-direction: column;
    box-shadow:0px 0px 30px 0px rgba(0,0,0,0.05);
    border-radius:10px;
    background: #fff;
    &--box{
      display: flex;
      margin-top: 30px;
    }
  }
  >>>.formitem .ivu-form-item .ivu-form-item-required{
    display: flex;
    flex-direction: column;
  }
  >>> .ivu-form-item-content{
    margin-left: 0;
  }
  .formitem{
    display: flex;
  }
  .ivu-form-item-label{
    width:100vh;
  }
  &__btn{
    margin: 20px 100px;
  }
}
/deep/.ivu-form-item-content{
  margin-left: 0!important;
}
/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>
