<template>
  <base-model :config="model_cfg">
    <template slot="dialog-body">
      <el-form ref="NoticeForm" :model="form" :rules="rules" label-width="180px" size="small">
        <el-form-item :label="$t('system:notice:label:NoticeLevel')" prop="NoticeLevelEnum">
          <el-select v-model="form.NoticeLevelEnum" 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="$t('system:notice:label:NoticeType')" prop="NoticeTypeEnum">
          <el-select v-model="form.NoticeTypeEnum" 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="$t('system:notice:label:ApplicableProject')" prop="ApplicableProjectEnum">
          <el-select v-model="form.ApplicableProjectEnum" 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="$t('system:notice:label:NoticeUserTypeIdList')" prop="NoticeUserTypeIdList">
          <el-select v-model="form.NoticeUserTypeIdList" multiple 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="$t('system:notice:label:NoticeMode')" prop="NoticeModeEnum">
          <el-select v-model="form.NoticeModeEnum" 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="$t('system:notice:label:StartDate')" prop="StartDate">
          <el-date-picker v-model="form.StartDate" type="datetime" />
        </el-form-item>
        <el-form-item :label="$t('system:notice:label:EndDate')" prop="EndDate">
          <el-date-picker v-model="form.EndDate" type="datetime" :default-time="'23:59:59'" />
        </el-form-item>
        <el-form-item v-if="!form.Id" :label="$t('system:notice:label:IsPush')" prop="IsPush">
          <el-switch v-model="form.IsPush" :active-value="true" :inactive-value="false" />
        </el-form-item>
        <el-form-item :label="$t('system:notice:label:NoticeContent')" prop="NoticeContent">
          <el-input v-model="form.NoticeContent" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" />
        </el-form-item>
        <el-form-item :label="$t('system:notice:label:file')">
          <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">{{ $t('common:button:upload') }}</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </template>
    <template slot="dialog-footer">
      <el-button :disabled="btnLoading" size="small" type="primary" @click="handleCancle">{{ $t('common:button:cancel')
        }}</el-button>
      <el-button size="small" type="primary" :loading="btnLoading" @click="handleSave">{{ $t('common:button: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(this.$t('system:notice:msg:message1'))
        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>
