<template>
  <div>
    <div class="con-title">{{ $t('pages.affairsHall.learningAdd.title') }}</div>
    <div class="con-box">
      <el-button type="text" @click='gobackActiveList'>{{ $t('pages.affairsHall.learningAdd.backlist') }}</el-button>
      <el-row type="flex" justify="center">
        <el-col :xs="24" :sm="24" :md="16" :lg="12" :xl="8">
          <el-form :disabled="this.isFormProhibit" ref="setApplyForm" :label-width="labelWidth" :model="setApply" :rules="applyRules">
            <!-- <el-form-item label="姓名" prop="personal_name">
              <el-input v-model="setApply.personal_name" placeholder="请输入您的姓名" type="text" />
            </el-form-item>
            <el-form-item label="班级" prop="class_name">
              <el-input v-model="setApply.class_name" placeholder="请输入您的班级" type="text" />
            </el-form-item> -->
            <!-- $t('pages.affairsHall.learningAdd.backlist') -->
            <el-form-item :label="$t('pages.affairsHall.learningAdd.activityName') " prop="name">
              <el-input v-model="setApply.name" :placeholder="$t('pages.affairsHall.learningAdd.enterActivity')" type="text" />
            </el-form-item>
            <el-form-item :label="$t('pages.affairsHall.learningAdd.ActivityTime')" prop="time">
              <el-date-picker v-model="setApply.time" value-format="yyyy-MM-dd HH:mm:ss" :placeholder="$t('pages.affairsHall.learningAdd.selectTime')" type="datetime" />
            </el-form-item>
            <el-form-item :label="$t('pages.affairsHall.learningAdd.people')" prop="author">
              <el-input v-model="setApply.author" :placeholder="$t('pages.affairsHall.learningAdd.people2')" type="text" />
            </el-form-item>
            <el-form-item :label="$t('pages.affairsHall.learningAdd.address')" prop="address">
              <el-input v-model="setApply.address" :placeholder="$t('pages.affairsHall.learningAdd.enteraddress')" type="text" />
            </el-form-item>
            <el-form-item :label="$t('pages.affairsHall.learningAdd.activityContent')" prop="content">
              <el-input v-model="setApply.content" maxlength="50" :placeholder="$t('pages.affairsHall.learningAdd.entActCon')" type="textarea" :autosize="{ minRows: 5 }" />
            </el-form-item>
            <el-form-item v-if="isFormProhibit && approve_time !==null" :label="$t('pages.affairsHall.learningAdd.approvalTime')" prop="content">
              <el-input v-model="approve_time" placeholder="" type="text" />
            </el-form-item>
            <el-form-item v-if="isFormProhibit && remark !==null" :label="$t('pages.affairsHall.learningAdd.beizhu')" prop="content">
              <el-input v-model="remark" maxlength="50" placeholder="" type="textarea" :autosize="{ minRows: 5 }" />
            </el-form-item>
            <!-- <el-form-item label="附 件" prop="file">
              <el-upload
                ref="upFile"
                class="upload-demo"
                action=""
                :multiple="false"
                :limit="1"
                :show-file-list="false"
                :on-change="handleChange"
                :http-request="uploadFile"
                :file-list="filesArr">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">（可以上传 word、ppt、png、jpg、zip、rar等资源）<a href="http://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/build/learn-mba/%E3%80%8AMBA%E5%AD%A6%E7%94%9F%E5%AD%A6%E6%9C%AF%E6%B4%BB%E5%8A%A8%E7%94%B3%E8%AF%B7%E6%8A%A5%E5%91%8A%E3%80%8B%E6%A8%A1%E6%9D%BFXXX%E5%AD%A6%E7%94%9F.docx">模板下载</a></div>
                <template v-if="successFileUrl">
                  {{successFileUrl.replace(/.*\/([^\/]*\.[^.]+)$/gi, '$1')}}
                </template>
              </el-upload>
              <template v-if="successFileUrl">
                <a :href="successFileUrl">下载已上传附件</a>
              </template>
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" @click="onApplyFrom" v-if='!this.isFormProhibit'>{{ $t('pages.affairsHall.learningAdd.savesubmit') }}</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import cAction from '@action'

