<template>
  <div class="app-container">
    <van-nav-bar
      title="土地列表管理"
      left-arrow
      placeholder
      safe-area-inset-top
      @click-left="onClickLeft"
    />
    <div class="search_box">
      <div class="left">
        <van-field v-model="value" left-icon="search" placeholder="请输入用户名" />
      </div>
      <van-button type="primary" round >搜索</van-button>
    </div>

    <div class="location">
      <img src="../../assets/images/app/location.png" alt="">
    </div>

    <div id="full-screen-acceptance" style="width: 100%;height:100vh;">
      <!--<div id="landMapDiv"></div>-->
      <div id="mapWrap"></div>
<!--      <div id='land-btn-wrap'>-->
<!--        <el-row>-->
<!--          <input id="drawPolygon" class="ant-btn ant-btn-red" type="button" value="画图"/>&nbsp;&nbsp;-->
<!--          &lt;!&ndash; <input id="drawRemove" type="button" class="ant-btn ant-btn-red" value="取消画图"/>&nbsp;&nbsp; &ndash;&gt;-->
<!--          <input id="drawReset" type="button" class="ant-btn ant-btn-red" value="还原"/>-->
<!--        </el-row>-->
<!--      </div>-->
    </div>
<!--    <div slot="footer" class="dialog-footer">-->
<!--      <el-button type="primary" @click="submitFormMap">确 定</el-button>-->
<!--      <el-button type="danger" @click="clearMapLayer">清除图层</el-button>-->
<!--    </div>-->


