<template>
  <div class="editmax">
    <el-row>
      <el-col :span="18">
        <div class="bg-purple1">
          <div class="data-map" ref="datamaps"></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bg-purple2">
          <p style="margin-bottom: 1.25rem; font-size: 1.5rem; color: #fff">
            属性编辑
          </p>
          <el-form ref="form" :model="form" label-width="5rem">
            <el-form-item label="上级目录">
              <el-input
                :disabled="true"
                size="small "
                v-model="form.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="图层样式">
              <el-radio-group size="small" v-model="radio">
                <el-radio-button label="默认"></el-radio-button>
                <el-radio-button label="自定义"></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="radio == '默认'" label="图层类型">
              <el-radio-group size="small" v-model="radiolx">
                <el-radio-button
                  v-show="this.tuchengstyle.fill != null"
                  label="点"
                ></el-radio-button>
                <el-radio-button
                  v-show="this.tuchengstyle.line != null"
                  label="线"
                ></el-radio-button>
                <el-radio-button
                  v-show="this.tuchengstyle.symbol != null"
                  label="面"
                ></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="radio == '自定义'" label="图标样式">
              <el-upload
                :action="url + '/style/uploadStyleImage'"
                :headers="headers"
                :on-success="onSuccess"
                :on-error="onErroe"
                :show-file-list="false"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              <div class="tubiao">
                <div
                  class="tubiao_son"
                  v-for="(item, index) in tubiaourl"
                  :key="index"
                >
                  <el-image
                    @click="imgbtn(item)"
                    style="width: 100%; height: 100%"
                    :src="item.networkPath"
                    fit="fill"
                  >
                  </el-image>
                  <p class="imgremove" @click="removebtn(item.id)">删除</p>
                </div>
              </div>
            </el-form-item>
            <el-form-item v-if="radio == '自定义'" label="偏移量">
              <span style="color: #fff"> X </span>
              <el-input
                :disabled="true"
                style="width: 6.25rem"
                size="small "
                v-model="form.X"
              ></el-input>
              <span style="color: #fff"> Y </span>
              <el-input
                :disabled="true"
                style="width: 6.25rem"
                size="small "
                v-model="form.Y"
              ></el-input>
            </el-form-item>
          </el-form>
          <!-- ----------------------面样式------------------------------------------->
          <div class="tcysclass" v-if="radio == '默认'">
            <Main
              v-if="radiolx == '面' && radio == '默认'"
              :arr="tuchengstyle.fill"
              @mianchangeinput="mianchangeinput"
            ></Main>
            <Xian
              v-if="radiolx == '线' && radio == '默认'"
              :arr="tuchengstyle.line"
              @xianchangeinput="xianchangeinput"
            ></Xian>
            <Dian
              v-if="radiolx == '点' && radio == '默认'"
              :arr="tuchengstyle.symbol"
              @dinachangeinput="dianchangeinput"
            ></Dian>
          </div>
          <div style="margin-left: 30%">
            <el-button @click="qixiao">取消</el-button>
            <el-button type="primary" @click="onSubmit">添加</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import mapboxgl from "mapbox-gl";
import {
  getInfo,
  getUrlByServerName,
  getAllStyleImage,
  deleteIds,
  update,
} from "../../../api/applymange";
import Main from "./mian.vue";
import Xian from "./xian.vue";
import Dian from "./dian.vue";
import geoserve from "../../../assets/xianjie.json";
import * as turf from "@turf/turf";
mapboxgl.accessToken =
  "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
