<template>
  <el-dialog
    :title="!dataForm.id ? this.$i18n.t('crud.addTitle') : this.$i18n.t('temp.modify')"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <div class="mod-marketing-distribution-item recruit-set">
      <el-form
        ref="dataForm"
        size="small"
        label-width="auto"
        :model="dataForm"
      >
        <div class="form-item">
          <div class="form-item-content">
            <el-form-item label="活动开关" prop="state">
              <el-radio-group v-model="dataForm.state">
                <el-radio :label="1">上线</el-radio>
                <el-radio :label="0">下线</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="活动封面">
              <img-upload v-model="dataForm.cover" />
            </el-form-item>

            <el-form-item label="活动海报">
              <img-upload v-model="dataForm.pic" />
            </el-form-item>

            <el-form-item label="活动标题" prop="title">
              <el-input
                v-model="dataForm.activityTitle"
                style="width: 340px"
                size="small"
              ></el-input>
            </el-form-item>
            <el-form-item label="开始时间"  prop="startTime" >
              <el-date-picker
                v-model="dataForm.startTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                size="small"
                placeholder="开始时间"
              ></el-date-picker>
            </el-form-item>

            <el-form-item prop="endTime" label="结束时间">
              <el-date-picker
                v-model="dataForm.endTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                size="small"
                placeholder="结束时间"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="活动说明" prop="content">
              <tiny-mce
                v-model="dataForm.content"
                style="width: 900px;display: inline-block;"
                :key="tinymceFlag"
              ></tiny-mce>
            </el-form-item>
            <el-form-item >
              <template slot='label'>
             <span class="item" style="visibility: hidden;">
                {{ $t('recruit.popularizeContent')+'*:'}}
              </span>
              </template>
              <div class="default-btn primary-btn" style="display: inline-block;" @click="dataFormSubmit()">{{$t('distribution.save')}}</div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
  </el-dialog>

</template>

<script>
// import PicUpload from '@/components/pic-upload'
import ImgUpload from './distribution-activity-img-upload.vue'
import TinyMce from '@/components/tiny-mce'
import { isHtmlNull } from '@/utils/index.js'

export default {
  components: {
    ImgUpload,
    TinyMce
  },
  created () {
    // this.getData()
  },
  data () {
    return {
      visible: false,
      tinymceFlag: new Date() + 1,
      dataForm: {
        activityId: null,
        activityTitle: null,
        startTime: null,
        endTime: null,
        updateTime: null,
        state: 1,
        content: null,
        pic: null
      }
    }
  },
  methods: {
    init (activityId) {
      this.dataForm.activityId = activityId || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.activityId) {
          this.$http({
            url: this.$http.adornUrl('/distribution/distributionActivity/info/' + this.dataForm.activityId),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            this.dataForm = data
          })
        }
      })
    },
    // 提交表单
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/distribution/distributionActivity`),
            method: this.dataForm.activityId ? 'put' : 'post',
            data: this.$http.adornData(this.dataForm)
          }).then(({ data }) => {
            this.$message({
              message: this.$i18n.t('publics.operation'),
              type: 'success',
            })
            this.visible = false
            this.$emit("refreshDataList")
          }).catch(() => {

          })
        }
      })
    }
  },
  activated () {
    this.tinymceFlag = new Date() + 1
  }
}
</script>

