<template>
  <header class="header">
    <h1>永久基本农田公布查询系统</h1>
    <div class="total-data open-position">
      全国<span>15.46</span>亿亩
    </div>
    <div class="personal-div">
      <i class="iconfont icon-widget-user" />
      <span>个人中心</span>
    </div>
  </header>
  <main class="main">
    <!-- 地图 -->
    <div
      ref="mapContainer"
      class="map-container"
    />

    <!-- 资源目录最小化 -->
    <div
      v-show="resourceIsFold"
      class="resource-min"
      title="展开资源目录"
      @click="resourceIsFold = false"
    >
      <i class="iconfont icon-widget-layer1" />
    </div>
    <!-- 资源目录 -->
    <div
      v-show="!resourceIsFold"
      class="resource-panel"
    >
      <div class="panel-title">
        <i class="iconfont icon-widget-layer1" />
        <span>资源目录</span>
        <div
          class="fold-btn"
          title="收起"
          @click="resourceIsFold = true"
        >
          <i class="iconfont icon-widget-menufold" />
        </div>
      </div>
      <div class="panel-body">
        <lay-input
          suffix-icon="layui-icon-search"
          size="sm"
        />
        <div class="list-box">
          <div
            v-for="(item) in state.resourceData"
            :key="item.id"
            class="list-item"
          >
            <lay-checkbox
              v-model="item.status"
              skin="primary"
              :label="item.name"
              @change="triggerLayer(item)"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 图例最小化 -->
    <div
      v-show="lengendIsFold"
      class="lengend-min"
      title="展开图例"
      @click="lengendIsFold = false"
    >
      <i class="iconfont icon-widget-mulu" />
    </div>
    <div
      v-show="!lengendIsFold"
      class="lengend-panel"
    >
      <div class="panel-title">
        <i class="iconfont icon-widget-mulu" />
        <span>图例</span>
        <div
          class="fold-btn"
          title="收起"
          @click="lengendIsFold = true"
        >
          <i class="iconfont icon-widget-menufold" />
        </div>
      </div>
      <div class="panel-body">
        <ul class="list-box">
          <li class="list-item">
            <!--  -->
            <div class="lengend-yh" />
            <div class="lengend-title">
              永久基本农田
            </div>
          </li>
          <li class="list-item">
            <div class="lengend-yhselected" />
            <div class="lengend-title">
              选中永久基本农田图斑
            </div>
          </li>
          <li class="list-item">
            <div class="lengend-xzqh" />
            <div class="lengend-title">
              行政区划范围
            </div>
          </li>
          <li class="list-item">
            <div class="lengend-zdy" />
            <div class="lengend-title">
              自定义范围
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 工具栏 -->
    <div class="map-tools">
      <div
        class="tools-arrow-part"
        :title="!toolIsFold ? '收起' : '展开'"
        @click="toolIsFold = !toolIsFold"
      >
        <i
          class="iconfont"
          :class="!toolIsFold ? 'icon-widget-move-right' : 'icon-widget-move-left'"
        />
      </div>
      <div
        v-show="!toolIsFold"
        class="tool-part-box"
      >
        <div class="tool-part">
          <i class="iconfont icon-widget-info-query" />
          <span>查询</span>
        </div>
        <lay-line
          direction="vertical"
          theme="black"
        />
        <div class="tool-part">
          <i class="iconfont icon-widget-location1" />
          <span>点定位</span>
        </div>
        <lay-line
          direction="vertical"
          theme="black"
        />
        <div class="tool-part">
          <i class="iconfont icon-widget-guanxianchaxun-duobianxing" />
          <span>面定位</span>
        </div>
        <lay-line
          direction="vertical"
          theme="black"
        />
        <div
          class="tool-part"
          @click="startDraw"
        >
          <i class="iconfont icon-widget-huizhi" />
          <span>绘制范围</span>
        </div>
        <lay-line
          direction="vertical"
          theme="black"
        />
        <div
          class="tool-part"
          @click="identify"
        >
          <i class="iconfont icon-widget-hand-point" />
          <span>点选</span>
        </div>
        <lay-line
          direction="vertical"
          theme="black"
        />
        <div
          class="tool-part"
          @click="returnHome"
        >
          <i class="iconfont icon-widget-map-full" />
          <span>全幅</span>
        </div>
        <lay-line
          direction="vertical"
          theme="black"
        />
        <div
          class="tool-part"
          @click="startMeasure"
        >
          <i class="iconfont icon-widget-celiang" />
          <span>测距</span>
        </div>
      </div>
    </div>

    <!-- 行政区村庄等输入框下拉框 -->
    <div class="input-box">
      <lay-cascader
        v-model="regionData"
        :options="state.cascaderOptions"
        :only-last-level="true"
        allow-clear
        placeholder="请选择行政区"
        :replace-fields="replaceFields"
        content-class="cascaderClass"
        size="sm"
        content-style="--global-checked-color: #2c5f9e"
      />
      <lay-input
        suffix-icon="layui-icon-search"
        size="sm"
        placeholder="请输入村庄名称、图斑编号"
        :allow-clear="true"
        @input="villageSearch"
      />
    </div>

    <!-- 地图类型 -->
    <div
      class="map-type"
      @mouseenter="mapTypeIsExpand = true"
      @mouseleave="mapTypeIsExpand = false"
    >
      <ul class="list-box">
        <li
          v-for="(item, index) in state.mapTypeData"
          :key="index"
          class="list-item"
          :class="selectIndex === index ? 'active' : ''"
          :style="mapTypeIsExpand ? `right:${(state.mapTypeData.length - index - 1) * 96}px` : `right:${(state.mapTypeData.length - index - 1) * 10}px`"
          @click="toSelectDt(index)"
        >
          <img
            :src="item.imgUrl"
            alt=""
          >
          <div class="top-check">
            <lay-checkbox
              v-model="item.isCheck"
              name="sc"
              skin="primary"
              value=""
              :label="item.label"
            />
          </div>
          <p class="detail-info">
            {{ item.title }}
          </p>
        </li>
      </ul>
    </div>
  </main>
