<template>
  <base-model :config="model_cfg">
    <template slot="dialog-body">
      <el-form
        ref="NoticeForm"
        :model="form"
        :rules="rules"
        label-width="120px"
        size="small"
      >
        <el-form-item label="通知级别: " prop="NoticeLevelEnum">
          <el-select v-model="form.NoticeLevelEnum" placeholder="通知级别" clearable size="small">
            <el-option
              v-for="item of dict.type.NoteLevel"
              :key="item.value"
              :label="item.label"
              :value="item.raw.Code * 1"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="通知类型: " prop="NoticeTypeEnum">
          <el-select v-model="form.NoticeTypeEnum" placeholder="通知类型" clearable size="small">
            <el-option
              v-for="item of dict.type.NoteType"
              :key="item.value"
              :label="item.label"
              :value="item.raw.Code * 1"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="适用项目: " prop="ApplicableProjectEnum">
          <el-select v-model="form.ApplicableProjectEnum" placeholder="适用项目" clearable size="small">
            <el-option
              v-for="item of dict.type.NoticeApplicableTrial"
              :key="item.value"
              :label="item.label"
              :value="item.raw.Code * 1"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="适用角色: " prop="NoticeUserTypeIdList">
          <el-select v-model="form.NoticeUserTypeIdList" multiple placeholder="使用角色" clearable size="small">
            <el-option
              v-for="item of roleList"
              :key="item.Id"
              :label="item.UserTypeShortName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="提醒方式: " prop="NoticeModeEnum">
          <el-select v-model="form.NoticeModeEnum" placeholder="提醒方式" clearable size="small">
            <el-option
              v-for="item of dict.type.NoticeMode"
              :key="item.value"
              :label="item.label"
              :value="item.raw.Code * 1"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间: " prop="Code">
          <el-date-picker
            v-model="form.StartDate"
            type="datetime"
            placeholder="选择开始时间"
          />
        </el-form-item>
        <el-form-item label="结束时间: " prop="Code">
          <el-date-picker
            v-model="form.EndDate"
            type="datetime"
            placeholder="选择结束时间"
          />
        </el-form-item>
        <el-form-item v-if="!form.Id" label="是否发布: " prop="Code">
          <el-switch
            v-model="form.IsPush"
            :active-value="true"
            :inactive-value="false"
          />
        </el-form-item>
        <el-form-item label="通知内容: " prop="NoticeContent">
          <el-input
            v-model="form.NoticeContent"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
          />
        </el-form-item>
        <el-form-item label="附件: ">
          <el-upload
            class="upload-demo"
            action
            :before-upload="beforeUpload"
            :http-request="handleUploadFile"
            :on-preview="handlePreview"
            :on-remove="handleRemoveFile"
            :show-file-list="true"
            :limit="1"
            :file-list="fileList"
          >
            <el-button size="small" type="primary" :disabled="fileList.length > 0">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </template>
    <template slot="dialog-footer">
      <el-button :disabled="btnLoading" size="small" type="primary" @click="handleCancle">Cancel</el-button>
      <el-button size="small" type="primary" :loading="btnLoading" @click="handleSave">Save</el-button>
    </template>
  </base-model>
</template>
<script>
import { addOrUpdateSystemNotice, uploadSystemNoticeDoc } from '@/api/system/notice'
import BaseModel from '@/components/BaseModel'
const formDataDefault = () => {
  return {
    Id: null,
    NoticeLevelEnum: null,
    NoticeTypeEnum: null,
    NoticeContent: null,
    ApplicableProjectEnum: null,
    NoticeModeEnum: null,
    NoticeStateEnum: 0,
    StartDate: null,
    EndDate: null,
    FileName: null,
    Path: null,
    IsPush: false,
    NoticeUserTypeIdList: []
  }
}
export default {
  components: { BaseModel },
  props: {
    roleList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  dicts: ['NoticeApplicableTrial', 'NoteLevel', 'NoteType', 'NoticeState', 'NoticeMode'],
  data() {
    return {
      btnLoading: false,
      form: formDataDefault(),
      rules: {
        NoticeLevelEnum: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        NoticeTypeEnum: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        NoticeContent: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        ApplicableProjectEnum: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        NoticeModeEnum: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        // NoticeStateEnum: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        NoticeUserTypeIdList: [{ required: true, message: 'Please specify', trigger: 'blur' }]
      },
      fileList: [],
      model_cfg: { visible: false, showClose: true, width: '600px', title: '', appendToBody: true }
    }
  },
  mounted() {
  },
  methods: {
    handleRemoveFile() {
      this.form.FileName = null
      this.form.Path = null
      this.fileList = []
    },
    beforeUpload() {
      if (this.fileList.length > 0) {
        this.$alert('最多只能传一个附件')
        return
      }
    },
    handlePreview(row, r2) {
      if (row.fullPath) {
        window.open(row.fullPath, '_blank')
      }
    },
    async handleUploadFile(param) {
      this.loading = true
      var file = await this.fileToBlob(param.file)
      const res = await this.OSSclient.put(`/System/NoticeAttachment/${param.file.name}`, file)
      this.fileList.push({ name: param.file.name, path: this.$getObjectName(res.url), fullPath: this.$getObjectName(res.url), url:  this.$getObjectName(res.url)})
      this.form.Path = this.$getObjectName(res.url)
      this.form.FileName = param.file.name
      this.loading = false
    },
    openDialog(title, data) {
      this.model_cfg.visible = true
      this.model_cfg.title = title
      this.fileList = []
      if (Object.keys(data).length) {
        this.form = { ...data }
        if (this.form.FileName) {
          this.fileList[0] = { name: this.form.FileName, path: this.form.FilePath, fullPath: this.form.FullFilePath }
        }
        this.$set(this.form, 'NoticeUserTypeIdList', this.form.NoticeUserTypeList.map(v => v.Id))
      } else {
        this.form = formDataDefault()
      }
    },
    handleSave() {
      this.$refs.NoticeForm.validate(valid => {
        if (!this.form.Id && this.form.IsPush) {
          this.form.NoticeStateEnum = 1
        }
        if (valid) {
          this.form.StartDate = this.form.StartDate ? this.parseTime(this.form.StartDate) : null
          this.form.EndDate = this.parseTime(this.form.EndDate) ? this.parseTime(this.form.EndDate) : null
          this.btnLoading = true
          addOrUpdateSystemNotice(this.form).then(res => {
            this.btnLoading = false
            this.$message.success('Saved successfully!')
            this.model_cfg.visible = false
            this.$emit('getList')
          }).catch(() => {
            this.btnLoading = false
          })
        }
      })
    },
    handleCancle() {
      this.model_cfg.visible = false
    }
  }
}
</script>