<!--      <van-popup v-model="open" position="bottom" round >-->
<!--        <div class="landPopup">-->
<!--          <p class="landPopup_title">属性数据 <img src="../../assets/images/app/edit.png" width="25" alt=""></p>-->
<!--          <van-form ref="landForm">-->
<!--            <van-field v-model="form.dkbm" label="地块代码：" placeholder="<自动生成>" :border="false" input-align="right" label-width="auto" maxlength="19" :disabled="true" >-->
<!--              &lt;!&ndash; <template #button v-if="!isDisabled">-->
<!--                <van-button size="mini" type="primary" native-type="button" @click="generateCode">生成代码</van-button>-->
<!--              </template> &ndash;&gt;-->
<!--            </van-field>-->
<!--            <van-field v-model="form.dkmc" label="地块名称：" placeholder="请输入地块名称" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />-->
<!--            <van-field v-model="syqxzText" label="所有权性质："-->
<!--                       placeholder="请选择所有权性质"-->
<!--                       required-->
<!--                       :rules="[{ required: true }]"-->
<!--                       :border="false"-->
<!--                       input-align="right"-->
<!--                       right-icon="arrow-down"-->
<!--                       readonly-->
<!--                       clickable-->
<!--                       @click="showOwnership = true"-->
<!--            />-->
<!--            <van-popup v-model="showOwnership" position="bottom" get-container=".app-container">-->
<!--              <van-picker-->
<!--                show-toolbar-->
<!--                :columns="syqxzOptions"-->
<!--                value-key="dictLabel"-->
<!--                @confirm="onConfirmOwnershipOptions"-->
<!--                @cancel="showOwnership = false"-->
<!--              />-->
<!--            </van-popup>-->
<!--            <van-field v-model="dklbText" label="地块类别："-->
<!--                       placeholder="请选择地块类别"-->
<!--                       required-->
<!--                       :rules="[{ required: true }]"-->
<!--                       :border="false"-->
<!--                       input-align="right"-->
<!--                       right-icon="arrow-down"-->
<!--                       readonly-->
<!--                       clickable-->
<!--                       @click="openLandCategoryPopup"-->
<!--            />-->
<!--            <van-popup v-model="showLandCategory" position="bottom" get-container=".app-container">-->
<!--              <van-picker-->
<!--                show-toolbar-->
<!--                :columns="dklbOptions"-->
<!--                value-key="dictLabel"-->
<!--                @confirm="onConfirmLandCategoryOptions"-->
<!--                @cancel="showLandCategory = false"-->
<!--              />-->
<!--            </van-popup>-->
<!--            <van-field v-model="tdlylxText" label="土地利用类型："-->
<!--                       placeholder="请选择土地利用类型"-->
<!--                       required-->
<!--                       :rules="[{ required: true }]"-->
<!--                       :border="false"-->
<!--                       input-align="right"-->
<!--                       right-icon="arrow-down"-->
<!--                       readonly-->
<!--                       clickable-->
<!--                       @click="showLandType = true"-->
<!--            />-->
<!--            <van-popup v-model="showLandType" position="bottom" get-container=".app-container">-->
<!--              <van-picker-->
<!--                show-toolbar-->
<!--                :columns="tdlylxOptions"-->
<!--                value-key="dictLabel"-->
<!--                @confirm="onConfirmLandTypeOptions"-->
<!--                @cancel="showLandType = false"-->
<!--              />-->
<!--            </van-popup>-->
<!--            <van-field v-model="dldjText" label="地力等级："-->
<!--                       placeholder="请选择地力等级"-->
<!--                       required-->
<!--                       :rules="[{ required: true }]"-->
<!--                       :border="false"-->
<!--                       input-align="right"-->
<!--                       right-icon="arrow-down"-->
<!--                       readonly-->
<!--                       clickable-->
<!--                       @click="showLandGrade = true"-->
<!--            />-->
<!--            <van-popup v-model="showLandGrade" position="bottom" get-container=".app-container">-->
<!--              <van-picker-->
<!--                show-toolbar-->
<!--                :columns="dldjOptions"-->
<!--                value-key="dictLabel"-->
<!--                @confirm="onConfirmLandGradeOptions"-->
<!--                @cancel="showLandGrade = false"-->
<!--              />-->
<!--            </van-popup>-->
<!--            <van-field v-model="tdytText" label="土地用途："-->
<!--                       placeholder="请选择土地用途"-->
<!--                       required-->
<!--                       :rules="[{ required: true }]"-->
<!--                       :border="false"-->
<!--                       input-align="right"-->
<!--                       right-icon="arrow-down"-->
<!--                       readonly-->
<!--                       clickable-->
<!--                       @click="showLandPurpose = true"-->
<!--            />-->
<!--            <van-popup v-model="showLandPurpose" position="bottom" get-container=".app-container">-->
<!--              <van-picker-->
<!--                show-toolbar-->
<!--                :columns="tdytOptions"-->
<!--                value-key="dictLabel"-->
<!--                @confirm="onConfirmLandPurposeOptions"-->
<!--                @cancel="showLandPurpose = false"-->
<!--              />-->
<!--            </van-popup>-->
<!--            <van-field v-model="form.sfjbnt" label="基本农田：" required :rules="[{ required: true }]" :border="false" input-align="right" >-->
<!--              <template #input>-->
<!--                <van-radio-group v-model="form.sfjbnt" direction="horizontal">-->
<!--                  &lt;!&ndash; <van-radio name="1">是</van-radio>-->
<!--                  <van-radio name="2">否</van-radio> &ndash;&gt;-->
<!--                  <van-radio v-for="dict in sfjbntOptions" :ke="dict.dictValue" :name="dict.dictValue">{{ dict.dictLabel }}</van-radio>-->
<!--                </van-radio-group>-->
<!--              </template>-->
<!--            </van-field>-->
<!--            <van-field v-model="form.scmjm" type="number" label="实测面积(亩)：" placeholder="请输入实测面积(亩)" required :rules="[{ required: true }]" :border="false" input-align="right" />-->
<!--            <van-field v-model="form.zjrxm" label="指界人姓名：" placeholder="请输入指界人姓名" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="100" />-->
<!--            <van-field v-model="form.dkdz" label="地块东至：" placeholder="请输入地块东至" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />-->
<!--            <van-field v-model="form.dkxz" label="地块西至：" placeholder="请输入地块西至" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />-->
<!--            <van-field v-model="form.dknz" label="地块南至：" placeholder="请输入地块南至" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />-->
<!--            <van-field v-model="form.dkbz" label="地块北至：" placeholder="请输入地块北至" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />-->
<!--            <van-field v-model="form.dkbzxx" label="地块备注信息：" placeholder="请输入地块备注信息" type="textarea" rows="3" :border="false" input-align="right" maxlength="250" />-->
<!--          </van-form>-->
<!--          <div class="footer_main">-->
<!--            <van-button type="default" hairline size="large">关闭弹窗</van-button>-->
<!--            <van-button type="danger" hairline size="large">删除地块</van-button>-->
<!--            <van-button type="info" hairline size="large">保存信息</van-button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </van-popup>-->

  </div>