</template>
<script setup>
import { LayerUtils, MapUtils, ViewUtils, MeasureUtils, DrawUtils, GeojsonUtils } from 'gt-maputils'
import { getList } from '@/api/module/main'

/**
 * @type {Ref<HTMLDivElement>}
 */
const mapContainer = ref()
/**
 * @type {import('leaflet').Map}
 */
let $map
// 工具栏是否展开
const toolIsFold = ref(false)
// 资源目录是否展开
const resourceIsFold = ref(false)
// 图例是否展开
const lengendIsFold = ref(false)
// 影像图
const openCollect = ref(false)

const openLw = ref(false)
// 选择行政区
const regionData = ref()
// 替换主要字段
const replaceFields = {
  label: 'name',
  value: 'code',
  children: 'areaList'
}

/**
 * 资源目录 interface 类型
 *
 * @typedef {Object} resourceItemType
 * @property {string} id - id
 * @property {string} name - 名称
 * @property {boolean} status - 状态
 */

/**
 * 级联菜单 interface 子类型
 *
 * @typedef {Object} cascaders
 *
 * @property {string} name - 名称
 * @property {string} code - code
 */

/**
 * 级联菜单 interface 类型
 *
 * @typedef {Object} cascadersItemType
 *
 * @property {string} name - 名称
 * @property {string} code - code
 * @property {cascaders[]} areaList - 子级
 */

/**
 * @type {{
 *   resourceData: resourceItemType[],
 *   cascaderOptions: cascadersItemType[]
 * }}
 */
const state = reactive({
  resourceData: [],
  cascaderOptions: [],
  mapTypeData: []
})

// 村庄搜索
const villageSearch = function (val) {
  console.log('当前值:' + val)
}
// 地图类型
const mapTypeIsExpand = ref(false)
// 地图默认选中第二个
const selectIndex = ref(1)
const toSelectDt = function (index) {
  selectIndex.value = index
}

onMounted(() => {
  initMap()
  getData()
})

function getData () {
// 获取资源目录列表
  getList('resourceData').then((res) => {
    state.resourceData = res.data
    initLayer()
  })
  // 获取省市区
  getList('china').then((res) => {
    state.cascaderOptions = res.data
  })
  getList('baseLayer').then(res => {
    state.mapTypeData = res.data
  })
}

function initMap () {
  $map = MapUtils.createBaseMap(mapContainer.value, {
    crs: {
      wkid: 4490
    }
  })
  ViewUtils.setHome($map, {
    bounds: [
      [115.56057557471091, 29.882667954127648],
      [122.7346505072892, 35.900324837872425]
    ],
    minZoom: 8
  })
}

function returnHome () {
  ViewUtils.returnHome($map)
}

function initLayer () {
  for (let i = state.resourceData.length - 1; i >= 0; i--) {
    if (state.resourceData[i].status) {
      triggerLayer(state.resourceData[i], false)
    }
  }
}

function triggerLayer (val, fly = true) {
  if (val.status) {
    const { status, _layer, name, ...options } = val
    val._layer = markRaw(LayerUtils.addLayer($map, options))
    if (fly) {
      ViewUtils.setViewByLayer($map, val._layer)
    }
  } else {
    if (val._layer) {
      LayerUtils.removeLayer($map, val._layer)
      delete val._layer
    }
  }
}

