<template>
  <div>
    <el-dialog
        title="添加"
        class="dialog-mini"
        width="800px"
        @close="close"
        :visible.sync="dialogformVisible"
      >
        <el-form :model="ruleForm" :rules="rules" ref="form" style="max-height: 500px;overflow: auto;" label-width="90px" size="small">
          <el-form-item label="公园名称"  prop="parkName">
            <el-input v-model="ruleForm.parkName"></el-input>
          </el-form-item>
          <el-form-item label="公园等级"  prop="level">
            <el-input v-model="ruleForm.level"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>
          <el-form-item label="公园面积">
            <el-input v-model="ruleForm.parkArea"></el-input>
          </el-form-item>
          <el-form-item label="主管单位">
            <el-input v-model="ruleForm.manageUnit"></el-input>
          </el-form-item>
          <el-form-item label="公园简介">
            <el-input v-model="ruleForm.description" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="图片">
            <el-upload
                class="avatar-uploader"
                ref="upload"
                action="string"
                list-type="picture-card"
                :multiple="false"
                :limit="1"
                accept=".jpg,.png,.jpeg"
                :show-file-list="true"
                :http-request="UploadCoverImage"
                :file-list="fileList"
            > 
                <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="经纬度">
            <el-col :span="10">
              <el-input type="number"
                        v-model="ruleForm.lng">
                <template slot="prepend">经度</template>
              </el-input>
            </el-col>
            <el-col :span="14">
              <el-input type="number"
                        v-model="ruleForm.lat">
                <template slot="prepend">纬度</template>
                <template slot="append">
                  <el-button type="success" @click="handlerOpenMap">点击选择定位</el-button>
                </template>
              </el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="close" >取 消</el-button>
          <el-button size="mini" type="primary" @click="submitBtn('form')">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog
        title="选择定位"
        class="dialog-mini"
        width="1070px"
        @close="areaCalcVisible=false"
        :visible.sync="areaCalcVisible"
      >
        <el-container style="width:1050px;height:600px;overflow-y:hidden;">
          <AreaCalc v-if="areaCalcVisible" @pointCancel="showAreaCalcMode = false" :status="mapStatus" @backLngLat="backLngLat"  ></AreaCalc>
        </el-container>
        <div slot="footer" class="dialog-footer">
          <el-button type="danger" size="mini" @click="handleMap('clear')" >清 除</el-button>
          <el-button type="success" size="mini" @click="handleMap('dot')" >打 点</el-button>
          <el-button size="mini" @click="areaCalcVisible=false" >取 消</el-button>
          <el-button size="mini" type="primary" @click="handleLngLat">确 定</el-button>
        </div>
  
      </el-dialog>
      
  
  </div>      
  </template>
  
  <script>
  
  import AreaCalc from "./AreaCalc";
  import {postMethodFiles,postMethodCommon } from "@/api/common"; 
  
  
  export default {
      name: "shujutianbao",
      components:{
        AreaCalc
      },
      data() {
          return {
            areaCalcVisible: false,
            dialogformVisible: true,
            ruleForm:{
              id: 0,
              parkName: '',
              level: '',
              address: '',
              parkArea: '',
              manageUnit: '',
              description: '',
              imageUrl: '',
              lng: '',
              lat: '' 
            },
            rules:{
              parkName: [
                { required: true, message: '请输入公园名称', trigger: 'blur' }
              ]
            },
            mapStatus: null,
            mapLngLat:{},
            fileList:[]
          }
      },
    
      created() {
          
      },
      mounted(){
          
      },
      methods: {
        close(){
          this.$emit("close")
        },
        handlerOpenMap(){
          this.areaCalcVisible = true
        },
        handleMap(e){
          this.mapStatus = e
        },
        handleLngLat(){
          if(this.mapLngLat.lng){
            this.mapStatus = 'clear'
            this.ruleForm.lng = this.mapLngLat.lng
            this.ruleForm.lat = this.mapLngLat.lat
            
          }else{
  
          }
          this.areaCalcVisible = false
        },
        backLngLat(e){
          this.mapLngLat = e
        },
        submitBtn(formName){
          console.log('123',this.ruleForm)
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.submitClick();
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        submitClick(){
          postMethodCommon("/ParkInfo/AddParkInfo",this.ruleForm).then(res =>{
            if(res.code == 200){
              this.$emit("addSuccess");
              this.$message({
                type:"success",
                message: res.message
              })
            }
          })
        },
        UploadCoverImage(param) {
          const formData = new FormData();
          formData.append("formFiles", param.file);
          this.fileList = []
          postMethodFiles('/ParkInfo/UploadImage?name=park',formData).then(res =>{
              if (res.data.code == 200) {
                this.ruleForm.imageUrl = res.data.result
                this.fileList.push({
                    name: 'park',
                    url: process.env.VUE_APP_BASE_IMG_URL + '/' + res.data.result,
                });
                this.$message({
                  type:"success",
                  message: res.data.message
                })
              } else {
                  this.$message({
                    type:"error",
                    message: res.data.message
                  })
              }
          }).catch( err =>{
            console.log('err',err)
          })
        },
      
  
      }
  }
  </script>
  
  <style>
  .el-dialog__headerbtn{
    top: 0 !important;
  }
   
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px !important;
    text-align: center;
  }
  /* 滚动条 */
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  ::-webkit-scrollbar-thumb {
    height: 50px;
    background-color: #eee;
    -webkit-border-radius: 10px;
  }
  </style>
  