<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
        <el-button
          v-if="is_edit === false"
          style="float: right; padding: 3px 0"
          type="text"
          @click="is_edit = !is_edit"
        >
          修改
        </el-button>
      </div>
      <div v-if="is_edit === false">
        <span class="item-row">姓名：{{ form.fullname }}</span>
        <span class="item-row">出生日期：{{ form.birthday }}</span>
        <span class="item-row">性别：{{ form.sex_ }}</span>
        <span class="item-row">工作经验：{{ form.experience_ }}</span>
        <span class="item-row">学历：{{ form.education_ }}</span>
        <span class="item-row">求职状态：{{ form.current_ }}</span>
        <span v-if="live_fields.marriage === true" class="item-row">
          婚姻状况：{{ form.marriage_ }}
        </span>
        <span v-if="live_fields.residence === true" class="item-row">
          现居住地：{{ form.residence | defaultFilter }}
        </span>
        <span v-if="live_fields.major === true" class="item-row">
          所学专业：{{ form.major_ }}
        </span>
        <span v-if="live_fields.height === true" class="item-row">
          身高：{{ form.height | defaultFilter }}
        </span>
        <span v-if="live_fields.householdaddress === true" class="item-row">
          籍贯：{{ form.householdaddress | defaultFilter }}
        </span>
        <span v-if="live_fields.idcard === true" class="item-row">
          身份证号：{{ form.idcard | defaultFilter }}
        </span>
        <span v-if="live_fields.custom_field_1 === true" class="item-row">
          {{ custom_field_1_cn }}：{{ form.custom_field_1 | defaultFilter }}
        </span>
        <span v-if="live_fields.custom_field_2 === true" class="item-row">
          {{ custom_field_2_cn }}：{{ form.custom_field_2 | defaultFilter }}
        </span>
        <span v-if="live_fields.custom_field_3 === true" class="item-row">
          {{ custom_field_3_cn }}：{{ form.custom_field_3 | defaultFilter }}
        </span>
        <span class="item-row">
          手机号：{{ form.contact.mobile | defaultFilter }}
        </span>
        <span v-if="live_fields.contact.email === true" class="item-row">
          邮箱：{{ form.contact.email | defaultFilter }}
        </span>
        <span v-if="live_fields.contact.weixin === true" class="item-row">
          微信：{{ form.contact.weixin | defaultFilter }}
        </span>
        <span v-if="live_fields.contact.qq === true" class="item-row">
          QQ：{{ form.contact.qq | defaultFilter }}
        </span>
      </div>
      <el-form
        v-if="is_edit"
        ref="form"
        v-loading="infoLoading"
        :inline="true"
        class="common-form"
        :model="form"
        label-width="120px"
        :rules="rules"
        :inline-message="false"
      >
        <el-form-item label="姓名" prop="fullname">
          <el-input v-model="form.fullname" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio
              v-for="item in options_sex"
              :key="item.id"
              :label="item.id"
            >
              {{ item.name }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker
            v-model="form.birthday"
            type="month"
            :editable="false"
            :clearable="false"
            placeholder="选择出生日期"
            value-format="yyyy-MM"
          />
        </el-form-item>
        <el-form-item label="最高学历" prop="education">
          <el-select v-model="form.education" placeholder="请选择">
            <el-option
              v-for="item in options_education"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="参加工作时间" prop="enter_job_time">
          <el-date-picker
            v-model="form.enter_job_time"
            type="month"
            :editable="false"
            :clearable="false"
            placeholder="选择参加工作时间"
            value-format="yyyy-MM"
            style="width:330px;"
            :disabled="enter_job_time_empty === true"
          />
          &nbsp;
          <el-checkbox
            v-model="enter_job_time_empty"
            @change="check_enter_job_time_empty"
          >
            应届生/无经验
          </el-checkbox>
        </el-form-item>
        <el-form-item label="求职状态" prop="current">
          <el-select v-model="form.current" placeholder="请选择">
            <el-option
              v-for="item in options_current"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="live_fields.marriage === true"
          label="婚姻状况"
          prop="marriage"
        >
          <el-radio-group v-model="form.marriage">
            <el-radio
              v-for="item in options_marriage"
              :key="item.id"
              :label="item.id"
            >
              {{ item.name }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="live_fields.residence === true"
          label="现居住地"
          prop="residence"
        >
          <el-input v-model="form.residence" />
        </el-form-item>
        <el-form-item
          v-if="live_fields.major === true"
          label="所学专业"
          prop="major_arr"
        >
          <el-cascader
            v-model="form.major_arr"
            :options="options_major"
            :show-all-levels="false"
          />
        </el-form-item>
        <el-form-item
          v-if="live_fields.height === true"
          label="身高"
          prop="height"
        >
          <el-input v-model.number="form.height" />
        </el-form-item>
        <el-form-item
          v-if="live_fields.householdaddress === true"
          label="籍贯"
          prop="householdaddress"
        >
          <el-input v-model="form.householdaddress" />
        </el-form-item>
        <el-form-item
          v-if="live_fields.idcard === true"
          label="身份证号"
          prop="idcard"
        >
          <el-input v-model="form.idcard" />
        </el-form-item>
        <el-form-item
          v-if="live_fields.custom_field_1 === true"
          :label="custom_field_1_cn"
          prop="custom_field_1"
        >
          <el-input v-model="form.custom_field_1" />
        </el-form-item>
        <el-form-item
          v-if="live_fields.custom_field_2 === true"
          :label="custom_field_2_cn"
          prop="custom_field_2"
        >
          <el-input v-model="form.custom_field_2" />
        </el-form-item>
        <el-form-item
          v-if="live_fields.custom_field_3 === true"
          :label="custom_field_3_cn"
          prop="custom_field_3"
        >
          <el-input v-model="form.custom_field_3" />
        </el-form-item>
        <el-form-item label="手机号" prop="contact.mobile">
          <el-input v-model="form.contact.mobile" />
        </el-form-item>
        <el-form-item
          v-if="live_fields.contact.weixin === true"
          label="微信"
          prop="contact.weixin"
        >
          <el-input v-model="form.contact.weixin" />
        </el-form-item>
        <el-form-item
          v-if="live_fields.contact.email === true"
          label="邮箱"
          prop="contact.email"
        >
          <el-input v-model="form.contact.email" />
        </el-form-item>
        <el-form-item
          v-if="live_fields.contact.qq === true"
          label="QQ"
          prop="contact.qq"
        >
          <el-input v-model="form.contact.qq" />
        </el-form-item>
        <div class="clearfix" />
        <el-form-item label="照片" prop="photo_img">
          <el-upload
            class="photo-uploader"
            :action="apiUpload"
            :headers="headers"
            :show-file-list="false"
            :on-success="handlePhotoSuccess"
            :before-upload="beforePhotoUpload"
          >
            <img v-if="form.photo_img" :src="photoUrl" class="photo">
            <i v-else class="el-icon-plus photo-uploader-icon" />
          </el-upload>
          <span class="smalltip">
            <i class="el-icon-info" />
            建议尺寸120*120
          </span>
        </el-form-item>
        <div class="clearfix" />
        <el-form-item label=" ">
          <el-button
            type="primary"
            :loading="submitLoading"
            @click="onSubmit('form')"
          >
            保存
          </el-button>
          <el-button type="info" plain @click="is_edit = !is_edit">
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getFieldRule } from '@/api/configuration'
import { getClassify } from '@/api/classify'
import { validMobile, validEmail } from '@/utils/validate'
import { resumeBasic } from '@/api/resume'
import apiArr from '@/api'
import { getToken } from '@/utils/auth'

export default {
  filters: {
    defaultFilter(data) {
      return data == '' ? '未填写' : data
    }
  },
  data() {
    var validateContactMobile = (rule, value, callback) => {
      if (!validMobile(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    var validateContactEmail = (rule, value, callback) => {
      if (!validEmail(value)) {
        callback(new Error('请输入正确的邮箱'))
      } else {
        callback()
      }
    }
    var validateEnterjobtime = (rule, value, callback) => {
      if (this.enter_job_time_empty === true) {
        callback()
      } else if (value == '') {
        callback(new Error('请选择参加工作时间'))
      } else {
        callback()
      }
    }
    return {
      is_edit: false,
      submitLoading: false,
      infoLoading: true,
      headers: { admintoken: getToken() },
      fileupload_size: '',
      fileupload_ext: '',
      apiUpload: window.global.RequestBaseUrl + apiArr.upload,
      live_fields: {
        marriage: true,
        residence: true,
        major: true,
        height: true,
        householdaddress: true,
        idcard: true,
        custom_field_1: true,
        custom_field_2: true,
        custom_field_3: true,
        contact: {
          email: true,
          weixin: true,
          qq: true
        }
      },
      custom_field_1_cn: ' ',
      custom_field_2_cn: ' ',
      custom_field_3_cn: ' ',
      enter_job_time_empty: false,
      form: {
        fullname: '',
        sex: '',
        birthday: '',
        residence: '',
        height: '',
        marriage: '',
        education: '',
        enter_job_time: '',
        current: '',
        householdaddress: '',
        major_arr: [],
        major1: 0,
        major2: 0,
        idcard: '',
        custom_field_1: '',
        custom_field_2: '',
        custom_field_3: '',
        photo_img: '',
        contact: {
          mobile: '',
          email: '',
          weixin: '',
          qq: ''
        }
      },
      photoUrl: '',
      options_sex: [],
      options_education: [],
      options_major: [],
      options_current: [],
      options_marriage: [],
      rules: {
        fullname: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          {
            max: 30,
            message: '长度在 1 到 15 个字符',
            trigger: 'blur'
          }
        ],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        birthday: [
          {
            required: true,
            message: '请选择出生日期',
            trigger: 'change'
          }
        ],
        education: [
          {
            required: true,
            message: '请选择最高学历',
            trigger: 'change'
          }
        ],
        enter_job_time: [
          { validator: validateEnterjobtime, trigger: 'change' }
        ],
        current: [
          {
            required: true,
            message: '请选择求职状态',
            trigger: 'change'
          }
        ],
        photo_img: [{ required: true, message: '请上传照片', trigger: 'blur' }],
        residence: [
          {
            required: true,
            message: '请填写现居住地',
            trigger: 'blur'
          }
        ],
        marriage: [
          {
            required: true,
            message: '请选择婚姻状况',
            trigger: 'change'
          }
        ],
        major_arr: [
          {
            required: true,
            message: '请选择所学专业',
            trigger: 'change'
          }
        ],
        height: [
          { required: true, message: '请填写身高', trigger: 'blur' },
          {
            type: 'number',
            message: '身高必须为数字',
            trigger: 'blur'
          }
        ],
        householdaddress: [
          { required: true, message: '请填写籍贯', trigger: 'blur' }
        ],
        idcard: [
          {
            required: true,
            message: '请填写身份证号',
            trigger: 'blur'
          }
        ],
        custom_field_1: [
          {
            required: true,
            message: `请填写custom_field_1`,
            trigger: 'blur'
          }
        ],
        custom_field_2: [
          {
            required: true,
            message: `请填写custom_field_2`,
            trigger: 'blur'
          }
        ],
        custom_field_3: [
          {
            required: true,
            message: `请填写custom_field_3`,
            trigger: 'blur'
          }
        ],
        contact: {
          mobile: [
            {
              required: true,
              message: '请填写手机号',
              trigger: 'blur'
            },
            { validator: validateContactMobile, trigger: 'blur' }
          ],
          email: [
            {
              required: true,
              message: '请填写邮箱',
              trigger: 'blur'
            },
            { validator: validateContactEmail, trigger: 'blur' }
          ],
          weixin: [
            {
              required: true,
              message: '请填写微信',
              trigger: 'blur'
            }
          ],
          qq: [{ required: true, message: '请填写QQ', trigger: 'blur' }]
        }
      }
    }
  },
  computed: {
    config() {
      return this.$store.state.config
    }
  },
  mounted() {},
  created() {
    this.fileupload_size = this.config.fileupload_size
    this.fileupload_ext = this.config.fileupload_ext
    this.fetchInfo()
  },
  methods: {
    fetchInfo() {
      this.infoLoading = true
      getFieldRule({}, 'get')
        .then(response => {
          const { Resume, ResumeContact } = {
            ...response.data
          }
          const extra_rule = {
            Resume,
            ResumeContact
          }
          this.custom_field_1_cn = extra_rule.Resume.custom_field_1.field_cn
          this.custom_field_2_cn = extra_rule.Resume.custom_field_2.field_cn
          this.custom_field_3_cn = extra_rule.Resume.custom_field_3.field_cn
          if (extra_rule.Resume.marriage.is_display == 0) {
            this.live_fields.marriage = false
            this.rules.marriage = []
          } else if (extra_rule.Resume.marriage.is_require == 0) {
            this.rules.marriage = []
          }
          if (extra_rule.Resume.residence.is_display == 0) {
            this.live_fields.residence = false
            this.rules.residence = []
          } else if (extra_rule.Resume.residence.is_require == 0) {
            this.rules.residence = []
          }
          if (extra_rule.Resume.major.is_display == 0) {
            this.live_fields.major = false
            this.rules.major_arr = []
          } else if (extra_rule.Resume.major.is_require == 0) {
            this.rules.major_arr = []
          }
          if (extra_rule.Resume.height.is_display == 0) {
            this.live_fields.height = false
            this.rules.height = []
          } else if (extra_rule.Resume.height.is_require == 0) {
            this.rules.height = []
          }
          if (extra_rule.Resume.householdaddress.is_display == 0) {
            this.live_fields.householdaddress = false
            this.rules.householdaddress = []
          } else if (extra_rule.Resume.householdaddress.is_require == 0) {
            this.rules.householdaddress = []
          }
          if (extra_rule.Resume.idcard.is_display == 0) {
            this.live_fields.idcard = false
            this.rules.idcard = []
          } else if (extra_rule.Resume.idcard.is_require == 0) {
            this.rules.idcard = []
          }
          if (extra_rule.Resume.custom_field_1.is_display == 0) {
            this.live_fields.custom_field_1 = false
            this.rules.custom_field_1 = []
          } else if (extra_rule.Resume.custom_field_1.is_require == 0) {
            this.rules.custom_field_1 = []
          } else {
            this.rules.custom_field_1[0].message = this.rules.custom_field_1[0].message.replace(
              'custom_field_1',
              this.custom_field_1_cn
            )
          }
          if (extra_rule.Resume.custom_field_2.is_display == 0) {
            this.live_fields.custom_field_2 = false
            this.rules.custom_field_2 = []
          } else if (extra_rule.Resume.custom_field_2.is_require == 0) {
            this.rules.custom_field_2 = []
          } else {
            this.rules.custom_field_2[0].message = this.rules.custom_field_2[0].message.replace(
              'custom_field_2',
              this.custom_field_2_cn
            )
          }
          if (extra_rule.Resume.custom_field_3.is_display == 0) {
            this.live_fields.custom_field_3 = false
            this.rules.custom_field_3 = []
          } else if (extra_rule.Resume.custom_field_3.is_require == 0) {
            this.rules.custom_field_3 = []
          } else {
            this.rules.custom_field_3[0].message = this.rules.custom_field_3[0].message.replace(
              'custom_field_3',
              this.custom_field_3_cn
            )
          }
          if (extra_rule.ResumeContact.email.is_display == 0) {
            this.live_fields.contact.email = false
            this.rules.contact.email = []
          } else if (extra_rule.ResumeContact.email.is_require == 0) {
            this.rules.contact.email = []
          }
          if (extra_rule.ResumeContact.weixin.is_display == 0) {
            this.live_fields.contact.weixin = false
            this.rules.contact.weixin = []
          } else if (extra_rule.ResumeContact.weixin.is_require == 0) {
            this.rules.contact.weixin = []
          }
          if (extra_rule.ResumeContact.qq.is_display == 0) {
            this.live_fields.contact.qq = false
            this.rules.contact.qq = []
          } else if (extra_rule.ResumeContact.qq.is_require == 0) {
            this.rules.contact.qq = []
          }
          return getClassify({
            type: 'resumeSex,education,major,current,marriage'
          })
        })
        .then(response => {
          this.options_sex = [...response.data.resumeSex]
          this.options_education = [...response.data.education]
          this.options_major = [...response.data.major]
          this.options_current = [...response.data.current]
          this.options_marriage = [...response.data.marriage]
          const param = {
            id: this.$route.query.id
          }
          return resumeBasic(param, 'get')
        })
        .then(response => {
          this.form = { ...this.form, ...response.data.info }
          this.form.height =
            this.form.height != '' ? parseInt(this.form.height) : ''
          if (response.data.info.contact != null) {
            this.form.contact = { ...response.data.info.contact }
          }
          this.photoUrl = response.data.photoUrl
          if (this.form.enter_job_time == '') {
            this.enter_job_time_empty = true
          }
          if (this.form.major1 != 0) {
            this.form.major_arr.push(this.form.major1)
          }
          if (this.form.major2 != 0) {
            this.form.major_arr.push(this.form.major2)
          }
          this.infoLoading = false
        })
        .catch(() => {})
    },
    onSubmit(formName) {
      if (this.submitLoading === true) {
        return false
      }
      this.submitLoading = true
      const insertData = { ...this.form }
      this.$refs[formName].validate(valid => {
        if (valid) {
          const tmp_major_arr = this.form.major_arr
          insertData.major1 = tmp_major_arr[0]
          insertData.major2 =
            tmp_major_arr[1] !== undefined ? tmp_major_arr[1] : 0
          resumeBasic(insertData)
            .then(response => {
              if (response.code == 200) {
                this.is_edit = false
                this.submitLoading = false
                this.$message.success(response.message)
                this.fetchInfo()
                return true
              } else {
                this.$message.error(response.message)
                return false
              }
            })
            .catch(() => {
              this.submitLoading = false
            })
        } else {
          this.submitLoading = false
          return false
        }
      })
    },
    handlePhotoSuccess(res, file) {
      if (res.code == 200) {
        this.photoUrl = URL.createObjectURL(file.raw)
        this.form.photo_img = res.data.file_id
      } else {
        this.$message.error(res.message)
        return false
      }
    },
    beforePhotoUpload(file) {
      const filetypeArr = file.type.split('/')
      const filetype = filetypeArr[1]
      const configFileExtArr = this.fileupload_ext.split(',')

      if (!configFileExtArr.includes(filetype)) {
        this.$message.error('上传文件格式不允许')
        return false
      }
      if (file.size / 1024 > this.fileupload_size) {
        this.$message.error(`上传文件最大为${this.fileupload_size}kb`)
        return false
      }
      return true
    },
    check_enter_job_time_empty(val) {
      if (val === true) {
        this.form.enter_job_time = ''
      }
    }
  }
}
</script>

<style scoped>
.photo-uploader {
  display: inline-block;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  width: 122px;
  height: 122px;
}
.photo-uploader img {
  width: 120px;
  height: 120px;
  border-radius: 6px;
}
.photo-uploader:hover {
  border-color: #409eff;
}
.photo-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.el-form-item {
  margin-bottom: 28px;
  width: 600px;
}
.item-row {
  width: 450px;
  color: #666;
  display: inline-block;
  margin-bottom: 16px;
  font-size: 14px;
}
.el-input,
.el-select,
.el-cascader,
.el-textarea {
  width: 450px;
}
</style>
