<template>
  <div class="serve-resource">
    <div class="list">
      <div class="header">
        <a-select
          v-model:value="data"
          style="width: 142px;margin-right: 20px">
          <a-select-option value="vector-data">矢量数据</a-select-option>
        </a-select>
        <a-input-search
          style="width: 362px;margin-right: 20px"
          v-model:value="key"
          placeholder="请输入服务关键词"
          enter-button
        />
        <a-select
          v-model:value="sort"
          style="width: 142px">
          <a-select-option value="default">默认排序</a-select-option>
        </a-select>
      </div>
      <div class="content">
        <div class="show-item" v-for="item in dataList" :key="item.id"  @click="showInfo(item)">
          <div class="info">
            <a-image
              :width="119"
              :height="87"
              style="border-radius:4px"
              src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp"
              :preview="false"
              :fallback="errorImage"
            />
            <div class="show-text">
              <div class="title">名称： {{ item.name }}</div>
              <div class="sub-title">描述： {{ item.description }}</div>
            </div>
          </div>
          <div class="button">
            <!-- <a-button type="primary" style="background-color:#09B66D;margin-right: 10px">
              编辑 
<<<<<<< HEAD
            </a-button>
            <a-button type="primary" @click="handlerAddToLayerList">
=======
            </a-button> -->
            <a-button type="primary">
              <template #icon>
                <PlusOutlined />
              </template>
            </a-button>
          </div>
        </div>
      </div>
      <div class="footer">
        <a-pagination
          v-model:current="current"
          v-model:page-size="pageSize"
          :total="85"
          :show-total="total => `共 ${total} 条`"/>
      </div>
    </div>
    <div class="information">
      <div style="margin-bottom: 16px">
        <div style="width: 100%;height:266px;">
          <MapboxMap
            :mapOptions="mapOptions"
            :control="mapDrawControl"
            @map-on-load="mapOnLoad"
            @map-draw="handlerMapDraw"
          />
        </div>
      </div>
      <div class="show-info">
        <div class="title">
          <div class="first"></div>
          <div class="last"></div>
          </div>
        <div style="position:absolute;height:32px;top:24px;display:flex;align-items:center;margin-left:14px">服务基本信息</div>
        <div class="serve-text">
          <a-textarea v-model:value="jsonData" style="height: 270px;"/>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script setup lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue'
import { errorImage } from '../../util.js'
import { ref,defineEmits } from "vue"
import MapboxMap from '@/components/MapboxMaps/index.vue'
import { DrawingType } from '@/enums/mapEnum';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage();

const emits = defineEmits(["handlerAddToLayerList"])
const data = ref('vector-data')
const sort = ref('default')
const key = ref('')
const current = ref()
const pageSize = ref()
const jsonData = ref('')
const dataList = ref([
  {
    id:1,
    name:'test',
    description:'test111asdf asdf asdf asdf s',
    table:'test',
  },
  {
    id:2,
    name:'TEST',
    description:'啊士大夫啊手动阀撒地方',
    table:'a_test',
  }
])
const mapOptions = {
  center: [116.404, 39.905],
  zoom: 8,
};
const mapDrawControl: DrawingType[] = [DrawingType.Polygon, DrawingType.Line];
const useMap = ref()
const mapOnLoad = (map) => {
  useMap.value = map
  // map 对象
  console.log('map::: ', map);
  // mapU封装对象
  console.log('map.U::: ', map.U);
  // 测试地址
  const testSource =
    'http://123.132.248.154:9205/geoserver/gwc/service/tms/1.0.0/TEST_WORK_SPACE%3Alindi@EPSG:900913@pbf/{z}/{x}/{y}.pbf';
  // 添加矢量瓦片图层
  map.U.addVector('sourceId', testSource).addLineLayer('layerId', {
    source: 'sourceId',
    'source-layer': 'lindi', // source-layer对应数据库的表名
  });
};
//地图绘制的回调
const handlerMapDraw = (type: string, data: any) => {
  console.log('data::: ', data);
  console.log('type::: ', type);
};

