<template>
  <div>
    <div class="con-title">{{ $t('feedbackCreate.title') }}</div>
    <div class="con-box">
      <el-row type="flex" justify="center">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form ref="form" :model="ruleForm" :rules="rules" label-position="top">
            <el-form-item :label="$t('feedbackCreate.probDesc')" prop="title">
              <el-input v-model="ruleForm.title" :placeholder="$t('feedbackCreate.enterDesc')" type="text" />
            </el-form-item>
            <el-form-item :label="$t('feedbackCreate.problemDetails')" prop="contents">
              <v-editor v-model="ruleForm.contents"></v-editor>
            </el-form-item>
            <el-form-item :label="$t('feedbackCreate.uploadAtta')" 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('feedbackCreate.btnUpload') }}</el-button>
                <div slot="tip" class="el-upload__tip">{{ $t('feedbackCreate.limit') }}</div>
                <template v-if="successFileUrl">
                  {{ successFileUrl.replace(/.*\/([^\/]*\.[^.]+)$/gi, '$1') }}
                </template>
              </el-upload>
              <template v-if="successFileUrl">
                <a :href="successFileUrl">{{ $t('feedbackCreate.downloadButtonText') }}</a>
              </template>
            </el-form-item>
            <el-form-item :label="$t('feedbackCreate.submitTo')" prop="type_id">
              <el-select v-model="ruleForm.type_id">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onApplyFrom">{{ $t('feedbackCreate.subBtn') }}</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

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

import VEditor from '@/components/tinymce'

export default {
  components: { VEditor },
  data() {
    return {
      ruleForm: {
        title: '',
        contents: '',
        type_id: '2'
      },
      rules: {
        title: [{ required: true, message: this.$t('feedbackCreate.enterDesc'), trigger: 'blur' }],
        contents: [{ required: true, message: this.$t('feedbackCreate.enterDetail'), trigger: 'blur' }]
      },
      successFileUrl: '',
      filesArr: [],
      file: {
        id: 'WU_FILE_0',
        name: '',
        type: '',
        lastModifiedDate: '',
        size: '',
        file: ''
      },
      options: [
        { value: '0', label: this.$t('feedbackCreate.all') },
        { value: '1', label: this.$t('feedbackCreate.administration') },
        { value: '2', label: this.$t('feedbackCreate.technology') }
      ]
    }
  },
  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)' })
      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()
        })
    },
    onApplyFrom() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
          cAction.Feedback.feedbackCommit({
            title: this.ruleForm.title,
            contents: this.ruleForm.contents,
            type_id: this.ruleForm.type_id,
            attachments: JSON.stringify([{ name: this.file.name, url: this.successFileUrl }])
          })
            .then(data => {
              if (data.success) {
                this.$message({ type: 'success', message: this.$t('feedbackCreate.successTips') })
                this.$refs.form.resetFields()
                this.$router.push({ path: '/app/feedback/feedback-list' })
              }
            })
            .catch(e => {
              this.filesArr.pop()
              this.$message.error(e.message)
            })
            .finally(() => {
              loading.close()
            })
        }
      })
    }
  }
}
</script>
