<template>
  <div class="vote-submit">
    <h1 class="vote-submit__title">紫荆校友自荐信息填写</h1>
    <p class="vote-submit__tips">
      注：以下填写信息将在投票页面予以公示，请自荐人如实认真填写；如一次无法填写完成，建议将填写内容粘贴至WORD文档保存，防止下次打开时遗失已填写内容。
    </p>
    <v-form ref="form" :model="formModel" :fields="fields" @submit="onSubmit">
      <input type="button" value="提交" class="submit-button" @click="handleSubmit" />
    </v-form>
  </div>
</template>

<script>
import VForm from '@/components/Form'
import * as api from '@/api/vote'

export default {
  name: 'VoteApply',
  components: { VForm },
  data() {
    return {
      applyCityList: [],
      formModel: {
        vote_config_id: '',
        name: '',
        gender: '',
        area: '',
        class: '',
        company: '',
        job: '',
        email: '',
        phone: '',
        address: '',
        honor: '',
        recommend: '',
        photo: ''
      }
    }
  },
  watch: {
    formModel: {
      deep: true,
      handler(data) {
        window.localStorage.setItem('voteApply', JSON.stringify(data))
      }
    }
  },
  computed: {
    fields() {
      return [
        {
          fieldType: 'select',
          name: 'vote_config_id',
          required: true,
          placeholder: '请选择地区',
          rules: [{ required: true, message: '请选择地区' }],
          values: this.applyCityList,
          valueKey: 'name'
        },
        {
          name: 'name',
          label: '姓名',
          required: true,
          placeholder: '请输入姓名',
          rules: [{ required: true, message: '请输入姓名' }]
        },
        {
          fieldType: 'select',
          name: 'gender',
          label: '性别',
          required: true,
          placeholder: '请选择性别',
          rules: [{ required: true, message: '请选择性别' }],
          values: [
            { name: '1', text: '男' },
            { name: '0', text: '女' }
          ],
          valueKey: 'name'
        },
        {
          fieldType: 'area',
          name: 'area',
          label: '城市',
          required: true,
          placeholder: '选择所在城市',
          rules: [{ required: true, message: '选择所在城市' }]
        },
        {
          name: 'class',
          label: '班级',
          required: true,
          placeholder: '请输入班级',
          rules: [{ required: true, message: '请输入班级' }]
        },
        {
          name: 'company',
          label: '目前工作单位',
          required: true,
          placeholder: '请输入目前工作单位',
          rules: [{ required: true, message: '请输入目前工作单位' }]
        },
        {
          name: 'job',
          label: '职务',
          required: true,
          placeholder: '请输入职务',
          rules: [{ required: true, message: '请输入职务' }]
        },
        {
          name: 'email',
          label: '电子邮箱',
          required: true,
          placeholder: '请输入电子邮箱',
          rules: [
            {
              required: true,
              validator: value =>
                /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/.test(
                  value
                ),
              message: '请输入电子邮箱'
            }
          ]
        },
        {
          name: 'phone',
          label: '联系电话',
          required: true,
          placeholder: '请输入联系电话',
          maxLength: 11,
          rules: [{ required: true, validator: value => /^1[3-9]\d{9}$/.test(value), message: '请输入联系电话' }]
        },
        {
          name: 'address',
          label: '常住地址',
          required: true,
          placeholder: '请输入常住地址',
          rules: [{ required: true, message: '请输入常住地址' }]
        },
        {
          type: 'textarea',
          name: 'honor',
          label: '个人曾获得的社会荣誉列举',
          required: true,
          placeholder: '请列举个人曾获得的社会荣誉',
          autosize: { maxHeight: 100, minHeight: 80 },
          rules: [{ required: true, message: '请列举个人曾获得的社会荣誉' }]
        },
        {
          type: 'textarea',
          name: 'recommend',
          label:
            '推荐说明（包含您对校友会工作的认识、您会在哪些方面为校友工作做出贡献、您目前是否有足够的时间担任该职务等，不少于150字）',
          required: true,
          placeholder: '推荐说明',
          autosize: { maxHeight: 200, minHeight: 120 },
          rules: [
            { required: true, message: '请输入推荐说明' },
            {
              validator: value => value.length > 150,

              message: '内容不少于150字'
            }
          ]
        },
        {
          fieldType: 'uploader',
          name: 'photo',
          label: '上传个人一寸免冠清晰证件照,投票时公示使用。（图片大小400K以内）',
          required: true,
          maxSize: 400 * 1024,
          rules: [{ required: true, message: '请上传图片' }]
        }
      ]
    }
  },
  methods: {
    getApplyCity() {
      api.getApplyCity().then(response => {
        const list = []
        for (const key in response) {
          list.push({ name: key, text: response[key] })
        }
        this.applyCityList = list
      })
    },
    handleSubmit() {
      this.$refs.form.submit()
    },
    onSubmit(data) {
      const ruleForm = this.$refs.form.ruleForm
      data.vote_config_id = ruleForm.vote_config_id
      // 头像
      if (data.photo) {
        const [first = { url: '' }] = data.photo
        data.photo = first.url
      }
      // 城市
      if (data.area) {
        const [province, city] = data.area.split('-')
        data.province = province
        data.city = city
      }
      delete data.area
      api.submitApply(data).then(response => {
        if (response.success) {
          this.$dialog
            .alert({
              confirmButtonText: '确定',
              message: '已完成提交'
            })
            .then(() => {
              window.localStorage.removeItem('voteApply')
            })
        } else {
          this.$toast(response.message)
        }
      })
    }
  },
  beforeMount() {
    const voteApply = window.localStorage.getItem('voteApply')
    if (voteApply) {
      this.formModel = JSON.parse(voteApply)
    }
    this.getApplyCity()
  }
}
</script>

<style lang="scss" scoped>
.vote-submit {
  margin: 0 20px;
  ::v-deep .van-field__label {
    width: auto;
  }
  ::v-deep .van-uploader {
    width: 1.6rem;
  }
}
.vote-submit__title {
  font-size: 20px;
  padding: 20px 0;
  text-align: center;
}
.vote-submit__tips {
  line-height: 1.5;
  padding-bottom: 20px;
}
</style>
