<template>
  <div>
    <div class="con-title">{{ $t('pages.affairsHall.uploadReport.title') }}</div>
    <div class="con-box">
      <el-button type="text" @click="goBack">{{ $t('pages.affairsHall.uploadReport.backText') }}</el-button>
      <el-form label-width="120px" :model="ruleForm" :rules="rules" ref="ruleForm" class="main-form">
        <el-form-item :label="$t('pages.affairsHall.uploadReport.name')" prop="name">
          <el-input v-model="ruleForm.name" :placeholder="$t('pages.affairsHall.uploadReport.placename')" />
        </el-form-item>
        <el-form-item :label="$t('pages.affairsHall.uploadReport.labeltitle')" prop="title">
          <el-input
            type="textarea"
            v-model="ruleForm.title"
            :placeholder="$t('pages.affairsHall.uploadReport.placetitle')"
          />
        </el-form-item>
        <el-form-item :label="$t('pages.affairsHall.uploadReport.file')" prop="file">
          <el-upload
            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="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%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"
                target="_blank"
                >{{ $t('pages.affairsHall.uploadReport.downloadTemplateText') }}</a
              >
            </div>
          </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="handleSubmit">{{
            $t('pages.affairsHall.uploadReport.savesubmit')
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { uploadFile } from '@/api/common'

import * as api from '../../api'
export default {
  data() {
    return {
      ruleForm: { name: '', title: '' },
      rules: {
        name: [{ required: true, message: '请输入报告主题', trigger: 'blur' }],
        title: [{ required: true, message: '请输入报告摘要', trigger: 'blur' }]
      },
      submitLoading: false,
      fileList: []
    }
  },
  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() {
      uploadFile(this.file)
        .then(data => {
          this.successFileUrl = data.url
          this.filesArr.pop()
        })
        .catch(e => {
          this.filesArr.pop()
          this.$message.error(e.message)
        })
    },
    goBack() {
      this.$router.push({ path: '/app/offices' })
    },
    // 提交
    handleSubmit(callback) {
      this.$refs.ruleForm.validate().then(() => {
        const params = Object.assign({}, this.ruleForm, { affair_id: this.affairId })
        this.isEdit ? this.handleUpdate(params, callback) : this.handleAdd(params, callback)
      })
    },
    // 新建
    handleAdd(params, callback) {
      this.submitLoading = true
      api
        .createAffair(params)
        .then(response => {
          response.success ? this.handleSuccess(response) : this.handleError(response)
        })
        .catch(this.handleError)
        .finally(() => {
          this.submitLoading = false
        })
    },
    // 修改
    handleUpdate(params, callback) {
      this.submitLoading = true
      api
        .updateAffair(this.pid, params)
        .then(response => {
          response.success ? this.handleSuccess(response) : this.handleError(response)
        })
        .catch(this.handleError)
        .finally(() => {
          this.submitLoading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.main-form {
  max-width: 600px;
  margin: 0 auto;
}
</style>
