<template>
  <div>
    <el-form :model="ruleForm" :rules="rulesSt" ref="ruleForm" label-width="130px"
      class="demo-ruleForm">
      <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="场地名称" prop="venueName">
                      <el-input v-model="ruleForm.venueName" placeholder="请输入" style="margin-top:5px;" maxlength="50"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="场地类型" prop="venueType">
                      <el-select v-model="ruleForm.venueType" placeholder="请选择" style="margin-top:5px;width: 100%;">
                        <el-option label="草地" value="草地"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="实际使用面积" prop="actualArea">
                      <el-input v-model="ruleForm.actualArea" placeholder="请输入" style="margin-top:5px;">
                        <template slot="append">M<sup>2</sup></template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="所属区域" prop="district">
                      <el-select v-model="ruleForm.district" placeholder="请选择" style="margin-top:5px;width: 100%;">
                        <el-option label="成华区" value="成华区"></el-option>
                        <el-option label="武侯区" value="武侯区"></el-option>
                        <el-option label="锦江区" value="锦江区"></el-option>
                        <el-option label="青羊区" value="青羊区"></el-option>
                        <el-option label="金牛区" value="金牛区"></el-option>
                        <el-option label="双流区" value="双流区"></el-option>
                        <el-option label="郫都区" value="郫都区"></el-option>
                        <el-option label="龙泉驿区" value="龙泉驿区"></el-option>
                        <el-option label="温江区" value="温江区"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="归属部门" prop="department">
                      <el-input v-model="ruleForm.department" placeholder="请输入" style="margin-top:5px;" maxlength="50">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="负责人" prop="responsiblePerson">
                      <el-input v-model="ruleForm.responsiblePerson" placeholder="请输入" style="margin-top:5px;" maxlength="20">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="详细位置" prop="detailedLocation">
                      <el-input v-model="ruleForm.detailedLocation" placeholder="请输入" style="margin-top:5px;" maxlength="100">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="地图标点" prop="mapMarker">
                    <div style="width: 100%;height: 300px;border: 1px solid #3F9B6A;" >
                      <MapMark :sendChildDate="getChildDate" ref="mapComponent"></MapMark>
                    </div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="规划图纸" prop="planningDrawing">
                  <upimg filePath="cd" inputtype="planningDrawing" :value="ruleForm.planningDrawing" @changimg="e=>changimg(e,'planningDrawing')"></upimg>
                  <!-- <upimg filePath="cd" :value="ruleForm.planningDrawing" @changimg="e=>changimg(e,'planningDrawing')" :limit="5" :fileSize="1"></upimg> -->
                </el-form-item>
                <el-form-item label="场地描述" prop="description">
                  <el-input type="textarea" v-model="ruleForm.description" style="margin-top:5px;"
                    placeholder="请输入" maxlength="200"></el-input>
                </el-form-item>
                <el-form-item label="展示主图" prop="displayImage">
                  <upimg filePath="cd" inputtype="displayImage" :value="ruleForm.displayImage" @changimg="e=>changimg(e,'displayImage')"></upimg>
                  <!-- <upimg filePath="cd" :value="ruleForm.displayImage" @changimg="e=>changimg(e,'displayImage')" :limit="1" :fileSize="1"></upimg> -->
                </el-form-item>
                <el-form-item label="其他视频" prop="otherImageVideos">
                  <upfile filePath="cd" :value="ruleForm.otherImageVideos"  :fileType="'.mp4'" @changimg="e=>changimg(e,'otherImageVideos')"></upfile>
                </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>
  </div>
</template>