</template>
<script>
  import { listLand, listLandQuery,getLand, getLandDetail, getLandDetailByDkbm, delLand, addLand, updateLand, printLand } from "@/api/resource/land"
  import { areaSavePri, cleanSavePri } from "@/api/gis/map"
  import { getToken } from "@/utils/auth"
  import Treeselect from "@riophae/vue-treeselect";
  import { Splitpanes, Pane } from "splitpanes"
  import "@riophae/vue-treeselect/dist/vue-treeselect.css"
  import "splitpanes/dist/splitpanes.css"
  import { deptTreeSelect } from "@/api/system/user"
  import {getConfigKey} from "@/api/system/config";
  import {getDept,getInfoByImportCode} from "@/api/system/dept";

  import $ from "jquery";


  export default {
    name: "contractedVillageContractor",
    components: { Treeselect, Splitpanes, Pane },
    data() {
      return {
        form: {},

        open:true,
        showLegend:true,
        value:'',
        landCategory: ['10'],             // 地块类别
        landLayerName:''
      };
    },
    created() {
      // 获取geoserver的地址
      this.getGeoServerUrl();
      // 获取地块图层名称
      this.getLandLayerName();
      // 获取村边界的图层名称
      this.getVillageBorderLayerName();
      this.handleMap();
    },
    mounted() {

    },
    methods: {
      onClickLeft(){
        history.back(-1);
      },

      // 获取geoserver的地址
      getGeoServerUrl() {
        getConfigKey("system.geoServer.url").then(response => {
          this.mapGeoServerUrl = response.msg;
        });
      },
      // 获取地块图层名称
      getLandLayerName() {
        getConfigKey("geoserver.layer.resourceLand").then(response => {
          this.landLayerName = response.msg;
        });
      },
      // 获取村边界的图层名称
      getVillageBorderLayerName() {
        getConfigKey("geoserver.layer.villageBorder").then(response => {
          this.villageBorderLayerName = response.msg;
        });
      },
      /** 地图修改按钮操作 */
      handleMap() {
        // this.mapTheGeomId = row;
        listLandQuery().then(response => {
          this.openMap = true;
          this.title = "修改地图";
          setTimeout(() => {
            this.pointDarw(response.rows);
          }, 500);
        });
        // getLandDetail(row.fid).then((res) => {
        //   getInfoByImportCode(row.importCode).then((res) => {
        //     let insertCode = res.data;
        //     if (insertCode != null) {
        //       this.tGeoOrganizationLat = insertCode.latitude;
        //       this.tGeoOrganizationLng = insertCode.longitude;
        //     }
        //     const tableRow = { importCode: row.importCode };
        //     listLandQuery(tableRow).then(response => {
        //       this.openMap = true;
        //       this.title = "修改地图";
        //       setTimeout(() => {
        //         this.pointDarw(response.rows);
        //       }, 500);
        //     });
        //   });
        // });
      },
      /** 地图提交按钮 */
      submitFormMap() {
        this.diglogStatus = false;
        if(this.drawInsert !=null && this.drawInsert !=""){
          this.mapTheGeomId.theGeom = JSON.stringify(this.drawInsert);
        }
        let sysGis = { tableName: 't_resource_land',priId: 'fid',id: this.mapTheGeomId.fid,theGeom: this.mapTheGeomId.theGeom };
        if (this.mapTheGeomId != null) {
          areaSavePri(sysGis).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.openMap = false;
            this.getList();
            this.diglogStatus = true;
          });
        }
      },
      /** 清除坐标点图层 */
      clearMapLayer() {
        let sysGis = { tableName: 't_resource_land',priId: 'fid',id: this.mapTheGeomId.fid};
        cleanSavePri(sysGis).then(response => {
          this.$modal.msgSuccess("清除成功");
          this.openMap = false;
          this.getList();
        });
      },
      pointDarw(resourceList) {
        //加载地图编辑
        var that = this;
        var map;
        //var hc_land;
        var draw; // global so we can remove it later
        var vector_drawing;
        var startDarw = true;
        var openDarw = false;
        if (startDarw) {
          document.getElementById("mapWrap").innerHTML = '';
          var hc_land;
          var draw; // global so we can remove it later
          var vector_drawing;
          var projection = new ol.proj.Projection({
            //地图投影类型
            code: "EPSG:3857",
            units: "degrees",
            //extent:extent
          });

          var aerial = new ol.layer.Tile({
            source: new ol.source.XYZ({
              url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
                "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
                "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
            }),
            isGroup: true,
            name: "卫星影像图",
          });

          var yingxzi = new ol.layer.Tile({
            source: new ol.source.XYZ({
              url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
            }),
            isGroup: true,
            name: "天地图文字标注--卫星影像图",
          });
          //加载地图
          map = new ol.Map({
            controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
            layers: [aerial, yingxzi],
            projection: projection,
            target: "mapWrap",
            view: new ol.View({
              //center: ol.proj.fromLonLat([115.452752, 31.789033]),
              zoom: 11,
              minZoom: 0, //地图缩小限制
              maxZoom: 18.3, //地图放大限制
            }),
          });
          // 添加村边界
          let mapBorder = new ol.layer.Image({
            source: new ol.source.ImageWMS({
              url: this.mapGeoServerUrl + '/wms',
              params: {
                LAYERS: this.villageBorderLayerName,
                cql_filter: "dept_id = '" + 100 + "'",
                SRID: 3857,
              },
            }),
            name: 'villageBorderLayer'
          });
          map.addLayer(mapBorder);

          let landLayer = new ol.layer.Image({
            source: new ol.source.ImageWMS({
              url: this.mapGeoServerUrl + '/wms',
              params: {
                LAYERS: this.landLayerName,
                cql_filter: "dept_id = '" + 100 + "'",
                SRID: 3857,
                abc: Math.random()        // 无效参数，保证每次发送的请求都不一样
              }
            }),
            name: 'landLayer'
          });
          map.getLayers().insertAt(3, landLayer);

          // 添加已经存在的资源图层
          let vectorSource = new ol.source.Vector();
          for (let resource of resourceList) {
              let feature = new ol.Feature({
                geometry: new ol.geom.MultiPolygon(JSON.parse(resource.theGeom).coordinates),
                // permanentName: permanent.name
              });
              feature.set('detail', resource);
              vectorSource.addFeature(feature);
          }

          // let resourceLayer = new ol.layer.Vector({
          //   source: vectorSource,
          //   style:  (feature, resolution) => {
          //     return new ol.style.Style({
          //       fill: new ol.style.Fill({
          //         //矢量图层填充颜色，以及透明度
          //         color: "rgba(0, 218, 255, 0.3)",
          //       }),
          //       stroke: new ol.style.Stroke({
          //         //边界样式
          //         color: "#00DAFF",
          //         width: 3,
          //       }),
          //     })
          //   }
          // });
          // map.addLayer(resourceLayer);
          //图层查询定位开始 ---------start
          hc_land = new ol.layer.Vector({
            title: "add Layer",
            source: new ol.source.Vector({
              projection: projection,
              features: new ol.format.GeoJSON().readFeatures("{\n" +
                "    \"type\": \"Feature\",\n" +
                "    \"geometry\":" + resourceList[0].theGeom + "}"),
            }),
            style: new ol.style.Style({
              fill: new ol.style.Fill({
                //矢量图层填充颜色，以及透明度
                color: "rgba(0, 218, 255, 0.3)",
              }),
              stroke: new ol.style.Stroke({
                //边界样式
                color: "#00DAFF",
                width: 3,
              }),
            }),
          });
          map.addLayer(hc_land);
          var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;
          var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
          var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
          var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
          //定位查询位置
          var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
          map.getView().animate({
            // 只设置需要的属性即可
            center: center, // 中心点
            zoom: 13, // 缩放级别
            rotation: undefined, // 缩放完成view视图旋转弧度
            duration: 1000, // 缩放持续时间，默认不需要设置
          });
          //图层查询定位结束 ---------end
          //开始绘制地图
          $("#drawPolygon").off("click").on("click", function () {
            map.removeLayer(hc_land);
            map.removeLayer(vector_drawing);
            that.drawInsert = null;
            //var source = new ol.source.Vector({wrapX: false});
            vector_drawing = new ol.layer.Vector({
              source: new ol.source.Vector(),
            });
            map.addLayer(vector_drawing);

            function addInteraction() {
              draw = new ol.interaction.Draw({
                source: vector_drawing.getSource(),
                type: "Polygon"
              });
              draw.on('drawend', function (evt) {
                map.removeInteraction(draw);
                var feature = evt.feature;
                var geometry = feature.getGeometry();
                var coordinate = geometry.getCoordinates();
                that.drawInsert = coordinate;
              });
              map.addInteraction(draw);
            }

            addInteraction();
          });
          //清除画图鼠标点击事件
          $("#drawRemove").off("click").on("click", function () {
            //map.addLayer(hc_land);
            map.removeInteraction(draw);
            //map.removeLayer(vector_drawing);
          });
          //还原之前图层
          $("#drawReset").off("click").on("click", function () {
            map.removeInteraction(draw);
            map.removeLayer(vector_drawing);
            map.addLayer(hc_land);
            that.drawInsert = null;
          });

          // 地图点击事件
          map.on("click", (evt) => {
            let feature = map.forEachFeatureAtPixel(
              evt.pixel,
              (feature) => feature
            );
            if (feature) {
              // 镇级：加载村级坐标点
              var ifConsole = feature.values_.detail;
              console.log(feature);

            }
          });

        }
        if (openDarw) {
          document.getElementById("mapWrap").innerHTML = '';
          var projection = new ol.proj.Projection({
            //地图投影类型
            code: "EPSG:3857",
            units: "degrees",
            //extent:extent
          });

          var aerial = new ol.layer.Tile({
            source: new ol.source.XYZ({
              url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
                "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
                "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
            }),
            isGroup: true,
            name: "卫星影像图",
          });

          var yingxzi = new ol.layer.Tile({
            source: new ol.source.XYZ({
              url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
            }),
            isGroup: true,
            name: "天地图文字标注--卫星影像图",
          });
          //获取坐标是否存在
          var Zb;
          if (this.tGeoOrganizationLng != null && this.tGeoOrganizationLat != null && this.tGeoOrganizationLng !=""
            && this.tGeoOrganizationLat !="" && this.tGeoOrganizationLng !=undefined && this.tGeoOrganizationLat !=undefined) {
            Zb = [this.tGeoOrganizationLng, this.tGeoOrganizationLat]
          } else {
            Zb = [115.452752, 31.789033];
          }
          //加载地图
          map = new ol.Map({
            controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
            layers: [aerial, yingxzi],
            projection: projection,
            logo: 'false',
            target: "mapWrap",
            view: new ol.View({
              center: ol.proj.fromLonLat(Zb),
              //center: ol.proj.fromLonLat([115.452752, 31.789033]),
              zoom: 17.8,
              minZoom: 0, //地图缩小限制
              maxZoom: 18, //地图放大限制
            }),
          });
          // 添加村边界
          let mapBorder = new ol.layer.Image({
            source: new ol.source.ImageWMS({
              url: this.mapGeoServerUrl + '/wms',
              params: {
                LAYERS: this.villageBorderLayerName,
                cql_filter: "import_code = '" + resourceList[0].importCode + "'",
                SRID: 3857,
              },
            }),
            name: 'villageBorderLayer'
          });
          map.addLayer(mapBorder);

          // 添加已经存在的资源图层
          let vectorSource = new ol.source.Vector();
          for (let resource of resourceList) {
            if (resource.theGeom) {
              console.log('1')
              let feature = new ol.Feature({
                geometry: new ol.geom.MultiPolygon(JSON.parse(resource.theGeom).coordinates),
                // permanentName: permanent.name
              });
              vectorSource.addFeature(feature);
            }
          }

          let resourceLayer = new ol.layer.Vector({
            source: vectorSource,
            style:  (feature, resolution) => {
              return new ol.style.Style({
                fill: new ol.style.Fill({
                  //矢量图层填充颜色，以及透明度
                  color: "rgba(0, 218, 255, 0.3)",
                }),
                stroke: new ol.style.Stroke({
                  //边界样式
                  color: "#00DAFF",
                  width: 3,
                }),
              })
            }
          });
          map.addLayer(resourceLayer);

          //图层查询定位结束 ---------end
          //开始绘制地图
          $("#drawPolygon").off("click").on("click", function () {
            //map.removeLayer(hc_land);
            map.removeLayer(vector_drawing);
            that.drawInsert = null;
            map.removeInteraction(draw);
            var source = new ol.source.Vector({wrapX: false});
            vector_drawing = new ol.layer.Vector({
              source: source,
            });
            map.addLayer(vector_drawing);
            var typeSelect = "Polygon";

            function addInteraction() {
              var value = typeSelect;
              draw = new ol.interaction.Draw({
                source: source,
                type: typeSelect
              });
              draw.on('drawend', function (evt) {
                //map.removeLayer(vector_drawing);
                var feature = evt.feature;
                var geometry = feature.getGeometry();
                var coordinate = geometry.getCoordinates();
                that.drawInsert = coordinate;
                map.removeInteraction(draw);
              });
              map.addInteraction(draw);
            }

            addInteraction();
          });
          //清除画图鼠标点击事件
          $("#drawRemove").off("click").on("click", function () {
            //map.addLayer(hc_land);
            map.removeInteraction(draw);
            //map.removeLayer(vector_drawing);
          });
          //还原之前图层
          $("#drawReset").off("click").on("click", function () {
            map.removeInteraction(draw);
            map.removeLayer(vector_drawing);
            //map.addLayer(hc_land);
            that.drawInsert = null;
          });
        }
      },
    },
  };