export default {
  props: {
    rid: { type: String, required: false }
  },
  components: {},
  data () {
    return {
      isFormProhibit: false,
      labelWidth: '110px',
      setApply: {
        personal_name: '',
        class_name: '',
        name: '',
        time: '',
        author: '',
        address: '',
        content: '',
        affair_id: ''
      },
      remark: '',
      approve_time: '',
      applyRules: {
        personal_name: [
          { required: true, message: '请输入您的姓名', trigger: 'blur' }
        ],
        class_name: [
          { required: true, message: '请输入您的班级', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '活动名称不能为空', trigger: 'blur' }
        ],
        time: [
          { required: true, message: '活动时间不能为空', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '主讲人不能为空', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '学术活动地址不能为空', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '活动内容不能为空', trigger: 'blur' }
        ]
      },
      successFileUrl: '',
      filesArr: [],
      file: {
        id: 'WU_FILE_0',
        name: '',
        type: '',
        lastModifiedDate: '',
        size: '',
        file: ''
      }
    }
  },
  mounted () {
    this.affair_id = this.$route.query.id
    this.isFormProhibit = this.$route.query.is_view || false
    if (this.rid !== '-1') {
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      cAction.Affairs.getAffairsDetails(this.rid).then(data => {
        if (data.form.id) {
          this.setApply.personal_name = data.form.personal_name
          this.setApply.class_name = data.form.class_name
          this.setApply.name = data.form.symposium_name
          this.setApply.time = data.form.symposium_time
          this.setApply.author = data.form.symposium_lecturer
          this.setApply.address = data.form.symposium_address
          this.setApply.content = data.form.symposium_contents
          this.approve_time = data.approve_time1
          this.remark = data.remark1
        }
      }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
    }

    window.addEventListener('resize', () => {
      const width = document.documentElement.clientWidth
      if (width < 790) {
        this.labelWidth = 'auto'
      } else {
        this.labelWidth = '110px'
      }
    })
  },
  methods: {
    handleChange (file, filelist) {
      this.file.name = file.raw.name
      this.file.type = file.raw.type
      this.file.lastModifiedDate = file.raw.lastModifiedDate
      this.file.size = file.raw.size
      this.file.file = file.raw
    },
    uploadFile () {
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      cAction.chapterAction.uploadFile(this.file).then(data => {
        this.successFileUrl = data.url
        this.filesArr.pop()
      }).catch(e => { this.filesArr.pop(); this.$message.error(e.message) }).finally(() => { loading.close() })
    },
    gobackActiveList () {
      this.$router.push({ path: '/app/affairs-hall/hall', query: { index: 0 } })
    },
    onApplyFrom () {
      this.$refs.setApplyForm.validate((valid) => {
        if (valid) {
          // if (!this.successFileUrl) {
          //   this.$message.error('请上传附件')
          //   return
          //   // this.$refs['setApplyForm'].resetFields()
          // }
          const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
          let reportActive = null
          if (this.rid !== '-1') {
            /* 修改 */
            reportActive = cAction.Affairs.updateAffairs(this.rid, {
              affair_id: this.affair_id,
              personal_name: this.setApply.personal_name,
              class_name: this.setApply.class_name,
              symposium_name: this.setApply.name,
              symposium_time: this.setApply.time,
              symposium_lecturer: this.setApply.author,
              symposium_address: this.setApply.address,
              symposium_contents: this.setApply.content,
              symposium_attachments: this.successFileUrl
            })
          } else {
            /* 新建 */
            reportActive = cAction.Affairs.submitLearning({
              affair_id: this.affair_id,
              personal_name: this.setApply.personal_name,
              class_name: this.setApply.class_name,
              symposium_name: this.setApply.name,
              symposium_time: this.setApply.time,
              symposium_lecturer: this.setApply.author,
              symposium_address: this.setApply.address,
              symposium_contents: this.setApply.content,
              symposium_attachments: this.successFileUrl
            })
          }
          reportActive.then(data => {
            if (data.success) {
              this.$message({ type: 'success', message: '提交成功' })
              setTimeout(() => {
                this.$router.push({ path: '/app/affairs-hall/hall' })
              }, 500)
            }
          }).catch(e => { this.filesArr.pop(); this.$message.error(e.message) }).finally(() => { loading.close() })
        } else {
          this.$message.error('请检查输入项，确认无误后，重新提交')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* 申请 */
.el-date-editor.el-input {
  width: 100%;
}
.el-upload__tip {
  line-height: 1.5;
}
</style>
