<template>
  <div>
    <div class="con-title">{{ $t('pages.affairsHall.uploadReport.title') }}</div>
    <div class="con-box">
      <el-button type="text" @click="gobackActiveList">{{ $t('pages.affairsHall.uploadReport.backText') }}</el-button>
      <el-row type="flex" justify="center">
        <el-col :xs="24" :sm="24" :md="16" :lg="12" :xl="8">
          <el-form ref="setSubmitForm" :label-width="labelWidth" :model="setSubmit" :rules="submitRules">
            <el-form-item :label="$t('pages.affairsHall.uploadReport.name')" prop="name">
              <el-input
                v-model="setSubmit.name"
                :placeholder="$t('pages.affairsHall.uploadReport.placename')"
                type="text"
              />
            </el-form-item>
            <el-form-item :label="$t('pages.affairsHall.uploadReport.labeltitle')" prop="title">
              <el-input
                v-model="setSubmit.title"
                :placeholder="$t('pages.affairsHall.uploadReport.placetitle')"
                type="text"
              />
            </el-form-item>
            <el-form-item :label="$t('pages.affairsHall.uploadReport.file')" 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">{{
                  $t('pages.affairsHall.uploadReport.uploadButtonText')
                }}</el-button>
                <div slot="tip" class="el-upload__tip">
                  {{ $t('pages.affairsHall.uploadReport.uploadTips')
                  }}<a
                    href="https://zws-imgs-pub.ezijing.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%E8%AE%B0%E5%BD%95%E6%8A%A5%E5%91%8A%E3%80%8B%E6%A8%A1%E6%9D%BFXXX%E5%AD%A6%E7%94%9F.docx"
                    download
                    >{{ $t('pages.affairsHall.uploadReport.downloadTemplateText') }}</a
                  >
                </div>
                <template v-if="successFileUrl">
                  {{ successFileUrl.replace(/.*\/([^\/]*\.[^.]+)$/gi, '$1') }}
                </template>
              </el-upload>
              <template v-if="successFileUrl">
                <a :href="successFileUrl">{{ $t('pages.affairsHall.uploadReport.downloadButtonText') }}</a>
              </template>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmitFrom">{{
                $t('pages.affairsHall.uploadReport.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 },
    reid: { type: String, required: false }
  },
  components: {},
  data() {
    return {
      labelWidth: '110px',
      setSubmit: {
        name: '',
        title: ''
      },
      submitRules: {
        name: [{ required: true, message: '报告主题不能为空', trigger: 'blur' }],
        title: []
      },
      successFileUrl: '',
      filesArr: [],
      file: {
        id: 'WU_FILE_0',
        name: '',
        type: '',
        lastModifiedDate: '',
        size: '',
        file: ''
      }
    }
  },
  mounted() {
    if (this.reid !== '-1') {
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      cAction.Affairs.getSubmitReport(this.rid, this.reid)
        .then(data => {
          if (data.report_name) {
            this.setSubmit.name = data.report_name
            this.setSubmit.title = data.report_description
            this.successFileUrl = data.file_url
          }
        })
        .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.Affairs.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/offices' })
    },
    onSubmitFrom() {
      this.$refs.setSubmitForm.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 report = null
          if (this.reid !== '-1') {
            /* 修改 */
            report = cAction.Affairs.updateSubmitReport(this.rid, this.reid, {
              report_name: this.setSubmit.name,
              report_description: this.setSubmit.title,
              file_url: JSON.stringify([
                {
                  name: this.file.name,
                  url: this.successFileUrl
                }
              ])
            })
          } else {
            /* 新建 */
            report = cAction.Report.submitReport(this.rid, {
              report_name: this.setSubmit.name,
              report_description: this.setSubmit.title,
              file_url: JSON.stringify([
                {
                  name: this.file.name,
                  url: this.successFileUrl
                }
              ])
            })
          }
          report
            .then(data => {
              if (data.flag) {
                this.$message({ type: 'success', message: '提交成功' })
                setTimeout(() => {
                  this.$router.push({ path: `/app/affairs-hall/view-report/${this.rid}` })
                }, 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>