import { globalApi } from "../../../api/urlPatterns";
export default {
  props: {
    row: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {
    Main,
    Xian,
    Dian,
  },
  data() {
    return {
      headers: {
        Authorization: localStorage.getItem("X-Token") || "",
      },
      url: globalApi.BASE_URL,
      dialogImageUrl: "",
      map: null,
      radio: "默认",
      radiolx: "点",
      form: {
        name: "",
        touming: "",
        miaobian: "",
        X: "",
        Y: "",
      },
      tuchengstyle: {},
      tcUrl: "",
      tubiaourl: [],
      xy: {},
    };
  },
  created() {
    this.form.name = this.row.projectTeamName;
    // 获取图层geoserve地址
    getUrlByServerName({ serverName: this.row.serverName }).then((res) => {
      console.log("获取geoserver地址", res);
      if (res.data.code == 200) {
        this.tcUrl = res.data.msg;
      }
    });
    //获取图层样式
    getInfo({ serverName: this.row.serverName }).then((res) => {
      console.log("获取图层样式", this.tuchengstyle);
      res.data.data.fill = JSON.parse(res.data.data.fill);
      res.data.data.line = JSON.parse(res.data.data.line);
      res.data.data.symbol = JSON.parse(res.data.data.symbol);
      res.data.data.fill["source-layer"] = res.data.data.serverName;
      res.data.data.line["source-layer"] = res.data.data.serverName;
      res.data.data.symbol["source-layer"] = res.data.data.serverName;
      this.tuchengstyle = res.data.data;
      this.$nextTick(function () {
        this.initMap();
      });
    });
    this.getAllStyleImage();
  },
  mounted() {
    this.$nextTick(function () {
      // this.initMap();
    });
  },
  methods: {
    //点击图标
    imgbtn(item) {
      // console.log(item);
      let _this = this;
      // 判断图片
      _this.map.loadImage(item.networkPath, (error, image) => {
        if (_this.map.hasImage("iconImages")) {
          // console.log(1);
          _this.map.removeImage("iconImages");
          _this.map.addImage("iconImages", image);
        } else {
          _this.map.addImage("iconImages", image);
        }
      });
      _this.map.on("click", (e) => {
        // console.log("11111111", e);
        _this.xy = e.lngLat;
        // 判断是否有数据源
        if (_this.map.getSource("iconImage")) {
          // 更新数据源
          _this.map.getSource("iconImage").setData({
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                geometry: {
                  type: "Point",
                  coordinates: [_this.xy.lng, _this.xy.lat],
                },
              },
            ],
          });
        } else {
          _this.map.addSource("iconImage", {
            type: "geojson",
            data: {
              type: "FeatureCollection",
              features: [
                {
                  type: "Feature",
                  geometry: {
                    type: "Point",
                    coordinates: [_this.xy.lng, _this.xy.lat],
                  },
                },
              ],
            },
          });
          _this.map.addLayer({
            id: "icon1233",
            type: "symbol",
            source: "iconImage", // 对应addSource第一个参数名字
            layout: {
              "icon-image": "iconImages", // 对应addImage()第一个参数名字
              "icon-size": 0.1, //图标的大小
            },
          });
        }

        this.tuchengstyle.imgUrl = item.networkPath;
        this.tuchengstyle.x = this.xy.lng;
        this.tuchengstyle.y = this.xy.lat;
        this.form.X = _this.xy.lng;
        this.form.Y = _this.xy.lat;
        // console.log(_this.map.hasImage("iconImage"));
      });
    },
    // 获取图标地址
    getAllStyleImage() {
      getAllStyleImage().then((res) => {
        console.log("获取图标", res);
        if (res.data.code == 200) {
          this.tubiaourl = res.data.data;
        } else {
          this.$message.error("获取失败");
        }
      });
    },

    //图片上传成功
    onSuccess(response, fileList) {
      // console.log("成功", response);
      if (response.code == 200) {
        this.$message.success("上传成功");
        this.getAllStyleImage();
      }
    },
    //      文件上传失败
    onErroe(err, file, fileList) {
      // console.log("失败", err);
    },
    // 删除图标
    removebtn(id) {
      // console.log(id);
      deleteIds(id).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          this.$message.success("删除成功");
          this.getAllStyleImage();
        }
      });
    },
    // 面样式修改
    mianchangeinput(arr) {
      this.initMap();
    },
    // 线样式修改
    xianchangeinput(arr) {
      this.initMap();
    },
    // 点样式修改
    dianchangeinput(arr) {
      this.initMap();
    },
    // 添加按钮
    onSubmit() {
      this.$emit("EditdialogVisible");
      // console.log("提交", this.tuchengstyle);
      this.tuchengstyle.fill = JSON.stringify(this.tuchengstyle.fill);
      this.tuchengstyle.line = JSON.stringify(this.tuchengstyle.line);
      this.tuchengstyle.symbol = JSON.stringify(this.tuchengstyle.symbol);

      update(this.tuchengstyle).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("修改成功");
        }
      });
    },
    // 取消按钮
    qixiao() {
      this.$emit("EditdialogVisible");
    },

    // 加载地图
    initMap() {
      let _this = this;
      this.map = new mapboxgl.Map({
        container: this.$refs.datamaps,
        style: "mapbox://styles/shichao123/clf3b1bxk007801moo0nnl87k",
        center: [117.922083055, 35.285659054999996],
        zoom: 14,
        language: "zh-cmn",
        projection: "globe",
      });
      this.map.on("load", () => {
        _this.addGeoJsonLayer();
      });
      _this.map.on("click", "icon1233", (e) => {
        // console.log("11111111", e);
        this.imgbtn({ networkPath: this.tuchengstyle.imgUrl });
      });
    },
    addGeoJsonLayer() {
      // this.map.loadImage(this.imgurl, (error, image) => {
      //   this.map.addImage("schoolIcon", image);
      // });
      this.map.addSource("source-name", {
        type: "vector",
        traffic: true,
        scheme: "tms", //new
        // tiles: [
        //   "http://123.132.248.154:9205/geoserver/gwc/service/tms/1.0.0/TEST_WORK_SPACE%3Alindi@EPSG:900913@pbf/{z}/{x}/{y}.pbf",
        // ],
        // tiles: [
        //   `http://192.168.10.144:8180/geoserver/gwc/service/tms/1.0.0/ksp:${this.tuchengstyle.serverName}@EPSG:900913@pbf/{z}/{x}/{y}.pbf`,
        // ],
        tiles: [this.tcUrl],
      });
      if (this.tuchengstyle.fill != null) {
        this.map.addLayer(this.tuchengstyle.fill);
        this.map.addLayer(this.tuchengstyle.line);
        this.map.addLayer(this.tuchengstyle.symbol);
      } else if (this.tuchengstyle.line != null) {
        this.map.addLayer(this.tuchengstyle.line);
        this.map.addLayer(this.tuchengstyle.symbol);
      } else if (this.tuchengstyle.symbol != null) {
        this.map.addLayer(this.tuchengstyle.symbol);
      }
      if (this.tuchengstyle.imgUrl != null) {
        // 判断图片
        this.map.loadImage(this.tuchengstyle.imgUrl, (error, image) => {
          if (this.map.hasImage("iconImages")) {
            this.map.removeImage("iconImages");
            this.map.addImage("iconImages", image);
          } else {
            this.map.addImage("iconImages", image);
          }
        });
        // 判断是否有数据源
        if (this.map.getSource("iconImage")) {
          // 更新数据源
          this.map.getSource("iconImage").setData({
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                geometry: {
                  type: "Point",
                  coordinates: [this.tuchengstyle.x, this.tuchengstyle.y],
                },
              },
            ],
          });
        } else {
          this.map.addSource("iconImage", {
            type: "geojson",
            data: {
              type: "FeatureCollection",
              features: [
                {
                  type: "Feature",
                  geometry: {
                    type: "Point",
                    coordinates: [this.tuchengstyle.x, this.tuchengstyle.y],
                  },
                },
              ],
            },
          });
          this.map.addLayer({
            id: "icon1233",
            type: "symbol",
            source: "iconImage", // 对应addSource第一个参数名字
            layout: {
              "icon-image": "iconImages", // 对应addImage()第一个参数名字
              "icon-size": 0.1, //图标的大小
            },
          });
        }
        this.form.X = this.tuchengstyle.x;
        this.form.Y = this.tuchengstyle.y;
      }

      // this.map.addLayer(this.arr);
      // console.log(this.arr);
      // let geojson = geoserve;
      // let center = turf.center(geojson).geometry.coordinates;
      // console.log(center);
      // this.map.addSource("source-01", {
      //   type: "geojson",
      //   data: geojson,
      // });
      this.map.flyTo({
        center: [117.63867, 35.50573],
        zoom: 10,
        speed: 5,
        // pitch: 60,
      });
    },
  },
};
</script>

