<template>
  <div>
    <el-form :model="ruleForm" :rules="rulesHetong" ref="heForm" label-width="130px" class="demo-ruleForm">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="商铺名称" prop="shopName">
            <el-input v-model="ruleForm.shopName" placeholder="请输入" style="margin-top:5px;" maxlength="50"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="场地编号" prop="venueNumber">
            <el-input v-model="ruleForm.venueNumber" disabled placeholder="将根据类型自动为资源编号"
              style="margin-top:5px;"></el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="门牌号" prop="houseNumber">
            <el-input v-model="ruleForm.houseNumber" placeholder="请输入" style="margin-top:5px;"
              maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建筑形式" prop="architecturalForm">
            <el-select v-model="ruleForm.architecturalForm" placeholder="请选择" style="margin-top:5px;width: 100%;">
              <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="belongingGreenwaySection">
            <el-select v-model="ruleForm.belongingGreenwaySection" placeholder="请选择" style="margin-top:5px;width: 100%;"
              @change="lvdaoSel">
              <el-option :label="item.name" :value="item.code" v-for="(item,index) in lvdaoList"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属公园/步道" prop="belongingParkTrail">
            <el-select v-model="ruleForm.belongingParkTrail" placeholder="请选择" style="margin-top:5px;width: 100%;">
              <el-option :label="item.name" :value="item.code" v-for="(item,index) in gongyuanList"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="建筑面积" prop="floorSpace">
            <el-input v-model="ruleForm.floorSpace" 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="actualUsableArea">
            <el-input v-model="ruleForm.actualUsableArea" placeholder="请输入" style="margin-top:5px;">
              <template slot="append">M<sup>2</sup></template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="所属区域" prop="belongingRegion">
            <el-select v-model="ruleForm.belongingRegion" 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-col :span="12">
          <el-form-item label="归属部门" prop="belongingDepartment">
            <el-input v-model="ruleForm.belongingDepartment" placeholder="请输入" style="margin-top:5px;" maxlength="50">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="负责人" prop="head">
            <el-input v-model="ruleForm.head" placeholder="请输入" style="margin-top:5px;" maxlength="20">
            </el-input>
          </el-form-item>
        </el-col>
        <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="mapPunctuation">
            <div style="width: 100%;height: 300px;">
              <map-mark :message="parentMessage" :edit="edit" :sendChildDate="getChildDate"></map-mark>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="建筑图纸" prop="architecturalDrawings">
            <upimg v-model="ruleForm.architecturalDrawings" :limit="5" :fileSize="1"></upimg>
          </el-form-item>
        </el-col>
      </el-row> -->
      <el-form-item label="建筑图纸" prop="architecturalDrawings">
        <el-upload :action="$baseURL" class="avatar-uploader" :auto-upload="false" :show-file-list="false"
          :on-remove="hefuRemove('architecturalDrawings')" :on-change="(e) => hefuSuccess(e,'architecturalDrawings')">
          <img v-if="ruleForm.architecturalDrawings" :src="$baseURL+ruleForm.architecturalDrawings" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="商铺描述" prop="shopDescription">
            <el-input type="textarea" v-model="ruleForm.shopDescription" style="margin-top:5px;width: 100%;" placeholder="请输入"
              maxlength="200"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="展示主图" prop="displayMainImage">
            <!-- <upimg v-model="ruleForm.displayMainImage" :limit="1" :fileSize="1"></upimg> -->
            <el-upload :action="$baseURL" class="avatar-uploader" :auto-upload="false" :show-file-list="false"
              :on-remove="hefuRemove('displayMainImage')" :on-change="(e) => hefuSuccess(e,'displayMainImage')">
              <img v-if="ruleForm.displayMainImage" :src="$baseURL+ruleForm.displayMainImage" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="其他图片/视频" prop="otherImageVideos">
            <el-upload :auto-upload="false" class="video-uploader" :action="uploadFileUrl" :on-remove="hefuRemove"
              :on-change="hefuSuccess" :file-list="fileData">
              <el-button style="background-color: #fff;color: #3F9B6A;border: 1px solid #dcdfe6;" class="buttonHover"
                v-if="fileData.length==0">+点击上传</el-button>
              <!-- <div v-if="fileData.length==0" slot="tip" class="el-upload__tip">（不超过50M，格式支持word、excel、ppt、pdf）</div> -->
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>

      <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 {
    uploadUrl
  } from '@/utils/request'
  import {
    miniioupload
  } from '../../api/commodityLease.js'
  import {
    gongyuan,
    lvdaoduan,
    addList,
    editList 
  } from '../../api/information.js';

  export default {
    components: {
      upimg,
      MapMark
    },
    data() {
      return {
        uploadFileUrl: uploadUrl, // 请求地址
        ruleForm: {
          shopName: '',
          venueNumber: '',
          houseNumber: '',
          architecturalForm: '',
          actualUsableArea: '',
          belongingRegion: '',
          belongingDepartment: '',
          head: '',
          detailedLocation: '',
          mapPunctuation: '',
          shopDescription: '',
          belongingGreenwaySection: '',
          belongingParkTrail: '',
          floorSpace: ''
        },
        rulesHetong: {
          shopName: [{
            required: true,
            message: '请输入商铺名称',
            trigger: 'blur'
          }, ],
          houseNumber: [{
            required: true,
            message: '请输入门牌号',
            trigger: 'blur'
          }, ],
          architecturalForm: [{
            required: true,
            message: '请选择建筑形式',
            trigger: 'change'
          }],
          actualUsableArea: [{
            required: true,
            message: '请输入实际使用面积',
            trigger: 'blur'
          }],
          belongingRegion: [{
            required: true,
            message: '请选择所属区域',
            trigger: 'change'
          }],
          head: [{
            required: true,
            message: '请输入负责人',
            trigger: 'blur'
          }, ],
          detailedLocation: [{
            required: true,
            message: '请输入详细位置',
            trigger: 'blur'
          }, ],
          // displayMainImage: [{
          //   required: true,
          //   message: '请上传主图',
          //   trigger: 'blur'
          // }, ],
          // belongingGreenwaySection: [{
          //   required: true,
          //   message: '请选择所属绿道段',
          //   trigger: 'change'
          // }],
        },
        uploadFiles: [],
        filesLength: 1,
        lvdaoList: [],
        gongyuanList: [],
        fileData: [],
        parentMessage:{},
        edit:true
      };
    },
    props: {
      info: {
        type: Object,
        default: {}
      }
    },
    async created() {
      console.error(this.info)
      if (this.info.id) {
        this.ruleForm = this.info
        this.fileData = []
        if (typeof this.info.mapPunctuation == 'string') {
          this.parentMessage = JSON.parse(this.info.mapPunctuation)
        } else {
          this.parentMessage = this.info.mapPunctuation
        }
        const fileMsg = {
          name: '文件',
          url: this.info.otherImageVideos
        }
        // 将文件地址存储在 uploadedFiles 数组中
        this.fileData.push(fileMsg)
        this.$nextTick(() => {
          this.edit = false

        })
      }
      const lvdao = await lvdaoduan()
      this.lvdaoList = lvdao.data
    },
    methods: {
      //获取当前时间
      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.heForm.validate((valid) => {
            console.log(valid)
            if (valid) {
              if (this.fileData.length != 0) {
                this.ruleForm.otherImageVideos = this.fileData[0].url
              }
              this.ruleForm.updateDate = this.updateCurrentTime()
              // if (Object.keys(this.mapData).length != 0) {
              //   this.ruleForm.mapPunctuation = JSON.stringify(this.mapData)
              // }
              editList(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.heForm.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.mapPunctuation = JSON.stringify(this.mapData)
              this.ruleForm.rentalStatus = 0
              this.ruleForm.publishStatus = 0
              addList(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(e) {
        // this.ruleForm[e] = ''
      },
      hefuSuccess(response, e) {
        console.error(response)
        console.error(e)
        this.ruleForm[e] = ''
        let fd = new FormData()
        fd.append('file', response.raw)
        fd.append('filePath', 'sp')
        miniioupload(fd).then(res => {
          console.error(res)
          this.ruleForm[e] = res.data
        })
      }


    },
  };
</script>
<style lang="scss">
  .el-dialog__header {
    background-color: #F2F3F5;
    text-align: left;
  }

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

  .avatar-uploader .el-upload {
    border: 1px dashed #3F9B6A;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #3F9B6A;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
