<template>
  <div class="add-notice-page">
    <Card v-if="loading" class="loading-card">
      <Spin fix size="large" />
    </Card>
    <Card v-else>
      <div class="head">
        <Icon type="md-bookmark" color="#2d8cf0" :size="28" />
        <label>{{ title }}</label>
      </div>
      <div class="item">
        <label class="label">标题：</label>
        <Input
          placeholder="请填写标题"
          v-model="form.title"
          :readonly="isEdit"
          style="width: 400px"
        />
      </div>
      <div class="item">
        <label class="label">内容：</label>
        <Input
          placeholder="请填写内容"
          v-model="form.content"
          :readonly="isEdit"
          clearablewebstorm
          style="width: 400px"
          type="textarea"
        />
      </div>
      <div class="item">
        <label class="label">开始时间：</label>
            <DatePicker type="date" :options="startOption" v-model="form.startTime" placeholder="请选择开始时间" style="width: 400px"></DatePicker>

      </div>
      <div class="item">
        <label class="label">结束时间：</label>
        <DatePicker type="date" :options="endOption" v-model="form.endTime"  placeholder="请选择结束时间" style="width: 400px"></DatePicker>
      </div>
      <div class="footer-con">
        <Button
          type="default"
          @click="handleCancel"
          style="margin-right: 30px"
        >取消</Button
        >
        <Button
          type="primary"
          @click="handleSubmit"
          :loading="submitLoading"
        >确定</Button
        >
      </div>
    </Card>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import FileUpload from '_c/file-upload'
import { formatTime } from '@/libs/tools'
export default {
  name: 'add-announcement',
  components: {
    FileUpload
  },
  computed: {
    title () {
      if (this.routeName === 'add_announcement') {
        return '发布公告 - 填写下列信息'
      } else {
        return '编辑公告 - 填写下列信息'
      }
    },
    isEdit () {
      return this.routeName === 'update_announcement'
    },
    isAdd () {
      return this.routeName === 'add_announcement'
    }
  },
  data () {
    return {
      routeName: '',
      form: {
        noticeId: '',
        title: '',
        content: '',
        endTime: '',
        startTime: ''
      },
      loading: false,
      submitLoading: false,
      startOption: {
        // 指定开始限制时间
        disabledDate: (date) => {
          if (this.form.endTime) {
            return date >= this.form.endTime
          } else {
            return date && date.valueOf() < Date.now() - 86400000
          }
        }
      },
      endOption: {
        // 指定终止日期
        disabledDate: (date) => {
          if (this.form.startTime) {
            return date < this.form.startTime
          } else {
            return date && date.valueOf() < Date.now() - 86400000
          }
        }
      }
    }
  },
  methods: {
    ...mapMutations(['closeTag']),
    handleCancel () {
      let route = this.$route
      let toRouteName = 'announcement_list'
      this.closeTag({ route, toRouteName })
    },
    handleSubmit () {
      let { errMsg, form } = this.checkForm()
      if (errMsg) {
        return this.$Notice.warning({ title: errMsg })
      }
      let apiName = this.isAdd ? 'addNotice' : 'updateNotice'
      let title = this.isAdd ? '添加成功！' : '编辑成功！'
      this.submitLoading = true
      this.api({
        apiName,
        postdata: form,
        success: (res) => {
          // 关闭当前标签页
          let route = this.$route
          let toRouteName = 'announcement_list'
          this.closeTag({ route, toRouteName })
          this.$Notice.success({ title })
        },
        complete: () => {
          this.submitLoading = false
        }
      })
    },
    checkForm () {
      let { content, updateTime, title, endTime, noticeId, startTime } = this.form
      let form = {
        noticeId,
        title,
        content,
        startTime,
        endTime,
        updateTime
      }
      let errMsg = ''
      form.startTime = new Date(form.startTime).getTime()
      form.endTime = new Date(form.endTime).getTime() + 86399000
      if (!title) {
        return { errMsg: '请填写标题！' }
      }
      if (!content) {
        return { errMsg: '请输入内容！' }
      }
      if (!startTime) {
        return { errMsg: '请选择开始时间！' }
      }
      if (!endTime) {
        return { errMsg: '请选择结束时间！' }
      }

      return { errMsg, form }
    },
    requestRibbonDetail (noticeId) {
      this.api({
        apiName: 'detailNotice',
        postdata: noticeId,
        success: (res) => {
          console.log(res)
          let { title, content, startTime, endTime, noticeId, updateTime } = res.data
          this.form.title = title
          this.form.content = content
          this.form.startTime = formatTime(startTime)
          this.form.endTime = formatTime(endTime)
          this.form.noticeId = noticeId
          this.form.updateTime = updateTime
        }
      })
    },
    initData () {
      let routeName = this.$route.name
      console.log(routeName)
      let { noticeId } = this.$route.query
      this.form.noticeId = noticeId
      this.routeName = routeName
      if (routeName == 'update_announcement') {
        this.requestRibbonDetail(noticeId)
      } else {
        this.loading = false
      }
    }
  },
  mounted () {
    this.initData()
  }
}
</script>

<style scoped lang="less">
  .add-notice-page {
    height: 100%;
    .loading-card {
      height: 100%;
    }
    .head {
      color: #17233d;
      font-size: 18px;
      font-weight: bold;
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      i {
        margin-right: 10px;
      }
    }
    .item {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
    .item .label {
      display: block;
      width: 150px;
      text-align: right;
    }
    .footer-con {
      display: flex;
      padding: 30px 150px;
    }
  }
</style>
