<template>
  <div class="application">
    <div class="application__h">
      <h2 class="application__h--p">{{$t('edit_account')}}</h2>
    </div>
     <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" style="display: flex" :label-width="110" class="application__form">
      <div class="application__form--box">
        <div class="application__h--left">
          <FormItem class="formitem" :label="$t('account_level')+'：'">
            <Select clearable v-model="formValidate.member_level" style="width:300px">
                <Option v-for="item in member_type_list" :value="item.level" :key="item.level">{{ item.name }}</Option>
            </Select>
            <!-- <Input v-else placeholder="超级管理员" disabled style="width: 300px" /> -->
          </FormItem>
          <FormItem class="formitem" :label="$t('account')+'：'" prop="name">
              <Input v-model="formValidate.username" disabled placeholder="账号名可以是英文、数字、下划线或中文的组合" style="width: 300px;" />
          </FormItem>
          <FormItem class="formitem" :label="$t('password')+'：'" prop="password">
              <Input clearable v-model="formValidate.password" type="password" style="width: 300px" />
              <!-- <Input v-model="formValidate.password" :disabled="pswDisabled" type="password" style="width: 300px" /> -->
              <p class="formitem__gray">{{$t('remain_empty')}}</p>
              <p class="formitem__red">{{$t('modified_tips_1')}}</p>
              <p class="formitem__red">{{$t('modified_tips_2')}}</p>
          </FormItem>
          <FormItem class="formitem" :label="$t('nickname')+'：'" prop="nickname">
              <Input clearable v-model="formValidate.nickname" :placeholder="$t('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>
          <FormItem class="formitem" :label="$t('platform_weixin_login')+'：'" prop="p_wx_nickname">
              <Input v-model="formValidate.p_wx_nickname" disabled style="width: 300px;" />
              <p class="formitem__gray">{{$t('openid')}}: {{formValidate.p_wx_openid}}</p>
          </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('edit_avatar')}}</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">
              <!-- <Button type="text" size="large" @click="modalCanel">取消</Button> -->
            </div>
          </Modal>
        </div>
      </div>

    <div class="application__btn">
        <Button type="primary" @click="updateUser">{{$t('submit')}}</Button>
    </div>
    </Form>
  </div>
</template>

<script>
import { EditMember, GetMember, Upload, GetAllMemberLevelList } from '@/api/user'
// import { UploadByBase64 } from '@/api/data'
import Cropper from '@/components/cropper'
import { getToken } from '@/libs/util'
import headImg from '@/assets/images/headImg.jpg'
export default {
  components: {
    Cropper
  },
  data () {
    return {
      modal: false,
      pswDisabled: false,
      profileMemberLevel: 0,
      id: 0,
      token: getToken(),
      headImg,
      headImgUrl: '',
      member_type_list: [],
      formValidate: {
        username: '',
        password: '',
        nickname: '',
        mobile: '',
        email: '',
        p_wx_openid: '',
        p_wx_nickname: '',
        member_level: 0
      },
      ruleValidate: {
        password: [
          { type: 'string', min: 6, message: this.$t('pwd_length_error') }
        ],
        nickname: [
          { message: this.$t('input_please') + this.$t('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' }
        ]
      }
    }
  },
  created () {
    this.getBerLevel()
    this.getUserInfo()
  },
  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
        }
      })
    },
    // 获取我的信息
    /* ProfileFun () {
      const formdata = new FormData()
      formdata.append('access_token', this.token)
      Profile(formdata).then(res => {
        this.profileMemberLevel = res.data.profile.member_level
        if (this.profileMemberLevel === 2) {
          if (this.formValidate.member_level === 2) {
            this.pswDisabled = true
          } else {
            this.pswDisabled = false
          }
        } else if (this.profileMemberLevel === 1) {
          if (this.formValidate.member_level === 2 || this.formValidate.member_level === 1) {
            this.pswDisabled = true
          } else {
            this.pswDisabled = false
          }
        }
      })
    }, */
    // 获取会员详细信息
    getUserInfo () {
      this.id = this.$route.query.id
      const formdata = new FormData()
      formdata.append('access_token', this.token)
      formdata.append('id', this.id)
      GetMember(formdata).then(res => {
        if (res.ret === 200) {
          const data = res.data.member
          this.headImgUrl = data.avatar
          this.formValidate = { username: data.username, mobile: data.mobile, nickname: data.nickname, email: data.email, member_level: data.member_level, p_wx_openid: data.p_wx_openid, p_wx_nickname: data.p_wx_nickname }
          // this.formValidate.password = ''
        }
      })
      // this.ProfileFun()
    },
    updateUser () {
      const data = this.formValidate
      this.formValidate = data
      this.formValidate.username = data.username
      this.formValidate.password = data.password
      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('update_account_tip'),
          onOk: () => {
            this.updateUserFun()
          }
        })
      })
    },
    // 更新
    updateUserFun () {
      const formdata = new FormData()
      formdata.append('access_token', this.token)
      formdata.append('id', this.id)
      formdata.append('member_type', this.formValidate.member_level)
      if (this.formValidate.password) {
        formdata.append('password', this.formValidate.password)
      }
      if (this.formValidate.nickname) {
        formdata.append('nickname', this.formValidate.nickname)
      }
      if (this.formValidate.mobile) {
        formdata.append('mobile', this.formValidate.mobile)
      }
      if (this.formValidate.email) {
        formdata.append('email', this.formValidate.email)
      }
      if (this.headImgUrl) {
        formdata.append('avatar', this.headImgUrl)
      }
      EditMember(formdata).then(res => {
        if (res.ret === 200) {
          if (res.data.is_update || res.data.is_alter_password) {
            this.$Message.success(this.$t('update_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.$Message.success(this.$t('update_successfully'))
          this.modal = false
          this.headImgUrl = res.data.url
        } else {
          this.$Message.success(res.msg)
        }
      })
    },
    // 对话框
    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;
    &__gray{
      color: #999
    }
    &__red{
      color: red;
    }
    p{
      margin: 0;
      padding: 0;
      height: 20px;
    }
  }
  .ivu-form-item-label{
    width:100vh;
  }
  &__btn{
    margin: 20px 110px;
  }
}
/deep/.ivu-form-item-content{
  margin-left: 0!important;
}
/deep/ .cropper-wrapper{
  .cropper-box{
    width: 80%;
    height: 300px;
    .img-box{
        width: inherit;
        height: inherit;
        img{
          width: inherit;
          height: inherit;
        }
        .cropper-container .cropper-bg{
        height: 300px;
        }
    }
  }
}
</style>
