<template>
  <div class="container">
    <div class="grid-list-container">
      <div class="search-container">
        <!-- 人员名称 -->
        <el-input
          clearable
          size="mini"
          prefix-icon="el-icon-search"
          style="width: 200px; margin-bottom: 0; margin: 0px 12px"
          class="filter-item"
          :placeholder="'人员姓名'"
        >
        </el-input>

        <el-button type="default" size="mini">重置</el-button>
        <el-button type="primary" size="mini">搜索</el-button>
      </div>
      <div class="list-header">
        <div class="list-item-box" style="width: 15%">名称</div>
        <div class="list-item-box" style="width: 15%">类型</div>
        <div class="list-item-box" style="width: 15%">督查长</div>
        <div class="list-item-box" style="width: 45%">副督查长</div>
        <div class="list-item-box" style="width: 10%">操作</div>
      </div>
      <div class="list-box">
        <div
          class="list-item"
          v-for="(item, index) in listData"
          :key="index * tableRandom"
        >
          <div class="list-item-box" style="width: 15%">
            {{ item.xzqmc ? item.xzqmc : "暂无数据" }}
          </div>
          <div class="list-item-box" style="width: 15%">
            {{ item.type ? item.type : " 暂无数据" }}
          </div>
          <div class="list-item-box" style="width: 15%">
            {{ item.dcz ? item.dcz : " 暂无数据" }}
          </div>
          <div class="list-item-box" style="width: 45%">
            {{ item.fdcz ? item.fdcz : "暂无数据 " }}
          </div>
          <div class="list-item-box" style="width: 10%">
            <div
              class="operate-button operate-edit"
              @click="getUserlist(item.gid)"
            >
              <i class="el-icon el-icon-edit"></i>
            </div>
            <div class="operate-button operate-delete">
              <i class="el-icon el-icon-delete"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="page-container">
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </div>

    <div class="map-container" id="mapContainer"></div>
    <div class="grider-list-container" v-if="userListContainer">
      <div class="grid-info-contianer">
        <p>名称：东蒙镇</p>
        <p>名称：类型</p>
        <p>督察长：徐景良</p>
      </div>
      <div class="grid-list-box">
        <div
          class="grider-list-item"
          v-for="(item, index) in userList"
          :key="index"
        >
          <el-form
            :model="item"
            size="mini"
            label-width="90px"
            class="demo-ruleForm"
          >
            <el-form-item label="人员姓名：" prop="areaName">
              <el-input v-model="item.name"></el-input>
            </el-form-item>
            <el-form-item label="所属单位：" prop="households">
              <el-input v-model="item.workunit"></el-input>
            </el-form-item>
            <el-form-item label="防火职务：" prop="households">
              <el-input v-model="item.fireduties"></el-input>
            </el-form-item>
            <el-form-item label="督察职务：" prop="households">
              <el-input v-model="item.supervision"></el-input>
            </el-form-item>
          </el-form>
          <div style="height: 40px">
            <div class="operate-button operate-edit">
              <i
                class="el-icon el-icon-folder-checked"
                @click="saveUser(item)"
              ></i>
            </div>
            <div
              class="operate-button operate-delete"
              @click="deleteUser(item.id)"
            >
              <i class="el-icon el-icon-delete"></i>
            </div>
          </div>
        </div>
        <div style="text-align: center">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-plus"
            round
            @click="addUser"
            >添加</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { waiData } from "../../../assets/xianjiewai";
