<template>
  <div>
    <el-form :model="formInline" :rules="rules" ref="heForm" label-width="130px" class="demo-ruleForm">
      <el-form-item label="营销活动标题" prop="title">
        <el-input placeholder="请输入" v-model="formInline.title"></el-input>
      </el-form-item>
      <el-form-item label="内容" prop="content" tyle="width: 100%;">
        <wang-editor v-model="formInline.content" ref="editor" :height="200"></wang-editor>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="场地" prop="venue">
            <div style="border: 1px solid #E5E5E5;padding: 1px" id="huodong">
              <div
                style="font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;justify-content: space-between;line-height:20px;background:#F2F3F5;">
                <div style="padding:10px;">场地选择</div>
                <div v-if="AddData.length != 1" style="color: #3F9B6A;padding:10px;" @click="mingShow">
                  添加
                </div>
              </div>
              <div style="padding: 15px;">
                <div style="padding: 0px 20px 0px 0px">
                  <el-table :data="AddData"
                    :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
                    <el-table-column label="序号" min-width="5%">
                      <template slot-scope="scope">
                        {{scope.$index + 1}}
                      </template>
                    </el-table-column>
                    <el-table-column label="资源名称" min-width="20%" show-overflow-tooltip>
                      <template slot-scope="scope">
                        {{scope.row.shopName ? scope.row.shopName :  scope.row.advertisingName?scope.row.advertisingName:scope.row.venueName}}
                      </template>
                    </el-table-column>
                    <el-table-column label="资源类型" min-width="10%">
                      <template slot-scope="scope">
                        {{scope.row.shopName ? '商铺' : scope.row.advertisingType?scope.row.advertisingType:'场地'}}
                      </template>
                    </el-table-column>

                    <el-table-column label="详细地址" min-width="20%">
                      <template slot-scope="scope">
                        {{scope.row.detailedLocation}}
                      </template>
                    </el-table-column>

                    <el-table-column prop="notes" label="实际使用面积" min-width="25%">
                      <template slot-scope="scope">
                        {{scope.row.actualArea ? scope.row.actualArea :  scope.row.actualUsableArea?scope.row.actualUsableArea:'-'}}
                      </template>

                    </el-table-column>

                    <el-table-column label="操作" min-width="15%">
                      <template slot-scope="scope">
                        <div @click="MingDelete(scope.$index)" class="tableBtn greens">删除</div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="起止时间" prop="content">
        <el-date-picker style="width: 50%;" v-model="plan_Time" value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="联系人" prop="contactPerson">
        <el-input placeholder="请输入" v-model="formInline.contactPerson"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="contactPhone">
        <el-input placeholder="请输入" v-model="formInline.contactPhone"></el-input>
      </el-form-item>
      <el-form-item label="封面图片">
        <upimg :cmpOption="{disabled:false,isSetCover:false}" filePath="ys" inputtype="coverImage" :value="formInline.coverImage"
        @changimg="e=>changimg(e,'coverImage')"></upimg>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item>
            <div style="margin-top: 20px">
              <el-button @click="add()" style="background-color: #3F9B6A;color: #fff;">确定</el-button>
              <el-button @click="close()" class="buttonHover"
                style="color: #606266;border: 1px solid #DBDBDB;background-color: #fff;">取消</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog :visible.sync="addMing" title="选择资源" width="65%" append-to-body center
      :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <zycd v-if="addMing" @minSev="minSev" @mingClose="mingClose"></zycd>
    </el-dialog>
  </div>
</template>

<script>
  import zycd from '@/components/change/zycd.vue'
  import upimg from "@/components/ImageUpload/index"
  import wangEditor from "@/components/editor/index";
  import {
    MarkAdd,
    MarkEdit,
  } from '@/api/MarkActivity.js'
  export default {
    components: {
      zycd,
      upimg,
      wangEditor
    },
    data() {
      return {
        addMing:false,//添加资源弹窗
        AddData:[],//资源数据
        plan_Time: [],//时间范围
        formInline: {
          title: '', // 营销活动标题
          content: '', // 内容
          venue: '', // 场地
          startTime: '', // 开始时间
          endTime: '', // 结束时间
          contactPerson: '', // 联系人
          contactPhone: '', // 联系电话
          coverImage: '', // 封面图片（存储图片的路径或URL）
          organizer: '', // 举办方
          registeredCount: null, // 已参与报名人数
          createdAt: '', // 创建时间
          createdBy: '', // 创建人
          reviewStatus: '', // 审核状态（待审核、已批准、已拒绝）
          reviewComment: '', // 审核意见
          onlineType: '' // 线上类型
        },
        rules: {
          title: [{
            required: true,
            message: '请输入营销活动标题',
            trigger: 'blur'
          }],
          content: [{
            required: true,
            message: '请输入内容',
            trigger: 'blur'
          }],
          venue: [{
            required: true,
            message: '请输入场地',
            trigger: 'blur'
          }],
          startTime: [{
            required: true,
            message: '请选择开始时间',
            trigger: 'change'
          }],
          contactPerson: [{
            required: true,
            message: '请输入联系人',
            trigger: 'blur'
          }],
          contactPhone: [{
            required: true,
            message: '请输入联系电话',
            trigger: 'blur'
          }],
        },
      };
    },
    props: {
      info: {
        type: Object,
        default: {}
      }
    },
    created() {
  
    },
    methods: {
      mingShow(){
        console.error(';;')
      },
      changimg(e, type) {
        this.formInline[type] = e
        console.error(this.ruleForm[type])
      },
      add() {

        if (this.formInline.id) {
          
          this.$refs.heForm.validate((valid) => {
            console.log(valid)
            if (valid) {
              MarkEdit({
                ...this.formInline
              }).then(res => {
                console.error(res)
                if (res.code == 200) {
                  this.$message({
                    message: '添加成功',
                    type: 'success'
                  })
                  this.$emit('removeonaction', '1')
                } else {
                  this.$message({
                    message: res.msg,
                    type: 'error'
                  })
                }

              })
            } else {
              this.$message({
                message: '请填写完整信息',
                type: 'error'
              })
              return false;
            }
          })
        } else {
          this.$refs.heForm.validate((valid) => {
            console.log(valid)
            if (valid) {
              MarkAdd({
                ...this.formInline
              }).then(res => {
                console.error(res)
                if (res.code == 200) {
                  this.$message({
                    message: '添加成功',
                    type: 'success'
                  })
                  this.$emit('removeonaction', '1')
                } else {
                  this.$message({
                    message: res.msg,
                    type: 'error'
                  })
                }

              })
            } else {
              this.$message({
                message: '请填写完整信息',
                type: 'error'
              })
              return false;
            }
          })

        }
      },
      close() {
        this.$emit('removeonaction', '1')
      },
      MingDelete(item) {
        
      },

    },
  };
</script>
<style lang="css">
  .el-upload {
    display: block;
    text-align: left;
  }

  .el-dialog__header {
    background-color: #F2F3F5;
    text-align: left;
  }

  .el-dialog__title {
    line-height: 30px;
    font-size: 15px;
    color: #303133;
  }
</style>
<style lang="scss" scoped>
  ::v-deep .el-dialog__body {
    padding: 0 0 !important;
  }
  .el-dialog__header{
    padding: 0;
    display: none;
  }
</style>

