<template>
  <a-card :bordered="false" title="新增公告">
    <template slot="extra">
      <a-button type="primary" @click="goback">返回</a-button>
      <a-button type="primary" @click="save">保存</a-button>
    </template>

    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-model-item ref="title" label="公告标题" prop="title" :wrapper-col="{ span: 18 }">
            <a-input v-model="form.title" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-model-item ref="rangeName" label="发布范围" prop="rangeName" :wrapper-col="{ span: 18 }">
            <a-input v-model="form.rangeName" readOnly @click="openOrgTree" />
          </a-form-model-item>
          <a-form-model-item style="display: none;">
            <a-input v-model="form.rangeId" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-model-item ref="isTop" label="是否置顶" prop="isTop">
            <a-radio-group v-model="form.isTop">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item ref="isCalculate" label="是否计算学时" prop="isCalculate">
            <a-radio-group v-model="form.isCalculate">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-model-item ref="isNowPublish" label="即时发布" prop="isNowPublish">
            <a-switch v-model="form.isNowPublish" @change="onChangeNow" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <div v-if="timeShow">
            <a-form-model-item ref="publishTime" label="发布时间" prop="publishTime">
              <a-date-picker
                v-model="form.publishTime"
                show-time
                type="date"
                placeholder="选择发布时间"
                style="width: 100%;"
                :format="'YYYY-MM-DD HH:mm:ss'"
                valueFormat="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-model-item>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-model-item ref="type" label="发布类型" prop="type">
            <a-select v-model="form.type">
              <a-select-option :value="1">新闻资讯</a-select-option>
              <a-select-option :value="2">公告详情</a-select-option>
              <a-select-option :value="3">通知</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col>
          <a-form-model-item
            ref="content"
            label="详细内容"
            prop="content"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
          >
            <!-- <wang-editor ref="wangEditor" groupName="notice" :value="form.content"></wang-editor> -->
            <!-- <a-textarea :autoSize="{ minRows: 3, maxRows: 10 }" v-model="form.content"/> -->
            <DbUeditor v-model="form.content" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-model-item label="上传附件">
            <db-upload v-model="fileList" type="file" accept="*"></db-upload>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>

    <org-tree @selectOrg="selectOrg($event)" ref="orgModal" />
  </a-card>
</template>

<script>
import { noticeGet, noticeAdd } from '@/api/notice/notice'
import WangEditor from '@/components/Editor/WangEditor'
import DbUpload from '@/components/DbUpload/DbUpload.vue'
import DbUeditor from '@/components/DbUeditor/index.vue'
import OrgTree from '../org/OrgTree'
// import moment from 'moment'
export default {
  props: {
    id: {
      type: String,
      default: undefined
    }
  },
  components: {
    DbUeditor,
    OrgTree,
    WangEditor,
    DbUpload
  },
  data() {
    return {
      labelCol: {
        span: 6
      },
      wrapperCol: {
        span: 18
      },
      form: {
        id: '',
        title: '',
        rangeId: 0,
        rangeName: '',
        isTop: 0,
        isCalculate: 0,
        isNowPublish: false,
        publishTime: '',
        type: 1,
        content: ''
      },
      fileList: [],
      timeShow: true,
      rules: {
        title: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
        rangeName: [{ required: true, message: '请选择发布范围', trigger: 'blur' }],
        isTop: [{ required: true, message: '请选择是否置顶', trigger: 'change' }],
        isCalculate: [{ required: true, message: '请选择是否计算学时', trigger: 'change' }],
        isNowPublish: [{ required: true, message: '请选择即时发布', trigger: 'change' }],
        publishTime: [{ required: true, message: '请选择发布时间', trigger: 'change' }],
        type: [{ required: true, message: '请选择发布类型', trigger: 'change' }],
        content: [{ required: true, message: '请输入详细内容', trigger: 'change' }]
      }
    }
  },
  created() {
    if (!this.$route.query.id) return

    this.edit(this.$route.query.id)
  },
  methods: {
    // 返回 按钮
    goback() {
      this.$router.push({ path: '/notice/list', query: {} })
    },
    edit(id) {
      noticeGet({ id: id }).then(res => {
        const form = res.data
        form.isNowPublish = form.isNowPublish === 1
        // form.publishTime = moment(form.publishTime)
        this.form = form
        this.fileList = JSON.parse(res.data.file)
      })
    },
    save() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const { form } = this
          // form.content = this.$refs.wangEditor.content()
          if (this.form.isNowPublish) {
            form.isNowPublish = 1
            form.publishTime = new Date().getTime()
          } else {
            form.isNowPublish = 0
          }
          form.file = JSON.stringify(this.fileList)
          noticeAdd(form).then(res => {
            if (res.code === 200) {
              this.$message.success('操作成功')
              this.goback()
            } else {
              this.$message.error('操作失败：' + res.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    openOrgTree() {
      this.$refs.orgModal.loadOrg()
    },
    selectOrg(orgData) {
      this.form.rangeId = orgData.id
      this.form.rangeName = orgData.name
    },
    onChangeNow(checked) {
      this.timeShow = !checked
    }
  }
}
</script>

<style></style>
