<template>
  <div class="info">
    <el-form :model="noticeForm" :rules="rules" ref="noticeForm" label-width="150px" class="custom-form">
      <el-form-item required label="专项检查名称" prop="task_name">
          <el-input maxlength="50" v-model="noticeForm.task_name" style="width: 400px;"></el-input>
      </el-form-item>
      <el-form-item label="专项检查代号">
          <el-input maxlength="50" v-model="noticeForm.task_code" style="width: 400px;"></el-input>
      </el-form-item>
      <el-form-item required label="专项检查起止时间" prop="date_range">
          <el-date-picker
              style="width: 400px;"
              v-model="noticeForm.date_range"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
      </el-form-item>
      <el-form-item label="专项检查描述">
        <vue-editor v-model="noticeForm.content" style="width: 840px;"/>
      </el-form-item>
      <el-form-item label="上传附件">
          <el-upload
              class="upload-demo"
              ref="upload"
              name="fileBinary"
              :headers="uploadHeaders"
              :data="uploadData"
              multiple
              with-credentials
              :action="fileUploadUrl"
              :before-upload="beforeUploadFile"
              :on-success="handleFileSuccess"
              :on-remove="handleFileRemove"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传文档、表格、PPT文件，每个文件限制大小为100M</div>
          </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleCancel">返回</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {VueEditor} from 'vue2-editor'
import {auth} from '@/utils/auth'
import {addSpecialNotice} from "@/api/random";
import {dateFormat} from "@/utils/tool";
import {approvelJob} from "@/api/job";
import { fileMixin } from '@/mixin/fileMixin'

export default {
  components: {
    VueEditor
  },
    mixins: [fileMixin],
  data () {
    return {
        baseUrl: '',
        uploadHeaders: {
            token: auth.getToken()
        },
        uploadData: {
            fileName: ''
        },
        rules: {
            task_name: [
                {required: true, message: '请输入专项检查名称', trigger: 'blur'}
            ],
            date_range: [
                {required: true, message: '请选择专项检查起止时间', trigger: 'blur'}
            ]
        },
        noticeForm: {
            task_name: '',
            task_code: '',
            date_range: '',
            content: '',
            attachment_ids: ''
        },
        fileList: []
    }
  },
  computed: {

  },
  mounted () {
      this.baseUrl = process.env.VUE_APP_API
  },
  methods: {
      beforeUploadFile (file) {
          if (!/.(doc|docx|ppt|pptx|xls|xlsx)$/.test(file.name.toLowerCase())) {
              this.$message.warning(`上传文件格式不对[${file.name}]`)
              return false
          }
          if (file.size / 1024 / 1024 > 100) {
              this.$message.warning(`文件大小不能超过10M[${file.name}]`)
              return false
          }
          this.uploadData.fileName = file.name
          return true
      },
      handleFileSuccess(res, file, fileList) {
          this.handleUploadFiles(fileList)
      },
      handleFileRemove(file, fileList) {
          this.handleUploadFiles(fileList)
      },
      handleUploadFiles(fileList) {
          const ids = []
          fileList.map(item => {
              if (item.response && item.response.id) {
                  ids.push(item.response.id)
              } else if (item.id) {
                  ids.push(item.id)
              }
          })
          this.noticeForm.attachment_ids = ids.join(',')
      },
      handleCancel() {
          this.$router.back()
      },
      handleSubmit() {
          const vm = this
          this.$refs['noticeForm'].validate((valid) => {
              if (valid) {
                  const notice = Object.assign({}, this.noticeForm)
                  notice.start_time = dateFormat('YYYY-mm-dd', notice.date_range[0])
                  notice.end_time = dateFormat('YYYY-mm-dd', notice.date_range[1])
                  delete notice.date_range
                  addSpecialNotice(notice).then(res => {
                      console.log(res)
                      vm.$message.success('创建成功')
                      vm.handleCancel()
                  })
              } else {
                  this.$message.warning('必填项没填写');
                  return false;
              }
          });


      }
  },
}
</script>

<style lang="scss" scoped>

.info {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 0;
    background-color: #FFFFFF;
    border-radius: 10px;
}

.label {
  text-align: right;
  border: none;
}

.value {
  text-align: left;
}
</style>
