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

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

export default {
  name: 'VoteApply',
  components: { VForm },
  data() {
    const UA = window.navigator.userAgent
    const isMobile = /android|iphone|ipad|ipod/i.test(UA)
    const voteApply = window.localStorage.getItem('voteApply')
    const defaultModel = {
      province: '',
      vote_config_id: '',
      name: '',
      gender: '',
      city: '',
      class: '',
      company: '',
      job: '',
      email: '',
      phone: '',
      address: '',
      honor: '',
      recommend: '',
      photo: ''
    }
    return {
      isMobile,
      applyCityList: [],
      formModel: Object.assign(defaultModel, JSON.parse(voteApply))
    }
  },
  watch: {
    formModel: {
      deep: true,
      handler(data) {
        window.localStorage.setItem('voteApply', JSON.stringify(data))
      }
    },
    'formModel.province'() {
      this.formModel.vote_config_id = ''
    }
  },
  computed: {
    classes() {
      return {
        'is-pc': !this.isMobile,
        'is-mobile': this.isMobile
      }
    },
    cityList() {
      return Object.keys(this.applyCityList).map(item => {
        return { name: item, text: item }
      })
    },
    // 学习项目
    projectlist() {
      const list = this.applyCityList[this.formModel.province] || []
      return list.map(item => {
        item.name = item.project
        item.text = item.project
        return item
      })
    },
    fields() {
      return [
        {
          fieldType: 'nativeSelect',
          name: 'province',
          label: '地区',
          required: true,
          placeholder: '请选择地区',
          rules: [{ required: true, message: '请选择地区' }],
          values: this.cityList,
          valueKey: 'name'
        },
        {
          fieldType: 'nativeSelect',
          name: 'vote_config_id',
          label: '学习项目',
          required: true,
          placeholder: '请选择学习项目',
          rules: [{ required: true, message: '请选择学习项目' }],
          values: this.projectlist,
          valueKey: 'id'
        },
        {
          name: 'name',
          label: '姓名',
          required: true,
          placeholder: '请输入姓名',
          rules: [{ required: true, message: '请输入姓名' }]
        },
        {
          fieldType: 'nativeSelect',
          name: 'gender',
          label: '性别',
          required: true,
          placeholder: '请选择性别',
          rules: [{ required: true, message: '请选择性别' }],
          values: [
            { name: '1', text: '男' },
            { name: '0', text: '女' }
          ],
          valueKey: 'name'
        },
        {
          name: 'city',
          label: '城市',
          required: true,
          placeholder: '请输入所在城市',
          rules: [{ required: true, message: '请输入所在城市' }]
        },
        // {
        //   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: 300, minHeight: 180 },
          rules: [{ required: true, message: '请列举个人曾获得的社会荣誉' }]
        },
        {
          type: 'textarea',
          name: 'recommend',
          label: '自荐说明',
          tips:
            '（包含您对校友会工作的认识、您会在哪些方面为校友工作做出贡献、您目前是否有足够的时间担任该职务等，不少于100字）',
          required: true,
          placeholder: '自荐说明',
          autosize: { maxHeight: 300, minHeight: 180 },
          rules: [
            { required: true, message: '请输入自荐说明' },
            { validator: value => value.length > 100, message: '内容不少于100字' }
          ]
        },
        {
          fieldType: 'uploader',
          name: 'photo',
          label: '上传个人一寸免冠清晰证件照,投票时公示使用。',
          tips: '（图片大小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 = response
      })
    },
    handleSubmit() {
      this.$refs.form.submit()
    },
    onSubmit(data) {
      // const ruleForm = this.$refs.form.ruleForm
      // data.vote_config_id = ruleForm.vote_config_id
      // data.gender = ruleForm.gender
      // 头像
      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() {
    this.getApplyCity()
  },
  beforeCreate() {
    if (!this.isMobile) {
      document.querySelector('#app').style.maxWidth = 'none'
    }
  },
  destroyed() {
    if (!this.isMobile) {
      document.querySelector('#app').style.maxWidth = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.is-pc {
  .vote-submit-header {
    height: 260px;
    color: #fff;
    background: url('../../assets/img/vote/vote_submit_bg.png') no-repeat;
    overflow: hidden;
  }
  .inner {
    max-width: 1000px;
    margin: 0 auto;
  }
  .vote-submit-logo {
    width: 110px;
    height: 37px;
    margin-top: 23px;
    background: url('../../assets/img/vote/vote_submit_logo.png') no-repeat;
    background-size: contain;
  }
  .vote-submit-main {
    max-width: 1000px;
    background: #fff;
    border-radius: 5px;
    margin: 15px auto 30px;
    padding: 0 40px;
  }
  .vote-submit__title {
    padding: 38px 0 50px;
    font-size: 30px;
    color: #fff;
    line-height: 42px;
    text-align: center;
  }
  .vote-submit__tips {
    font-size: 20px;
  }
  .vote-submit-main h3 {
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    font-weight: normal;
  }
  ::v-deep .van-cell {
    flex-direction: row;
  }
  ::v-deep .van-field__label {
    width: 186px !important;
    text-align: right;
    padding-top: 8px;
    margin-right: 24px;
    color: #222;
  }
  ::v-deep .form-item:nth-last-of-type(2) .van-field__label {
    text-align: center;
  }
  ::v-deep .form-item:last-of-type .van-field__label {
    text-align: left;
  }
  ::v-deep .form-item__tips {
    text-align: left;
  }
  .form {
    max-width: 470px;
    margin-left: 160px;
  }
  .submit-button {
    margin-left: 196px;
  }
}

.is-mobile {
  background: url('../../assets/img/vote/vote_submit_mobile_bg.png') no-repeat center top;
  background-size: contain;
  padding: 0 20px;
  .vote-submit-main {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    h3 {
      display: none;
    }
  }
  .vote-submit__title {
    float: left;
    span {
      display: block;
    }
    .t1 {
      margin-top: 40px;
      font-size: 23px;
      line-height: 23px;
      font-weight: 800;
      letter-spacing: 1px;
    }
    .t2 {
      margin-top: 10px;
      font-size: 18px;
      line-height: 18px;
      letter-spacing: 1px;
      font-weight: 400;
    }
  }
  .vote-submit-banner {
    float: right;
    margin-top: 15px;
    width: 137px;
    height: 95px;
    background: url('../../assets/img/vote/vote_submit_mobile_pic.png') no-repeat center top;
    background-size: contain;
  }
  .vote-submit__tips {
    clear: both;
    padding: 20px 0;
    font-size: 12px;
    color: #666;
  }
  ::v-deep .van-field__label {
    width: auto;
    padding: 0 10px;
    margin-right: 0;
  }
  .submit-button {
    margin: 20px auto 0;
  }
}

::v-deep .van-field__control {
  border-color: #f1f1f1 !important;
  border-radius: 4px;
}
::v-deep .van-field__right-icon {
  color: #666 !important;
}

.vote-submit {
  background-color: #f5f6fa;
  overflow: hidden;

  ::v-deep .van-uploader,
  ::v-deep .van-uploader__upload,
  ::v-deep .van-uploader__preview-image {
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
  }
  ::v-deep .van-uploader__upload {
    border: 1px solid #f1f1f1;
  }
  ::v-deep .van-uploader__upload-icon {
    font-size: 24px;
  }
}
.vote-submit__tips {
  line-height: 1.5;
  padding-bottom: 20px;
}
.submit-button {
  width: 148px;
  background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #c01540 100%);
  border-radius: 4px;
}
</style>