<script>
  import MapMark from "@/components/MapContainer/MapMark";
  import upimg from "@/components/ImageUpload/index"
      import upfile from "@/components/fujianUpload/fujianList"
  import {
    uploadUrl
  } from '@/utils/request'
  import {
    miniioupload
  } from '../../api/commodityLease.js'
  import {
    gongyuan,
    lvdaoduan,
    addList,
    editList
  } from '../../api/map1.js';
  import {
    changadd,
    changedit
  } from '../../api/information'
  export default {
    components: {
      upimg,
      MapMark,
      upfile
    },
    data() {
      return {
        ontype:'线上广告位',
        typelist:[
          {
            name:'线上广告位',
            vaule:'线上广告位'
          },
          {
            name:'实体广告位',
            vaule:'实体广告位'
          },
        ],
        //地图标点的经纬度
        mapData: {},
        uploadFileUrl: uploadUrl, // 请求地址
        ruleForm: {
          venueName: '',
            venueType: '',
            actualArea: '',
            district: '',
            department: '',
            responsiblePerson: '',
            detailedLocation: '',//详细位置
            mapMarker: '',//地图标点
            description: '',//场地描述
            planningDrawing: '',//规划图纸
            displayImage: '',//展示主图
            otherMedia: '', //其他图片视频
        },
        rulesSt: {
          venueName: [{
            required: true,
            message: '请输入场地名称',
          trigger: 'blur'
          }, ],
          venueType: [{
            required: true,
            message: '请选择场地类型',
          trigger: 'change'
          }, ],
          actualArea: [{
            required: true,
            message: '请输入实际使用面积',
         trigger: 'blur'
          }, ],
          district: [{
            required: true,
            message: '请选择所属区域',
           trigger: 'change'
          }],
          detailedLocation: [{
            required: true,
            message: '请输入详细位置',
               trigger: 'blur'
          }, ]
        },
        uploadFiles: [],
        filesLength: 1,
        gongyuanList: [],
        fileData: [],
        parentMessage: {},
        edit: true
      };
    },
    props: {
      info: {
        type: Object,
        default: {}
      },

    },
    async created() {
      if (this.info && this.info.id) {
        this.ruleForm = this.info

      } else {

      }
    },
    methods: {
      changimg(e,type) {
        this.ruleForm[type] = e
      },
      changeadvertisingType(e){
        console.error(e)
        this.ontype = e
      },
      //获取当前时间
      updateCurrentTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = (now.getMonth() + 1).toString().padStart(2, '0');
        const day = now.getDate().toString().padStart(2, '0');
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
      //获取地图点击的经纬度
      getChildDate(mapData) {
        this.mapData = mapData

      },
      lvdaoSel(vaule) {
        this.ruleForm.belongingParkTrail = ''
        this.gongyuan(vaule)
      },
      async gongyuan(value) {
        const gongyaun = await gongyuan()
        this.gongyuanList = gongyaun.data.filter(item => item.superior == value);
      },
      add() {

        if (this.ruleForm.id) {
          this.$refs.ruleForm.validate((valid) => {
            console.log(valid)
            if (valid) {
              this.ruleForm.updateDate = this.updateCurrentTime()
              if (this.fileData.length != 0) {
                this.ruleForm.otherImageVideos = this.fileData[0].url
              }
              this.ruleForm.mapMarker = JSON.stringify(this.mapData)
              changedit(this.ruleForm).then(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.ruleForm.validate((valid) => {
            console.log(valid)
            if (valid) {
              if (this.fileData.length != 0) {
                this.ruleForm.otherImageVideos = this.fileData[0].url
              }
              this.ruleForm.createDate = this.updateCurrentTime()
              this.ruleForm.mapMarker = JSON.stringify(this.mapData)
              this.ruleForm.rentalStatus = 0
              this.ruleForm.publishStatus = 0
              changadd(this.ruleForm).then(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')
      },
      hefuRemove() {
        this.hefuData = []
      },
      hefuSuccess(response, file, fileList) {
        this.fileData = []
        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.fileData.push(fileMsg)
        })
      },


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

  .video-uploader {
    .el-upload {
      text-align: left;
    }
  }

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

  .el-dialog__title {
    line-height: 30px;
    font-size: 15px;
    color: #303133;
  }
</style>