const showInfo = (item) => {
  // useMap.value.removeLayer('street-border')
  // useMap.value.removeSource('wmsSource')
  if (useMap.value.getLayer('street-border')) useMap.value.removeLayer('street-border')
  if(useMap.value.getSource('wmsSource')) useMap.value.removeSource('wmsSource')
  useMap.value.addSource("wmsSource",{
    type: "raster",
    tiles: [
      "http://123.132.248.154:9235" +
        "/geoserver/ksp/wms?service=WMS&version=1.1.0&request=GetMap&layers=ksp:" +
        item.table +
        "&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
    ],
  })
  useMap.value.addLayer({
    id: "street-border",
    type: "raster",
    source: "wmsSource",
    layout: {
      visibility: "visible",
    },
  });
  console.log(item,useMap.value,'11111')
  useMap.value.flyTo({
    center:[117.9838535, 35.4819155],
    zoom: 12,
  })
  console.log(111111)
  let data = {
    sources:{
      vectorSource: {
        type: "vector", 
        url: "mapbox://mapbox.mapbox-streets-v6", 
        tiles: [
            "http://a.example.com/tiles/{z}/{x}/{y}.pbf",
            "http://b.example.com/tiles/{z}/{x}/{y}.pbf"
        ],
        bounds: [-180,-85.051129,180,85.051129], 
        scheme:"xyz", 
        minzoom: 0,
        maxzoom: 22,
        attribution: "",
      }
    }
  }

  jsonData.value = JSON.stringify(data, null, 4);
  console.log(jsonData.value)
}

// 添加到图层
const handlerAddToLayerList = (item) => {
  let layerInfo = {
                id:parseInt(10*Math.random()),
                name:parseInt(10000000*Math.random()).toString(),
                checked:false,
                layer:{
                    'id': 'roadnetLine'+parseInt(10000000*Math.random()).toString(),
                    'type': 'line',
                    'source': {
                        type: 'vector',
                        tiles: [ 'http://192.168.10.102:9020/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=yishuixian&X-Token=1ded3fe7'],
                        minzoom: 1,
                        maxzoom: 20
                    },
                    "source-layer": "yishuixian",
                    'layout': {
                        'line-join': 'round',
                        'line-cap': 'round'
                    },
                    'paint': {
                        'line-color': [
                        "case",
                        ["==", ["get", "handle_status_id"], 0],
                        "#E6A23C",
                        ["==", ["get", "handle_status_id"], 1],
                        "#409EFF",
                        ["==", ["get", "handle_status_id"], 2],
                        "#67C23A",
                        // 默认
                        "#67C23A",
                        ],
                        'line-width': 1
                    }
                }
            }
  createMessage.success("图层已添加到工作区！")
  emits("handlerAddToLayerList",layerInfo);

}
</script>

<style lang="scss" scoped>
.serve-resource{
  display: flex;
  justify-content: space-between;
  padding: 28px 46px;
  background-color: #E0E5ED;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  .list{
    width: calc(50% - 19px)
  }
  .header{
    display: flex;
    margin-bottom: 14px;
  }
  .content{
    max-height: 565px;
    overflow: auto;
    margin-bottom: 8px;
    height: 565px;
    .show-item{
      background-color: #fff;
      height: 119px;
      border-radius: 4px;
      padding: 16px 30px 16px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 3px;
      .info{
        display: flex;
        .show-text{
          margin-left: 15px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .title{
            color: #191919;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 3px;
          }
          .sub-title{
            color: #191919;
            font-size: 12px;
          }
        }
      }
    }
  }
  .footer{
    display: flex;
    justify-content: flex-end;
  }
  .information{
    width: calc(50% - 19px);
    .show-info{
      background-color:#fff;
      height: 369px;
      border-radius: 10px;
      padding: 24px 29px;
      position:relative;
      .title{
        display: flex;
        height:32px;
        margin-bottom: 16px;
        .first{
          width: 3px;
          height: 100%;
          background-color: #0081FF;
        }
        .last{
          background: linear-gradient(270deg, rgba(0, 183, 255, 0) 0%, #0081FF 100%);
          opacity: 0.14;
          flex: 1;
        }
      }
      .serve-text{
        display: flex;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #303030;
        .serve-info{
          width: 60%;
          padding-left: 12px;
          .info-title{
            display: inline-block;
            opacity: 0.41;
            width: 60px;
            min-width: 60px;
          }
          .info-content{
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          & > div{
            margin-bottom: 7px;
            display: flex;
          }
        }
        .serve-image{
          width: 40%;
        }
      }
    }
  }
}
</style>