</script>
<style scoped lang="scss">
  ::v-deep .van-nav-bar{
    background: linear-gradient( 173deg, #91E2D3 0%, #CDFCF0 100%);
    ::v-deep.van-icon{
      color: #000000;
    }
  }
  .location{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 2vh;
    position: absolute;
    top: 12vh;
    right: 0vw;
    z-index: 9;
    background-color: rgba(0,0,0,0.5);
    border-radius: 10px;
    img{
      width: 30px;
      height: 30px;
      border: 1px dashed #ffffff;
    }
  }
  .van-popup{
    background: linear-gradient( 180deg, #E5FFF4 0%, #ffffff 100%);
    .landPopup{
      width: 94%;
      margin: 0 auto;
      .landPopup_title{
        color: #29D2AF;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
  .app-container{
    /*background: #fff url("../../../../../static/images/contracted/contracted_index_bg.png") no-repeat center;*/
    background-size: 100% 100%;
    height: 100vh;
    padding: 0;
    overflow: hidden;
  }

  ::v-deep .van-hairline--bottom::after{
    border: none;
  }

  ::v-deep .van-field--disabled .van-field__label {
    color: #646566;
  }

  ::v-deep .landPopup .van-dialog {
    width: 90%;
    height: 85%;
    overflow-y: auto;
  }

  ::v-deep .landPopup .van-field__label {
    width: 7em;
  }

  .head{
    padding: 0 4vw;
  }

  .tap_block{
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: #ebfaf2;
    padding: 2PX 4PX;
    border-radius: 10PX;
    margin-top: 1vh;
    .active{
      background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
      box-shadow: 0 0 10PX #cccccc;
      color: #333333;
    }
    p{
      width: 25%;
      text-align: center;
      padding: 5PX 0;
      border-radius: 10PX;
      color: #666666;
    }
  }

  .legend_main{
    position: absolute;
    top: 2vh;
    right: 2vw;
  }

  .openLegend{
    position: absolute;
    top: 2vh;
    right: 0vw;
    background-color: rgba(255,255,255,.5);
    width: 20PX;
    height: 70PX;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 10PX;
    border-bottom-left-radius: 10PX;
    .sanjiao-left {
      display: inline-block;
      border-right: 8PX solid #999999;
      border-right-color: initial;
      border-top: 5PX solid transparent;
      border-bottom: 5PX solid transparent;
    }
  }

  .legend_second{
    background: rgba(255,255,255,.5);
    padding: 2vh;
    border-radius: 10PX;
    margin-top: 2vh;
  }

  .legend_tt{
    font-size: 16PX;
    display: flex;
    align-items: center;
    justify-content: space-between;
    img{
      width: 20PX;
    }
  }

  .legend{
    background: rgba(255,255,255,.5);
    padding: 2vh;
    border-radius: 10PX;
    .van-checkbox{
      margin-top: 2vh;
      &:nth-child(1){
        ::v-deep .van-checkbox__icon .van-icon{
          /*border-color: rgba(22,233,15,1);*/
          border: 4px solid #16E90F;
        }
      }
      &:nth-child(2){
        ::v-deep .van-checkbox__icon .van-icon{
          /*border-color: rgba(1,198,222,1);*/
          border: 4px solid #01C6DE;
        }
      }
      &:nth-child(3){
        ::v-deep .van-checkbox__icon .van-icon{
          /*border-color: rgba(238,238,0,1);*/
          border: 4px solid #EEEE00;
        }
      }
      &:nth-child(4){
        ::v-deep .van-checkbox__icon .van-icon{
          /*border-color: rgba(238,60,60,1);*/
          border: 4px solid #EE3C3C;
        }
      }
      &:nth-child(5){
        ::v-deep .van-checkbox__icon .van-icon{
          /*border-color: rgba(235,134,0,1);*/
          border: 4px solid #EB8600;
        }
      }
    }
    .van-checkbox-group {
      .van-checkbox__label{
        i{
          display: block;
          width: 15PX;
          height: 15PX;
          border: 1px solid;
          border-radius: 3PX;
          margin-left: 10PX;
        }
        .i1{
          background: rgba(22,233,15,.7);
          border-color: rgba(22,233,15,1);
        }
        .i2{
          background: rgba(1,198,222,.7);
          border-color: rgba(1,198,222,1);
        }
        .i3{
          background: rgba(238,238,0,.7);
          border-color: rgba(238,238,0,1);
        }
        .i4{
          background: rgba(238,60,60,.7);
          border-color: rgba(238,60,60,1);
        }
        .i5{
          background: rgba(235,134,0,.7);
          border-color: rgba(235,134,0,1);
        }
        div{
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .mapBox{
    height: 100vh;
    width: 100%;
  }

  .footer_main {
    flex: 0 0 120px;
    background: #ccc;
    display: flex;
    justify-content: center; /* 相对父元素水平居中 */
    align-items: center; /*  子元素相对父元素垂直居中 */
  }
  .search_box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 94%;
    margin: 2vh auto;
    position: absolute;
    left: 3vw;
    z-index: 9;

    .left{
      display: flex;
      align-items: center;
      flex: 1;
      background-color: #ffffff;
      border-radius: 50vh;
      overflow: hidden;
      margin-right: 3vw;
    }
    p{
      flex-shrink: 0;
    }
    button{
      flex-shrink: 0;
      background: linear-gradient( 271deg, #53E4A5 0%, #24DBDB 100%);
      border: none;
      width: 20vw;
    }
  }

  #land-btn-wrap {
    position: relative;
    width: 40%;
    left: 60%;
    bottom: 95%;
    z-index: 2000;
  }

  #mapWrap {
    width: 100%;
    height: 100%;
  }
  .ant-btn-red {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    right: -36%;
  }
</style>