import { getMethodCommon, postMethodCommon } from "../../../api/common";
export default {
  name: "index",
  data() {
    return {
      listData: [],
      ruleForm: {},
      userListContainer: false,
      userList: [],
      mapboxMap: null,
      tableRandom: 1,
      currentStreetId: null,
      listQuery: {
        pageindex: 1,
        pagesize: 20,
      },
    };
  },
  mounted() {
    this.getList();
    this.initMap();
  },
  methods: {
    initMap() {
      //mapbox 2.0以后的版本需要accessToken  到官网注册下载
      this.$mapboxgl.accessToken =
        "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
      this.mapboxMap = new this.$mapboxgl.Map({
        container: "mapContainer",
        style: "mapbox://styles/shichao123/clf3b1bxk007801moo0nnl87k",
        center: [117.999325, 35.265961],
        zoom: 10,
        language: "zh-cmn",
        projection: "globe",
      });

      // 地图加载完毕事件
      let _this = this;

      _this.mapboxMap.addControl(
        new this.$mapboxgl.NavigationControl(),
        "top-right"
      );

      this.mapboxMap.on("load", function () {
        _this.loadGaoQingLayer();
        _this.loadMengban();
        _this.loadZhenJieLayer();
        _this.loadXianJieLayer();
      });
    },
    getList() {
      getMethodCommon("/FireGrid/GetTowInfo", this.listQuery).then((res) => {
        if (res.code == 200) {
          this.listData = res.data;
          this.tableRandom = Math.random();
        }
      });
    },
    getUserlist(id) {
      this.currentStreetId = id;
      getMethodCommon("/FireGrid/GetInspectorByTown", { id: id }).then(
        (res) => {
          if (res.code == 200) {
            this.userList = res.result;
            this.userListContainer = true;
          }
        }
      );
    },
    deleteUser(id) {
      postMethodCommon("/FireGrid/DeleteInspectors", { id: id }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功！",
          });
          this.getUserlist(this.currentStreetId);
        }
      });
    },
    saveUser(item) {
      console.log("item", item);
      item.id = 0;
      item.townid = [this.currentStreetId];
      postMethodCommon("/FireGrid/AddInspector", item).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "添加成功！",
          });
        }
      });
    },
    addUser() {
      this.userList.push({});
    },
    loadMengban() {
      this.mapboxMap.addLayer({
        //蒙版图层   //通过边界数据反选 达到挖洞效果
        id: "mb-tag",
        type: "fill",
        source: {
          type: "geojson",
          data: {
            type: "Feature",
            geometry: {
              type: "Polygon",
              coordinates: [
                [
                  // 多边形外围 需要进行遮罩的点 这里是给世界地图加遮罩 所以是世界的四个端点
                  [-180, 90],
                  [180, 90],
                  [180, -90],
                  [-180, -90],
                ],
                waiData.DATA,
              ],
            },
          },
        },
        paint: {
          "fill-color": "rgba(0,10,36,1)",
          // 'fill-opacity': 1 /* 透明度 */,
        },
        layout: {
          visibility: "visible",
        },
      });
    },
    loadGaoQingLayer() {
      this.mapboxMap.addLayer({
        id: "gaoqingyingxiang",
        type: "raster",
        source: {
          type: "raster",
          tiles: [
            "http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
          ],
          tileSize: 256,
        },
        layout: {
          visibility: "visible",
        },
        paint: {},
      });
    },
    loadXianJieLayer() {
      this.mapboxMap.addLayer({
        id: "xianjie",
        type: "line",
        layout: {
          visibility: "visible",
        },
        source: {
          type: "geojson",
          data: "http://175.27.168.120:8080/geoserver/feixian/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=feixian%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson",
        },
        paint: {
          "line-width": 2,
          "line-color": "orange",
        },
      });
    },
    loadZhenJieLayer() {
      this.mapboxMap.addSource("shp_1691822212", {
        type: "vector",
        scheme: "tms", //new
        tiles: [
          "http://223.99.16.253:9007/geoserver/gwc/service/tms/1.0.0/ksp:shp_1691822212@EPSG:900913@pbf/{z}/{x}/{y}.pbf",
        ],
      });
      this.mapboxMap.addLayer({
        id: "zhenjieline",
        type: "line",
        source: "shp_1691822212",
        "source-layer": "shp_1691822212",
        paint: {
          "line-color": "#0000ff",
          "line-width": 2,
        },
      });
      this.mapboxMap.addLayer({
        id: "zhenjiepoint",
        type: "symbol",
        source: "shp_1691822212",
        "source-layer": "shp_1691822212",
        layout: {
          "text-field": "{xzqmc}",
          "text-size": 18,
        },
        paint: {
          "text-color": "#000000", // 文本的颜色（可选，默认值为 #000000）
          "text-halo-color": "#FFFFFF",
          "text-halo-width": 1,
        },
      });
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 20px;
  position: relative;
}

.grid-list-container {
  width: 50%;
  height: 100%;
  background: #11192e;
  float: left;
}
.search-container {
  width: 100%;
  height: 50px;
  padding: 10px 15px;
}

.list-box {
  width: calc(100% - 0px);
  height: calc(100% - 150px);
  padding: 20px;
  overflow: auto;
}

.list-header {
  width: calc(100% - 60px);
  padding: 0px 20px;
  margin: 0px auto;
  height: 50px;
  background: #1c2746;
}
.page-container {
  width: 100%;
  height: 50px;
  padding-left: 15px;
}

.list-item {
  width: 100%;
  height: 50px;
  background: #1c2746;
  margin-bottom: 12px;
  border-radius: 5px;
  cursor: pointer;
  color: #ccc;
}

.list-item-header {
  background: #121c38;
}
.list-item:hover {
  background: #261e31;
}

.list-item-box {
  float: left;
  width: 20%;
  line-height: 50px;
  text-align: center;
}

.operate-button {
  float: left;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  line-height: 30px;
  margin: 10px 5px;
  font-size: 12px;
  text-align: center;
}
.operate-edit {
  color: #32cd80;
  background: #32cd8065;
}

.operate-delete {
  color: #fd5252;
  background: #fd52524f;
}
/* 地图 */
.map-container {
  width: 50%;
  float: left;
  height: 100%;
}

/* 人员 */
.grider-list-container {
  position: absolute;
  top: 20px;
  right: 0px;
  width: 26%;
  float: right;
  height: calc(100% - 40px);
  background: #11192e;
  padding: 15px;
  overflow-y: auto;
  z-index: 99999;
}

.grid-info-contianer {
  width: 100%;
  height: 120px;
  padding: 15px;
  background: #1c2746;
  color: #fff;
  margin-bottom: 15px;
}

.grid-list-box {
  width: 100%;
  height: calc(100% - 135px);
  overflow: auto;
}

.grider-list-item {
  width: 100%;
  background: #1c2746;
  margin: 0px auto;
  padding: 30px 15px;
  border-radius: 6px;
  margin-bottom: 15px;
}

::v-deep .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 8px;
}

::v-deep .el-form-item__label {
  font-weight: 400;
  color: #ccc;
}

::v-deep .el-input__inner {
  background: none;
  color: #ccc;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: 0;
}

::-webkit-scrollbar {
  height: 10px;
  width: 10px;
  background: transparent;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  padding-top: 100px;
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
    inset -1px -1px 0 rgba(0, 0, 0, 0.07);
  background-color: #797979;
  min-height: 28px;
  border-radius: 4px;
  background-clip: padding-box;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: 0;
}

::-webkit-scrollbar-thumb:hover {
  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.4);
}
</style>
