<template>
  <div class="newDirectory H100">
    <div class="head_box">
      <h6>内容管理/业务服务指南/新增网点地图</h6>
      <h4>新增网点地图</h4>
    </div>
    <div class="content_box">


      <div class="form_box h778px" >
        <el-row style="width:100%;">
          <el-col :span="12" style="width: 350px">
            <el-form :model="form"  ref="form" style="margin-left:25%"  :rules="formRules"  label-position="left">
              <el-form-item label="网点名称：" style="width:100%"  prop="name"    :label-width="formLabelWidth">
                <el-input size="small" v-model="form.name" placeholder="请输入网点名称"></el-input>
              </el-form-item>
              <el-form-item label="网点地址：" style="width:100%"    :label-width="formLabelWidth">
                <el-input size="small" v-model="form.address" placeholder="请输入网点地址"></el-input>
              </el-form-item>
              <el-form-item label="网点联系电话：" style="width:100%"   :label-width="formLabelWidth">
                <el-input size="small" v-model="form.phoneNum" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="排序值：" style="width:100%"   :label-width="formLabelWidth">
                <el-input size="small" v-model="form.sortorder" placeholder=""></el-input>
              </el-form-item>

              <el-form-item  :label-width="formLabelWidth">
                <el-upload  class="avatar-uploader" action=" " :show-file-list="false" name="headMap"
                            :before-upload="beforeHeadUpload"  :http-request="handleUploadImg"  accept="image/gif, image/jpeg, image/png">
                  <img v-if="form.headMap" :src="form.headMap" class="avatarpic">
                  <el-button size="small" type="primary">点击上传背景图</el-button>
                </el-upload>
              </el-form-item>
              <div   class="dialog-footer">
                <el-button type="primary"   @click="saveMessage"  >提交</el-button>
                <el-button  @click="getBack"  type="primary" >取消</el-button>
              </div>
            </el-form>

          </el-col>
          <el-col :span="12" style="width: 600px;padding-left: 20px">
            <div style="width: 100%;height: 100%;background: url('../../../static/images/map-background.jpg') repeat;" id="map"></div>
            <div id="popup" class="ol-popup portlet box blue" style="width: 380px">
              <div class="portlet-title">
                <div class="caption">
                  <i class="icon icon-info-20"></i>
                  <span class="caption-subject" >热点区域</span>
                </div>
                <div class="actions">
                  <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                </div>
              </div>
              <div id="popup-content"  >


                <el-row  align="middle" >
                  <span class="demonstration"    style="padding: 0 0 0 30px"  >名称:</span>
                  <div  style="padding: 0 12px 6px 12px;display: inline-block"  >
                    <el-input placeholder="请输入名称" size="mini"  style="width: 250px"   v-model="hotSpot.name" >  </el-input>
                  </div>
                </el-row>


                <el-form-item  :label-width="formLabelWidth">
                  <el-upload  class="avatar-uploader" action=" " :show-file-list="false" name="headMap"
                              :before-upload="beforeHeadUpload"  :http-request="handleUploadImg"  accept="image/gif, image/jpeg, image/png">
                    <img v-if="form.headMap" :src="form.headMap" class="avatarpic">
                    <el-button size="small" type="primary">点击上传热点图标</el-button>
                  </el-upload>
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-form-item>
                <el-row  align="middle" >
                  <span class="demonstration"    style="padding: 0 0 0 17px"  >宽:</span>
                  <div  style="padding: 0 12px 6px 12px;display: inline-block"  >
                    <el-input-number v-model="hotSpot.width" size="mini"   :min="1" style="width: 100px" ></el-input-number>
                  </div>
                  <span class="demonstration"    style="padding: 0 0 0 17px"  >高:</span>
                  <div  style="padding: 0 12px 6px 12px;display: inline-block"  >
                    <el-input-number v-model="hotSpot.height" size="mini"   :min="1" style="width: 100px" ></el-input-number>
                  </div>
                </el-row>

                <el-row  align="middle" >
                  <span class="demonstration"    style="padding: 0 0 0 30px"  >备注:</span>
                  <div  style="padding: 0 12px 12px 12px;display: inline-block"  >
                    <el-input  type="textarea" size="mini" style="width: 250px"  :rows="2"  placeholder="请输入备注"  v-model="hotSpot.note">
                    </el-input>
                  </div>
                </el-row>

              </div>
            </div>


          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>




<style >
  @import '../../js/openlayers/map.css';
  /*@import 'https://openlayers.org/en/v5.2.0/css/ol.css';*/
  @import '../../style/ol.css';
  .el-row.is-align-middle * {
    vertical-align: middle;
  }
</style>


