<template>
<div>
  <sticky className="sub-navbar">
    <div style="text-align:right;">
      <el-button type="success" :loading="onSubmit" @click="handleSave">保存</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </sticky>
  <div class="app-container app-edit">
    <el-form class="small-space" :model="form" :rules="rules" ref="form" label-position="right" label-width="120px" style="width: 700px;">

      <!-- 标签 -->
      <el-form-item label="标签" prop="tag">
        <el-input v-model="form.tag" placeholder="请输入标签" maxlength="10" size="10"></el-input>
      </el-form-item>

      <!-- 标题 -->
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题"></el-input>
      </el-form-item>

      <!-- 公告介绍 -->
      <el-form-item label="公告介绍" prop="description">
        <tinymce :height="300" v-model="form.description" id='tinymce' style="width:900px"></tinymce>
      </el-form-item>

      <!-- 时间 -->
      <el-form-item label="时间" prop="time">
        <el-date-picker
          v-model="form.time"
          type="date"
          format="yyyy-MM-dd"
          placeholder="选择日期时间"
          align="right"
          :picker-options="pickerOptions1">
        </el-date-picker>
      </el-form-item>

      <!-- 短文介绍 -->
      <el-form-item label="短文介绍" prop="content">
        <el-input type="textarea" :rows="10" v-model="form.content" placeholder="请输入短文介绍"></el-input>
      </el-form-item>

      <!-- 图片image -->
      <el-form-item label="图片(110*50px)" prop="image">
        <el-upload
          class="avatar-uploader"
          action="/api/upload/image"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="form.image" :src="form.image" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</div>
</template>

<script>
import Sticky from '@/components/Sticky'
import { find, save } from '@/api//announcement'
import Tinymce from '@/components/Tinymce'
// import waves from '@/directive/waves.js'// 水波纹指令
import Pagination from '@/components/Pagination'
import moment from 'moment'

export default {
  components: { Tinymce, Pagination, Sticky },
  data() {
    return {
      form: {
        id: undefined,
        tag: '',
        title: '',
        description: '',
        time: '',
        platformId: '',
        content: '',
        image: ''
      },
      pickerOptions1: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      onSubmit: false,

      // 表单验证规则
      rules: {
        description: [
          { required: true, message: '请输入公告介绍', trigger: 'blur' }
        ],
        tag: [
          { required: true, message: '请输入标签', trigger: 'blur' },
          { max: 10, message: '标签不能超过10个字符', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { max: 30, message: '标题不能超过30个字符', trigger: 'blur' }
        ],
        time: [
          { required: true, message: '请选择时间', trigger: 'blur' }
        ],
        image: [
          { required: true, message: '请选择图片', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入短文介绍', trigger: 'blur' },
           { max: 50, message: '短文介绍不能超过50个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      this.findById(this.form.id)
    }
  },
  methods: {
    /**
     * 查询公告
     */
    findById(id) {
      find(id).then(response => {
        this.form.tag = response.announcement.tag
        this.form.title = response.announcement.title
        this.form.description = response.announcement.description
        this.form.time = response.announcement.time
        this.form.platformId = response.announcement.platformId
        this.form.content = response.announcement.content
        this.form.image = response.announcement.image
      })
    },

    // 处理图片上传成功
    handleAvatarSuccess(res, file) {
      this.form.image = res.img
    },

    beforeAvatarUpload(file) {
      // const isLt2M = file.size / 1024 / 1024 < 2

      // if (!isLt2M) {
      //   this.$message.error('上传图片大小不能超过 2MB!')
      // }
      // return isLt2M
    },

    /**
     * 保存公告
     */
    handleSave() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false
        }

        this.onSubmit = true
        this.form.time = moment(this.form.time).format('YYYY-M-D HH:mm:ss')
        console.log(this.form.time)
        save(this.form).then(response => {
          this.$router.go(-1)
        }).finally(() => {
          this.onSubmit = false
        })
      })
    },

    /**
     * 取消
     */
    handleCancel() {
      this.$router.go(-1)
    }
  }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }
  .info {
    color: #909399;
  }
  .map {
    height: 500px;
    width: 100%;
    float: left;
  }
</style>