<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="shopNumber">
            <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">
      <zy v-if="addMing" @minSev="minSev" @mingClose="mingClose"></zy>
    </el-dialog>
  </div>
</template>

<script>
   import zy from '@/components/change/zy.vue'
  import {
    businessListGetAll,
  } from '@/api/business'
  import upimg from "@/components/ImageUpload/index"
  import wangEditor from "@/components/editor/index";
  import {
    uploadUrl
  } from '@/utils/request'
  import {
    getAlls,
    changAlls
  } from '@/api/information.js'
  import {
    getAlls as map1
  } from '@/api/map1.js'
  import {
    miniioupload
  } from '@/api/commodityLease.js'
  import {

    contractinsertAdd
  } from '@/api/manage.js'
  import {
    cerePlatformMerchant
  } from '@/api/newly.js'
  import {
    MarkGetAll,
    MarkAdd,
    MarkEdit,
    MarkDel,
    QRcode,
    Registration
  } from '@/api/MarkActivity.js'
  export default {
    components: {
      zy,
      upimg,
      wangEditor
    },
    data() {
      return {
        AddData: [], //最后资源
        multipleSelection: [], //资源
        addMing: false,
        ziyuanData: [],
        shopId: null,
        hefuData: [], //合同附件
        uploadFileUrl: uploadUrl, // 请求地址
        shopList: [],
        plan_Time: [],
        formInline: {
          title: '',
          content: '',
          venue: '',
          contactPerson: '',
          contactPhone: '',
          coverImage: '',
          registeredCount: '',
        },
        rules: {
          title: [{
            required: true,
            message: '请选择合同类型',
            trigger: 'change'
          }],
          content: [{
            required: true,
            message: '请输入合同编号',
            trigger: 'blur'
          }],
          venue: [{
            required: true,
            message: '请输入标段号',
            trigger: 'blur'
          }],
          contactPerson: [{
            required: true,
            message: '请输入合同名称',
            trigger: 'blur'
          }],
          contactPhone: [{
            required: true,
            message: '请输入押金',
            trigger: 'blur'
          }],
          coverImage: [{
            required: true,
            message: '请选择签订日期',
            trigger: 'change'
          }],
          registeredCount: [{
            required: true,
            message: '请选择终止日期',
            trigger: 'change'
          }]
        },
        shopfrom: {
          checkState:'2',
          pageNumber: 0,
          pageSize: 1000,
        },
        pageindex: {
          pageNumber: 0,
          pageSize: 20,
        },
        baseURL: 'http://192.168.2.38:9003',
        uploadFiles: [],
        filesLength: 1
      };
    },
    props: {
      info: {
        type: Object,
        default: {}
      }
    },
    created() {
      cerePlatformMerchant(this.shopfrom).then(res => {
        this.shopList = res.data.content
        console.error(this.shopList)
      })
    },
    methods: {
      changimg(e, type) {
        this.formInline[type] = e
        console.error(this.ruleForm[type])
      },
      add() {

        if (this.formInline.id) {
        } 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) {
        this.AddData.splice(item, 1);
      },
      async mingShow() {
        const ziyuan = await getAlls(this.pageindex)
        const ggw = await map1(this.pageindex)
        const changdi = await changAlls(this.pageindex)
        this.ziyuanData = [...ziyuan.data.content, ...ggw.data.content, ...changdi.data.content]
        console.error(this.ziyuanData)
        this.addMing = true
      },
      handleSelectionChange(selection) {
        // 处理选择变化的逻辑
        console.error(selection)
        this.multipleSelection= []
        this.multipleSelection.push(selection)
      },
      minSev() {
        // this.AddData = this.multipleSelection
        const filteredAddData = this.AddData.filter(itemAdd => {
          // 使用 some 方法检查 this.multipleSelection 中是否存在具有相同 id 的元素
          return !this.multipleSelection.some(itemMultiple => itemMultiple.id === itemAdd.id);
        });
        this.AddData = filteredAddData.concat(this.multipleSelection)
        this.addMing = false
        this.multipleSelection = []

      },
      mingClose() {
        this.multipleSelection = []
        this.ziyuanData = []
        this.addMing = false
      },
      changeRelatedMerchants(e) {
        console.error(e)
        this.shopId = this.shopList[e].id
        this.formInline.tenantName = this.shopList[e].name
        this.formInline.tenantTelephone = this.shopList[e].phone
      },
      hefuRemove() {
        this.hefuData = []
      },
      hefuSuccess(response, file, fileList) {
        this.hefuData = []
        console.error(response)
        let fd = new FormData()
        fd.append('file', response.raw)
        fd.append('filePath', 'hetong')
        miniioupload(fd).then(res => {
          console.error(res)
          const fileMsg = {
            name: response.name,
            url: res.data,
          }
          this.hefuData.push(fileMsg)
        })
      },


    },
  };
</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>

