<template>
  <div class="app-container">

    <van-nav-bar left-arrow fixed placeholder @click-left="goBack" >
      <template #title>
        <div class="tb_main">
          地图
        </div>
      </template>
    </van-nav-bar>

    <div style="position:relative;">
      <div class="mapBox" id="contractedLandMapBox"></div>
      <div class="legend_main">
        <div class="legend">
          <p class="legend_tt">图例
            <img src="../../../../../static/images/contracted/map_icon_01.png" alt="">
          </p>
          <div><i></i><p>地块</p></div>
          <div><i></i><p>承包地块</p></div>
        </div>
      </div>
    </div>

    <div class="contractedLandPopup">
      <van-dialog v-model="open" title="承包地信息" :show-confirm-button="false" :show-cancel-button="true" cancel-button-text="关闭">
        <van-form ref="landForm">
          <van-field v-model="form.dkbm" label="地块代码：" :border="true" input-align="right" />
          <van-field v-model="form.dkmc" label="地块名称：" :border="true" input-align="right" />
          <van-field v-model="form.syqxz" label="所有权性质：" :border="true" input-align="right" />
          <van-field v-model="form.dklb" label="地块类别：" :border="true" input-align="right" />
          <van-field v-model="form.tdlylx" label="土地利用类型：" :border="true" input-align="right" />
          <van-field v-model="form.dldj" label="地力等级：" :border="true" input-align="right" />
          <van-field v-model="form.tdyt" label="土地用途：" :border="true" input-align="right" />
          <van-field v-model="form.sfjbnt" label="基本农田：" :border="true" input-align="right" />
          <van-field v-model="form.scmjm" label="实测面积(亩)：" :border="true" input-align="right" />
          <van-field v-model="form.zjrxm" label="指界人姓名：" :border="true" input-align="right" />
          <van-field v-model="form.dkdz" label="地块东至：" :border="true" input-align="right" />
          <van-field v-model="form.dkxz" label="地块西至：" :border="true" input-align="right" />
          <van-field v-model="form.dknz" label="地块南至：" :border="true" input-align="right" />
          <van-field v-model="form.dkbz" label="地块北至：" :border="true" input-align="right" />
          <van-field v-model="form.dkbzxx" label="地块备注信息：" :border="true" input-align="right" />
        </van-form>
      </van-dialog>
    </div>

  </div>