<script>

  import {ColorChange} from '../../js/front/colorChange';
  import {createMap} from '../../js/front/map';
  import {startDataClass} from '../../js/front/getData';
  import {startDraw} from '../../js/front/drawFeature';
  import {FeatureStyle} from '../../js/front/FeatureStyle'
  import {ChangeBaseLayer} from '../../js/front/ChangeBaseLayer';
  import {Measure} from '../../js/tools/Measure';

  let mapControl;
  let maoObj;
  let drawFeatureObj;
  let editFeatureStyle;
  let changeBaseLayer;
  let measure;



  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        formLabelWidth: "110px",
        tempImageLayer:null,
        POINT_TYPE:'Point',
        POLYGON_TYPE:'Polygon',
        hotSpot:{
          id:null,
          type:"",//点还是面
          bankBranchId:null,
          name:"",
          note:"",
          coordinate:"",
          width:"",
          height:"",
          rotationAngle:"",
          imageUrl:""  //图标地址
        },
        form: {
          id:null,
          name: '',
          address: '',
          imageUrl: '',
          phoneNum: '',
          width: '',
          height: '',
          sortorder: '',
          bankQrCode: '',
        },
        inputVisible: false,
        inputValue: '',



        formRules:{
          name:[
            {required: true, message: "网点名称不能为空", trigger: 'change'},
          ],
        }

      }
    },
    computed: {

    },
    mounted() {
      this.init();
    },
    components: {
    },
    methods: {
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },

      init(){
        let vm = this;
        let colorChange=ColorChange();
        maoObj =createMap();
        mapControl= startDataClass(maoObj,this);
        drawFeatureObj=startDraw(maoObj,this);
        changeBaseLayer=new ChangeBaseLayer(vm,maoObj.getMap());
        measure=new Measure(vm,maoObj);
        editFeatureStyle= new FeatureStyle(this,maoObj);
        editFeatureStyle.setToken(vm.frontToken);
        drawFeatureObj.setCilckCallBack(function(type,fe,event){
          editFeatureStyle.popupWindow(type,event, fe)
        });
      },


      //文件上传   地图图片
      handleUploadImg(file){
        let vm=this;
        vm.createReader(file.file);
        vm.handleUpload(file.file).then(function (response) {
          vm.form[file.filename] = response.data.url;
          vm.changeMapBaseLayerMap(response.data);
        })
      },
      changeMapBaseLayerMap(data){
        let extent=[0,0,Number(this.form.width)/1000,Number(this.form.height)/1000,];
        this.tempImageLayer=changeBaseLayer.setImageLayer(extent,data.url,this.tempImageLayer);

        maoObj.setCenterAndZoom([Number(this.form.width)/2000,Number(this.form.height)/2000],6);
      }
      ,createReader(file) {
        let vm=this;
        var reader = new FileReader;
        reader.onload = function (evt) {
          var image = new Image();
          image.onload = function () {
            var width = this.width;
            var height = this.height;
            vm.form.width=width;
            vm.form.height=height;
          };
          image.src = evt.target.result;
        };
        reader.readAsDataURL(file);
      },

      handleUpload(file){
        let vm = this;
        let formData = new FormData();
        formData.append("bc_cover",file);
        return new Promise(function(resolve, reject) {
          vm.$https({
            url: 'pic/upload',
            authType:vm.backToken,
            method: 'post'
          }, formData,'file',60000).then((res) => {
            resolve(res)
          }, (error) => {
          })
        })
      },

      saveMessage(){
        let vm =this;
        if(vm.form.id&&vm.form.id!=""){
          //编辑
          var param= vm.$qs.stringify(vm.form);
          vm.$https({
            url: 'bankBranchInfo/edit',
            authType:vm.backToken,
            method: 'post'
          }, param,'file',60000).then((res) => {
            vm.getBack();
          }, (error) => {
          })
        }else{
          //新增
          var param= vm.$qs.stringify(vm.form);
          vm.$https({
            url: 'bankBranchInfo/add',
            authType:vm.backToken,
            method: 'post'
          }, param,'file',60000).then((res) => {
            vm.getBack();
          }, (error) => {
          })
        }
      },
      beforeHeadUpload(file){ //底图文件
        const isLt30M = file.size / 1024 / 1024 < 30;
        if (!isLt30M) {
          this.$message.error('文件大小不能超过 30MB!');
        }
        return isLt30M;
      },


      getBack() {
        history.back(-1);
      }
    }
  }
</script>

<style lang="less">
  @import '../../style/common';
  .newDirectory{
    .content_box{
      position: relative;
      .el-form{
        .el-form-item{
          width: 100%;
          margin-bottom: 10px;
        }
        .el-input__inner{
          height: 32px;
        }
        .el-upload--picture-card{
          width:468px;
          height:270px;
          line-height: 270px;
        }
      }
      .dialog-footer{
        text-align: center;
        .el-button{
          padding: 6px 13px;
        }
      }

    }
  }



</style>