function startDraw () {
  DrawUtils.clearDraw($map)
  DrawUtils.startDraw($map, 'Polygon', {
    callback: function (result) {
      console.log(result.geoJSON)
    }
  })
}

let identifyResults = []
function identify () {
  if (identifyResults.length) {
    for (const layer of identifyResults) {
      $map.removeLayer(layer)
    }
    identifyResults = []
    return
  }
  DrawUtils.startDraw($map, 'CircleMarker', {
    callback: function (result) {
      DrawUtils.stopDraw($map)
      $map.removeLayer(result.layer)
      const queryLayers = _getIdentifyLayers()
      if (!queryLayers.length) {
        layer.msg('无可查询图层')
        return
      }
      const promises = []
      for (const layer of queryLayers) {
        const { query, ...other } = layer
        for (const queryInfo of query) {
          const identifyInfo = {
            ...other,
            ...queryInfo
          }
          identifyInfo.geometry = result.geoJSON
          promises.push(LayerUtils.getIdentifyFeatures(layer.url, identifyInfo))
        }
      }
      Promise.all(promises).then((allResult) => {
        layer.msg('识别完成')
        for (const result of allResult) {
          identifyResults.push(GeojsonUtils.addGeojsonLayer($map, result))
        }
        console.log('属性识别结果', allResult)
      })
    }
  })
}

function _getIdentifyLayers () {
  const layers = LayerUtils.getLayerList($map)
  const queryLayers = []
  for (const layer of layers) {
    const tmp = state.resourceData.find(resource => {
      return resource._layer === layer
    })
    if (tmp && tmp.query) {
      queryLayers.push(tmp)
    }
  }
  return queryLayers
}

function startMeasure () {
  MeasureUtils.startMeasure($map, 'length')
}
</script>
<style scoped lang="scss">
.header {
  height: 64px;
  background: url("@/assets/img/homeTitleExBgImg.png") no-repeat;

  h1 {
    font-size: 28px;
    color: #fff;
    line-height: 40px;
    margin: 12px 0 12px 30px;
    float: left;
  }

  .personal-div {
    float: right;
    margin-right: 30px;
    line-height: 30px;
    margin-top: 17px;
    color: #fff;

    span {
      margin-left: 5px;
      font-size: 16px;
      position: relative;
      top: -1px;
    }

    i {
      font-size: 18px;
    }
  }

}

.main {
  height: calc(100% - 64px);
  background: #fff;
  position: relative;

  .map-container {
    height: 100%;
    width: 100%;
    z-index: 0;
  }
}

.total-data {
  position: relative;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 2px 2px #222;
  border-left: 1px solid #dedede;
  display: inline-block;
  margin: 18px 0 10px 20px;
  padding-left: 15px;
  line-height: 25px;

  span {
    // color: rgba(242, 119, 11);
    color: #fff;
    font-size: 20px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    margin: 0 5px;
  }
}