<style scoped>
.editmax {
  width: 100%;
  height: 50rem;
}
.bg-purple1 .data-map {
  width: 100%;
  height: 100%;
  /* background: #41075c; */
}
::v-deep.data-map .mapboxgl-ctrl-bottom-left {
  display: none !important;
}
::v-deep.data-map .mapboxgl-ctrl-bottom-right {
  display: none !important;
}
.bg-purple1 .data-map .map {
  width: 100%;
  height: 100%;
}
.bg-purple2 {
  width: 100%;
  height: 100%;
  background: #253d4b;
  padding: 10px 20px;
}
.bg-purple2 .tcysclass {
  width: 100%;
  height: 440px;
  border: 1px solid #10a2e1;
  overflow-y: scroll;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 10px;
}
.bg-purple2 ::v-deep .el-input__inner {
  background-color: transparent;
  border: 1px solid #00b2ff;
  color: #fff;
}
.bg-purple2 ::v-deep .el-form-item__label {
  color: #00b2ff;
  line-height: 30px;
}
.bg-purple2 ::v-deep .el-button--small {
  padding: 0.625rem 2.5rem;
}
.bg-purple2 .tubiao {
  padding: 10px;
  width: 340px;
  height: 300px;
  border: 1px solid #266a94;
  border-radius: 8px;
  overflow-y: scroll;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
.tubiao .tubiao_son {
  width: 100px;
  height: 100px;
  position: relative;
}
.tubiao .tubiao_son:hover .imgremove {
  display: block;
}
.tubiao .tubiao_son .imgremove {
  display: none;
  position: absolute;
  width: 100%;
  height: 30px;
  background: #ff0000;
  text-align: center;
  line-height: 30px;
  bottom: 0;
  left: 0;
  cursor: pointer;
  color: #fff;
}
.tubiao::-webkit-scrollbar {
  display: block !important;
}
.tubiao::-webkit-scrollbar-thumb {
  background-color: #5374ae;
  border-radius: 5px;
}

/* 设置滚动条的宽度、高度、背景色和边框样式 */
.tubiao::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(121, 121, 121, 0.5);
  border-radius: 5px;
}
</style>