</template>
<script>
  import Cookies from "js-cookie";
  import { getConfigKey } from "@/api/system/config";
  import { listCbdkxx } from "@/api/contracted/cbdkxx";
  import { getDept } from "@/api/contracted";

  export default {
    name: "contractedVillageContractor",
    data() {
      return {
        form: {},                       // 承包地信息表单
        open: false,                    // 是否显示承包地信息弹出层

        map: "",                        // 地图
        mapGeoServerUrl: "",            // geoserver地址
        mapCenterLocation: [],          // 地图中心坐标
        landLayerName: "",              // 地块图层名称
      };
    },
    created() {
      // 获取geoserver的地址
      this.getGeoServerUrl();
      // 获取地块图层名称
      this.getLandLayerName();
    },
    mounted() {
      // 获取承包地块列表
      this.getContractedLandList();
    },
    methods: {
      // 获取geoserver的地址
      getGeoServerUrl() {
        getConfigKey("system.geoServer.url").then(response => {
          this.mapGeoServerUrl = response.msg;
        });
      },
      // 获取地块图层名称
      getLandLayerName() {
        getConfigKey("geoserver.layer.dk").then(response => {
          this.landLayerName = response.msg;
        });
      },
      goBack() {
        this.$router.push({
          name: 'contractedVillageContractorLand',
          params: {
            deptId: this.$route.params.deptId,
            cbfbm: this.$route.params.cbfbm,
            cbfmc: this.$route.params.cbfmc,
            surveyStatus: this.$route.params.surveyStatus
          }
        });
      },
      getContractedLandList() {
        listCbdkxx({cbfbm: this.$route.params.cbfbm, translate_dict: 1}).then(response => {
          const landList = response.rows;
          this.map = "";
          setTimeout(() => {
            this.drawMap(landList);
          }, 500);
        });
      },
      drawMap(landList) {
        getDept(this.$route.params.deptId).then(response => {
          let dept = response.data;
          if (dept.lng && dept.lat) {
            this.mapCenterLocation = [dept.lng, dept.lat];
          } else {
            this.mapCenterLocation = [116.391458, 39.902377];
          }

          document.getElementById("contractedLandMapBox").innerHTML = "";
          // 定义地图投影
          let projection = new ol.proj.Projection({
            code: "EPSG:3857",
            units: "degrees",
          });
          // 定义地图图层
          let aerial = new ol.layer.Tile({
            source: new ol.source.XYZ({
              url: "http://t{0-7}.tianditu.com/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: "卫星影像图",
          });
          let yingxzi = new ol.layer.Tile({
            source: new ol.source.XYZ({
              url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
            }),
            isGroup: true,
            name: "天地图文字标注--卫星影像图",
          });
          //加载地图
          this.map = new ol.Map({
            controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]),
            layers: [aerial, yingxzi],
            projection: projection,
            target: "contractedLandMapBox",
            view: new ol.View({
              center: ol.proj.fromLonLat(this.mapCenterLocation), // 地图中心坐标
              zoom: 17,
              minZoom: 1, //地图缩小限制
              maxZoom: 18, //地图放大限制
              // extent: [13481224.75161,5667110.83528,13811063.06278,5880284.11416]
            }),
          });
          // 添加全部的地块图层
          this.addLandLayer();
          // 添加承包地块图层
          this.addContractedLandLayer(landList);

          // 地图点击事件
          this.map.on("click", (evt) => {
            let feature = this.map.forEachFeatureAtPixel(
              evt.pixel,
              (feature) => feature
            );
            if (feature) {
              // 镇级：加载村级坐标点
              if (feature.get('level') === 'contractedLand') {
                this.form = feature.get('landInfo');
                this.open = true;
              }
            }
          });
        });
      },
      // 添加全部的地块图层
      addLandLayer() {
        const landLayer = new ol.layer.Image({
          source: new ol.source.ImageWMS({
            url: this.mapGeoServerUrl + '/wms',
            params: {
              LAYERS: this.landLayerName,
              cql_filter: "dept_id = '" + this.$route.params.deptId + "'",
              SRID: 3857,
            }
          }),
          name: 'landLayer'
        });
        this.map.getLayers().insertAt(3, landLayer);
        // this.map.addLayer(landLayer);
      },
      // 添加承包地块图层
      addContractedLandLayer(landList) {
        if (landList.length === 0) {
          return ;
        }
        let features = [];
        landList.forEach(item => {
          if (item.theGeomJson) {
            const iconFeature = new ol.Feature({
              geometry: new ol.geom.MultiPolygon(JSON.parse(item.theGeomJson).coordinates),
              level: 'contractedLand',
              landInfo: item
            });
            features.push(iconFeature);
          }
        });
        const contractedLandLayer = new ol.layer.Vector({
          source: new ol.source.Vector({
            features: features
          }),
          name: 'contractedLandLayer',
          style: new ol.style.Style({
            fill: new ol.style.Fill({
              color: "rgba(255, 84, 87, 0.5)"
            }),
            stroke: new ol.style.Stroke({
              color: "#ff5457",
              width: 3
            })
          })
        });
        this.map.getLayers().insertAt(4, contractedLandLayer);
        this.map.getView().fit(contractedLandLayer.getSource().getExtent());
        // this.map.getView().setZoom(15);
      }
    },
  };
</script>
<style scoped lang="scss">

  .app-container{
    background: #fff url("../../../../../static/images/contracted/contracted_index_bg.png") no-repeat center;
    background-size: 100% 100%;
    height: 100vh;
    padding: 0 4vw;
    overflow: hidden;
  }

  /deep/ .van-nav-bar{
    background: transparent;
  }

  /deep/ .van-nav-bar .van-icon{
    color: #000000;
  }

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

  /deep/ .van-search__content{
    background: rgba(255,255,255,.5);
  }
  /deep/ .van-search{
    padding: 0;
    flex: 1;
  }

  /deep/ .van-ellipsis{
    overflow: initial;
  }

  /deep/ .contractedLandPopup .van-dialog {
    height: 85%;
    overflow-y: auto;
  }

  /deep/ .contractedLandPopup .van-field__label {
    width: 7em;
  }

  .tb_main{
    position: relative;
    p{
      position: absolute;
      display: inline-block;
      margin-left: 10PX;
    }
  }

  .tb{
    font-size: 12px;
    color: #ff8900;
    background: #daf6e7;
    border: 1px solid #d7be6e;
    padding: 2PX 8PX;
    border-radius: 50PX;
    margin-right: 5PX;
  }

  .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;
    }
  }

  .mapBox{
    width: 100vw;
    height: 88vh;
    background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
    margin: 2vh auto;
    transform: translateX(-4vw);
  }

  .legend_main{
    position: absolute;
    top: 5vh;
    right: 0;
  }

  .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;
    div{
      display: flex;
      align-items: center;
      margin-top: 2vh;
      i{
        display: block;
        width: 15PX;
        height: 15PX;
        border: 1px solid;
        border-radius: 3PX;
        margin-right: 10PX;
      }
      &:nth-child(2) i{
        background: rgba(22,233,15,.7);
        border-color: rgba(22,233,15,1);
      }
      &:nth-child(3) i{
        background: rgba(255,84,87,.7);
        border-color: rgba(255,84,87,1);
      }
    }
  }

</style>