.resource-panel {
  width: 300px;
  height: calc(100% - 203px);
  position: absolute;
  left: 10px;
  top: 10px;
  background: rgba($color: #ffffff, $alpha: 0.7);
  box-shadow: -2px 4px 10px #ccc;

  .panel-title {
    height: 30px;
    line-height: 30px;
    background: #2c5f9e;
    padding-left: 10px;
    color: #fff;

    span {
      font-size: 16px;
      margin-left: 5px;
    }

    .fold-btn {
      width: 36px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      float: right;

      &:hover i {
        cursor: pointer;
        font-weight: bold;
      }
    }
  }

  .panel-body {
    height: calc(100% - 30px);
    padding: 8px;
    box-sizing: border-box;

    .list-box {
      margin-top: 8px;
      height: calc(100% - 38px);
      overflow: auto;
    }

    .list-item {
      line-height: 30px;

      :deep(.layui-form-checkbox[lay-skin="primary"]:hover) i {
        border-color: #2c5f9e;
        color: #fff;
      }

      :deep(.layui-form-checked[lay-skin="primary"]) {
        & {
          i {
            border-color: #2c5f9e;
            background-color: #2c5f9e;
          }

          span {
            color: #2c5f9e;
          }
        }

      }
    }
  }
}

.resource-min {
  width: 36px;
  height: 36px;
  line-height: 36px;
  position: absolute;
  background: #2c5f9e;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 0;
  color: #fff;
  top: 10px;
  left: 10px;
  box-shadow: -2px 4px 10px #ccc;
  cursor: pointer;

  i {
    font-size: 20px;
  }
}

.lengend-panel {
  width: 300px;
  height: 174px;
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba($color: #ffffff, $alpha: 0.7);
  box-shadow: -2px 4px 10px #ccc;

  .panel-title {
    height: 30px;
    line-height: 30px;
    background: #2c5f9e;
    padding-left: 10px;
    color: #fff;

    span {
      font-size: 16px;
      margin-left: 5px;
    }

    .fold-btn {
      width: 36px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      float: right;

      &:hover i {
        cursor: pointer;
        font-weight: bold;
      }
    }
  }

  .panel-body {
    height: calc(100% - 30px);
    padding: 8px;
    box-sizing: border-box;

    .list-box {
      padding: 5px;
    }

    .list-item {
      line-height: 30px;
      color: #333;

      &>div:first-child {
        width: 34px;
        height: 20px;
        box-sizing: border-box;
        border-radius: 3px;
        float: left;
        margin-top: 5px;
        margin-right: 10px;
      }

      .lengend-yh {
        background: rgba(248, 217, 104, 1);
      }

      .lengend-yhselected {
        background: rgba(248, 217, 104, 1);
        border: 1px solid rgba(228, 68, 58, 1);
      }

      .lengend-xzqh {
        border: 1px dashed rgba(41, 121, 214, 1);
      }

      .lengend-zdy {
        border: 1px dashed rgba(209, 44, 165, 1);
      }

      .lengend-title {
        display: inline-block;
      }
    }
  }
}

.lengend-min {
  width: 36px;
  height: 36px;
  line-height: 36px;
  position: absolute;
  background: #2c5f9e;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 0;
  color: #fff;
  bottom: 10px;
  left: 10px;
  box-shadow: -2px 4px 10px #ccc;
  cursor: pointer;

  i {
    font-size: 20px;
  }
}

.map-tools {
  height: 36px;
  line-height: 36px;
  position: absolute;
  right: 10px;
  top: 10px;
  background: #fff;
  box-shadow: -2px 4px 10px #ccc;

  .tools-arrow-part {
    width: 20px;
    color: #fff;
    cursor: pointer;
    text-align: center;
    line-height: 36px;
    background: #2c5f9e;
    display: inline-block;

    i {
      font-size: 16px;
    }
  }

  .layui-line-vertical {
    margin: 0 !important;
    position: relative;
    top: -1px;
  }

  .tool-part-box {
    display: inline-block;

    .tool-part {
      display: inline-block;
      // background: #f00;
      height: 100%;
      padding: 0 15px;
      color: #2c5f9e;
      cursor: pointer;

      span {
        margin-left: 5px;
      }

      i {
        position: relative;
        top: 1px;
      }
    }
  }

}

.input-box {
  position: absolute;
  top: 10px;
  left: calc(10% + 300px);
  display: flex;
}

.map-type {
  // width: 196px;
  height: 60px;
  position: absolute;
  right: 10px;
  bottom: 10px;

  .list-item {
    width: 86px;
    height: 60px;
    display: inline-block;
    margin-left: 5px;
    position: absolute;
    // border: 1px solid #666;
    transition: all 0.3s ease;
    box-shadow: 0 0 2px 0px #ccc;
    box-sizing: border-box;

    img {
      width: 100%;
      height: 100%;
    }

    &.active {
      border: 1px solid #177de4;
    }

    .detail-info {
      position: absolute;
      right: 0;
      bottom: 0;
      color: #fff;
      font-size: 12px;
      padding: 2px 5px;

    }

    &:hover {
      .detail-info {
        background: #2c5f9e;

      }

      .top-check {
        background: rgba($color: #000000, $alpha: 0.4);
      }
    }

    .top-check {
      line-height: 20px;
      position: absolute;
      left: 0;
      top: 0;
      font-size: 12px;
      width: 100%;
      padding-left: 5px;
      box-sizing: border-box;

      :deep(.layui-checkbox) .layui-form-checkbox {
        padding-left: 18px;
        height: 16px;
        line-height: 16px;
        width: 16px;

        .layui-checkbox-label {
          font-size: 12px;
          color: #fff;
        }
      }

      :deep(.layui-form-checkbox)[lay-skin="primary"] {

        i {
          height: 16px;
          line-height: 16px;
          width: 16px;
        }

        i {
          border-color: #2c5f9e;
          color: #fff;
        }

      }

      :deep(.layui-form-checked)[lay-skin="primary"] {
        i {
          border-color: #2c5f9e;
          background-color: #2c5f9e;
        }

        span {
          color: #fff;
        }
      }
    }
  }

}

.cascaderClass {
  color: #fff;

  .layui-cascader-menu {
    layui-cascader-menu-item:hover {
      background: #2c5f9e;
    }
  }

  .layui-cascader-selected {
    background: #2c5f9e;
  }

}
</style>
