<template>
  <!-- 基于 Element UI 新增和修改弹窗 -->
  <el-dialog
      :title="!dataForm.id ? '添加' : '修改'"
      :close-on-click-modal="false"
      :visible.sync="visible">
    <!-- 新增和创建表单表单 -->
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataSubmit()" label-width="120px">

      <el-form-item label="活动类型" prop="cid">
        <el-select v-model="dataForm.cid" placeholder="请选择活动类型">
          <el-option label="活动预约" value="746"></el-option>
          <el-option label="采茶预约" value="752"></el-option>
          <el-option label="其他预约" value="753"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="活动标题" prop="title">
        <el-input v-model="dataForm.title" placeholder="活动标题"></el-input>
      </el-form-item>
      <el-form-item label="活动图片" prop="imageInput">
        <div class="upLoadPicBox" @click="modalPicTap('1')" :disabled="isDisabled">
          <div v-if="dataForm.imageInput" class="pictrue"><img :src="dataForm.imageInput"></div>
          <div v-else class="upLoad">
            <i class="el-icon-camera cameraIconfont"/>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="活动人数" prop="activityNum">
        <el-input-number v-model="dataForm.activityNum" :min="1" :max="2000" label="活动人数"></el-input-number>
      </el-form-item>

      <el-form-item label="费用" prop="activityPrice">
        <el-input-number v-model="dataForm.activityPrice" :min="1" :max="2000" :precision="2" label="费用"></el-input-number>
      </el-form-item>

      <el-form-item label="活动地址" prop="activityAddr">
        <el-input v-model="dataForm.activityAddr" placeholder="活动地址"></el-input>
      </el-form-item>
      <el-form-item label="活动标签" prop="tag">
        <el-input v-model="dataForm.tag" placeholder="活动标签,英文逗号分隔"></el-input>
      </el-form-item>

      <el-form-item label="活动内容" prop="title">
        <el-input v-model="dataForm.content" type="textarea" maxlength="2000" :rows="3"
                  placeholder="活动内容"></el-input>
      </el-form-item>

      <el-form-item label="开始时间" prop="beginTime">
        <el-date-picker
            value-format="yyyy-MM-dd hh:mm:ss" format="yyyy-MM-dd hh:mm:ss"
            v-model="dataForm.beginTime"
            type="datetime"
            placeholder="开始时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="截至时间" prop="endTime">
        <el-date-picker
            value-format="yyyy-MM-dd hh:mm:ss" format="yyyy-MM-dd hh:mm:ss"
            v-model="dataForm.endTime"
            type="datetime"
            placeholder="截至时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="是否热门" prop="isHot">

        <el-switch v-model="dataForm.isHot"  :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="是否轮播" prop="isBanner">
        <el-switch v-model="dataForm.isBanner" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="dataForm.sort" :min="1" :max="99999" label="排序"></el-input-number>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import * as api from "@/api/activity";
import {activityCreateApi, ebactivityDetailInfoApi, ebactivityUpdateApi} from "@/api/activity";

export default {
  data() {
    return {
      isDisabled: this.$route.params.isDisabled === '1' ? true : false,
      visible: false,
      dataForm: {
        title: '',
        author: '',
        imageInput: '',
        synopsis: '',
        shareTitle: '',
        shareSynopsis: '',
        visit: '',
        sort: '',
        status: '',
        activityAddr: '',
        activityTime: '',
        activityNum: '',
        activityPrice: '',
        tags: '',
        hide: 0,
        isHot: 0,
        isBanner: 0,
        content: '',
        beginTime: '',
        endTime: ''
      },
      dataRule: {
        title: [
          {required: true, message: '活动标题  为必填项', trigger: 'blur'}
        ],  cid: [
          {required: true, message: '活动类型请选择', trigger: 'blur'}
        ],
        author: [
          {required: true, message: '活动作者  为必填项', trigger: 'blur'}
        ],
        imageInput: [
          {required: true, message: '活动图片  为必填项', trigger: 'blur'}
        ],
        synopsis: [
          {required: true, message: '活动简介  为必填项', trigger: 'blur'}
        ],
        shareTitle: [
          {required: true, message: '活动分享标题  为必填项', trigger: 'blur'}
        ],
        shareSynopsis: [
          {required: true, message: '活动分享简介  为必填项', trigger: 'blur'}
        ],
        visit: [
          {required: true, message: '浏览次数  为必填项', trigger: 'blur'}
        ],
        sort: [
          {required: true, message: '排序  为必填项', trigger: 'blur'}
        ],
        status: [
          {required: true, message: '状态 0有效，1无效  为必填项', trigger: 'blur'}
        ],
        activityAddr: [
          {required: true, message: '活动地址  为必填项', trigger: 'blur'}
        ],
        activityTime: [
          {required: true, message: '活动时间  为必填项', trigger: 'blur'}
        ],
        activityNum: [
          {required: true, message: '活动人数  为必填项', trigger: 'blur'}
        ],
        activityPrice: [
          {required: true, message: '费用  为必填项', trigger: 'blur'}
        ],
        tags: [
          {required: true, message: '标签  为必填项', trigger: 'blur'}
        ],
        hide: [
          {required: true, message: '是否隐藏 0不隐藏，1隐藏  为必填项', trigger: 'blur'}
        ],
        isHot: [
          {required: true, message: '是否热门(小程序) 0非，1是  为必填项', trigger: 'blur'}
        ],
        isBanner: [
          {required: true, message: '是否轮播(小程序)  为必填项', trigger: 'blur'}
        ],
        content: [
          {required: true, message: '活动内容  为必填项', trigger: 'blur'}
        ],
        beginTime: [
          {required: true, message: '开始时间  为必填项', trigger: 'blur'}
        ],
        endTime: [
          {required: true, message: '结束时间  为必填项', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    modalPicTap(tit, num, i, status) {
      const _this = this;
      this.$modalUpload(function (img) {
        if (tit === '1' && !num) {
          _this.dataForm.imageInput = img[0].sattDir

        }
      }, tit, 'content')
    },
    init(id) { // 初始化表单验证规则
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          ebactivityDetailInfoApi({id: id}).then(res => {
            this.dataForm = res;
          })
        }
      })
    },
    // 表单数据提交
    dataSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.dataForm.id){
            console.log(this.dataForm)
            ebactivityUpdateApi(this.dataForm).then(res => {
              this.visible = false
              this.$message.success("修改成功！");
              this.$emit('refreshDataList');
            })
          }else {
            delete this.dataForm.id
            activityCreateApi(this.dataForm).then(res => {
              this.visible = false
              this.$message.success("添加成功！");
              this.$emit('refreshDataList');
            })
          }
        }
      })
    }
  }
}
</script>
