<template>
  <div class="app-grid-block">
    <ai-list>
      <template slot="title">
        <ai-title title="网格区块" :isShowBottomBorder="true"></ai-title>
      </template>
      <template slot="left">
        <ai-tree-menu title="网格层级" @search="(v) => $refs.tree.filter(v)">
          <el-tree
            :data="treeObj.treeList"
            :props="treeObj.defaultProps"
            @node-click="handleNodeClick"
            node-key="id"
            ref="tree"
            :filter-node-method="filterNode"
            default-expand-all
            highlight-current
          />
          <footer>
            <span
              class="iconfont iconAdd"
              title="添加二级网格"
              @click="(isEdit = false), addTwoLevel()"
            />
            <el-button
              icon="iconfont iconEdit"
              title="编辑二级网格"
              type="text"
              :disabled="info.girdLevel != '1'"
              @click="(isEdit = true), toAdd()"
            />
            <span class="iconfont iconDelete" @click="deleteTree(info.id)" />
          </footer>
        </ai-tree-menu>
      </template>
      <template slot="content">
        <ai-search-bar>
          <template slot="left">
            <el-date-picker
              v-model="searchObj.createTimeStr"
              type="date"
              @change="(page.current = 1), getList()"
              value-format="yyyy-MM-dd"
              size="small"
              placeholder="创建时间"
            >
            </el-date-picker>
          </template>
          <template slot="right">
            <el-input
              v-model="searchObj.girdName"
              size="small"
              placeholder="输入网格名称"
              @keyup.enter.native="(page.current = 1), getList()"
              clearable
              prefix-icon="iconfont iconSearch"
            />
            <el-button
              type="primary"
              icon="iconfont iconSearch"
              size="small"
              @click="(page.current = 1), getList()"
              >查询
            </el-button>
            <el-button
              icon="el-icon-refresh-right"
              size="small"
              @click="resetSearch"
              >重置</el-button
            >
          </template>
        </ai-search-bar>
        <ai-search-bar bottomBorder>
          <template slot="left">
            <el-button
              type="primary"
              icon="iconfont iconAdd"
              :disabled="info.girdLevel != '1'"
              @click="(isEdit = false), toAdd()"
              >新增
            </el-button>
            <el-button
              icon="iconfont iconDelete"
              @click="deleteById(ids.join(','))"
              :disabled="!Boolean(ids.length)"
            >
              删除
            </el-button>
            <ai-download
              :instance="instance"
              url="/app/appgirdinfo/exportGirdInfo"
              :params="{ ...searchObj, ids: ids.join(',') }"
              fileName="网格区块"
            >
              <el-button icon="iconfont iconExported" size="small"
                >导出全部</el-button
              >
            </ai-download>
            <ai-import
              ref="import"
              title="导入"
              name="网格区块"
              url="/app/appgirdinfo/downloadGirdInfo"
              importUrl="/app/appgirdinfo/importGirdInfo"
              suffixName="xlsx"
              :customCliker="true"
              :instance="instance"
            >
              <template slot="tips">
                <p>
                  如果表格中已经存在数据，则会被本次导入的数据覆盖；不存在数据，系统将生成新的标准记录；
                </p>
              </template>
              <el-button size="small" icon="iconfont iconImport"
                >导入</el-button
              >
            </ai-import>
          </template>
        </ai-search-bar>
        <ai-table
          class="mt10"
          :tableData="tableData"
          :col-configs="colConfigs"
          :total="page.total"
          ref="aitableex"
          :current.sync="page.current"
          :size.sync="page.size"
          @selection-change="(v) => (ids = v.map((e) => e.id))"
          @getList="getList()"
        >
          <el-table-column
            slot="selectId"
            type="selection"
            align="center"
            width="40"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            slot="options"
            align="center"
            fixed="right"
            width="160">
            <template slot-scope="{ row }">
              <div class="table-options">
                <el-button type="text" @click="see(row)">编辑</el-button>
                <el-button type="text" @click="poltting(row)" :disabled="row.girdLevel !== '2'">标绘</el-button>
                <el-button type="text" @click="deleteById(row.id)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <ai-dialog
      title="网格范围"
      :visible.sync="showMap"
      :customFooter="true"
      :destroyOnClose="true"
      border
      width="850px"
    >
      <div class="map">
        <div class="tipinput">
          <el-input
            v-if="editRow.plottingStatus == 0"
            v-model="searchAddress"
            @change="addressChange"
            clearable
            placeholder="请输入关键字"
            id="tipinput"
            size="medium"
            style="width: 200px"
          ></el-input>
        </div>
        <div id="panel" v-if="editRow.plottingStatus == 0"></div>
        <div class="container" id="container"></div>
        <el-button-group
          style="margin-top: 8px"
          v-if="editRow.plottingStatus == 1"
        >
          <el-button type="primary" size="mini" @click="beginPoltting()"
            >开始编辑</el-button
          >
          <el-button size="mini" @click="finishPoltting()">结束编辑</el-button>
        </el-button-group>
        <el-button-group
          style="margin-top: 8px"
          v-if="editRow.plottingStatus == 0"
        >
          <el-button size="mini" @click="draw('polygon')"
            >开始绘制多边形</el-button
          >
          <!-- <el-button  size="mini" @click="close()">关闭绘制</el-button> -->
          <el-button size="mini" @click="clear()">清除绘制</el-button>
        </el-button-group>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button size="medium" @click="showMap = false">取消</el-button>
        <el-button type="primary" size="medium" @click="confirm()"
          >确认</el-button
        >
      </div>
    </ai-dialog>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "AppGridBlock",
  label: "网格区块",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
  },
  data() {
    return {
      treeObj: {
        treeList: [],
        defaultProps: {
          children: "girdList",
          label: "girdName",
        },
        defaultExpandedKeys: [],
      },
      filterText: "",
      page: {
        current: 1,
        size: 10,
        total: 0,
      },
      searchObj: {
        createTimeStr: "",
        girdName: "",
      },
      tableData: [],
      info: {},
      ids: [],
      showMap: false,
      map: "",
      polyEditor: "",
      editRow: {},
      searchAddress: "",
      mouseTool: "",
      placeSearch: "",
      path: [],
      overlays: [],
      isEdit: false,
      searchId: "",
      fileList: [],
    };
  },
  created() {
    this.getTreeList();
    this.getList();
    this.dict.load("girdLevel", "girdType", "isLastLevel", "plottingStatus");
  },
  computed: {
    colConfigs() {
      let _ = this;
      return [
        { type: 'selection'},
        {
          prop: "girdName",
          align: "left",
          label: "网格名称",
        },
        {
          prop: "girdCode",
          align: "center",
          label: "网格编码",
        },
        {
          prop: "girdType",
          align: "center",
          label: "网格类型",
          render(h, { row }) {
            return h("span", {}, _.dict.getLabel("girdType", row.girdType));
          },
        },
        {
          prop: "girdLevel",
          align: "center",
          label: "网格层级",
          render(h, { row }) {
            return h("span", {}, _.dict.getLabel("girdLevel", row.girdLevel));
          },
        },
        {
          prop: "plottingStatus",
          align: "center",
          label: "标绘状态",
          render(h, { row }) {
            return h(
              "span",
              {
                style: {
                  color: _.dict.getColor("plottingStatus", row.plottingStatus),
                },
              },
              _.dict.getLabel("plottingStatus", row.plottingStatus)
            );
          },
        },
        {
          prop: "createTime",
          align: "center",
          label: "创建时间",
          render(h, { row }) {
            return h("span", {}, row.createTime.substring(0, 11));
          },
        },
        {
          prop: "girdMemberNames",
          align: "center",
          width: 200,
          label: "网格员",
        },
      ];
    },
  },
  methods: {
    handleNodeClick(val) {
      this.info = { ...val };
      this.searchId = val.id;
      this.getList();
    },
    getTreeList() {
      this.instance
        .post("/app/appgirdinfo/listByTop", null, null)
        .then((res) => {
          if (res.code == 0) {
            this.treeObj.treeList = [...res.data];
            this.info = { ...this.treeObj.treeList[0] };
          }
        });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.girdName.indexOf(value) !== -1;
    },
    deleteById(ids) {
      ids &&
        this.$confirm("是否要删除该网格区块？", {
          type: "error",
        })
          .then(() => {
            this.instance
              .post("/app/appgirdinfo/delete", null, {
                params: { ids },
              })
              .then((res) => {
                if (res?.code == 0) {
                  this.$message.success("删除成功!");

                  this.getList();
                }
              });
          })
          .catch(() => {});
    },
    deleteTree(ids) {
      ids &&
        this.$confirm("是否要删除该网格区块？", {
          type: "error",
        })
          .then(() => {
            this.instance
              .post("/app/appgirdinfo/delete", null, {
                params: { ids },
              })
              .then((res) => {
                if (res?.code == 0) {
                  this.$message.success("删除成功!");

                  this.getTreeList();
                }
              });
          })
          .catch(() => {});
    },
    getList() {
      this.instance
        .post("/app/appgirdinfo/list", null, {
          params: {
            ...this.searchObj,
            ...this.page,
            parentGirdId: this.searchId,
          },
        })
        .then((res) => {
          if (res?.data) {
            this.tableData = res.data.records;
            this.page.total = res.data.total;
          }
        });
    },
    handleSelectionChange(val) {
      this.ids = [];
      val.map((e) => {
        this.ids.push(e.id);
      });
    },
    //添加二级网格
    addTwoLevel() {
      this.info = { ...this.treeObj.treeList[0] };
      this.toAdd()
    },
    toAdd() {
      this.$emit('change', {
        type: 'Add',
        params: this.info,
        isEdit: this.isEdit
      })
    },
    goBack() {
      this.isAdd = false;
      this.$nextTick(() => {
        this.getList();
        this.getTreeList();
      });
    },
    poltting(row) {
      this.showMap = true;
      this.editRow = { ...row };
      AMapLoader.load({
        key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.PolygonEditor", "AMap.MouseTool", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {
          // 是否加载 AMapUI，缺省不加载
          version: "1.1", // AMapUI 缺省 1.1
          plugins: [], // 需要加载的 AMapUI ui插件
        },
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            resizeEnable: true,
            zoom: 14,
          });
          if (this.editRow.plottingStatus == 1) {
            let path = [];
            this.editRow.points.map((e, index) => {
              path[index] = [e.lng, e.lat];
            });
            let polygon = new AMap.Polygon({
              path: path,
              strokeColor: "#FF33FF",
              strokeWeight: 6,
              strokeOpacity: 0.2,
              fillOpacity: 0.4,
              fillColor: "#1791fc",
              zIndex: 50,
              bubble: true,
            });
            this.map.add([polygon]);
            this.map.setFitView();
            this.polyEditor = new AMap.PolygonEditor(this.map, polygon);
          } else {
            this.mouseTool = new AMap.MouseTool(this.map);
            this.placeSearch = new AMap.PlaceSearch({
              pageSize: 3, // 单页显示结果条数
              pageIndex: 1, // 页码
              city: "", // 兴趣点城市
              citylimit: false, //是否强制限制在设置的城市内搜索
              map: this.map, // 展现结果的地图实例
              panel: "panel", // 结果列表将在此容器中进行展示。
              autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
            });
            this.map.setZoomAndCenter(14, [117.147097, 36.72081], false, 600);
            this.eventOn();
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    see(row) {
      this.info = { ...row };
      this.isEdit = true;
     this.toAdd()
    },
    draw(type) {
      switch (type) {
        case "marker": {
          this.mouseTool.marker({
            //同Marker的Option设置
          });
          break;
        }
        case "polyline": {
          this.mouseTool.polyline({
            strokeColor: "#80d8ff",
            //同Polyline的Option设置
          });
          break;
        }
        case "polygon": {
          this.mouseTool.polygon({
            fillColor: "#00b0ff",
            strokeColor: "#80d8ff",
            borderWeight: 2,
            strokeWeight: 4,
            //同Polygon的Option设置
          });
          break;
        }
        case "rectangle": {
          this.mouseTool.rectangle({
            fillColor: "#00b0ff",
            strokeColor: "#80d8ff",
            //同Polygon的Option设置
          });
          break;
        }
        case "circle": {
          this.mouseTool.circle({
            fillColor: "#00b0ff",
            strokeColor: "#80d8ff",
            //同Circle的Option设置
          });
          break;
        }
      }
    },
    //map搜索
    addressChange(val) {
      this.placeSearch.search(val);
    },
    close() {
      this.mouseTool.close(true);
    },
    clear() {
      this.map.remove(this.overlays);
      this.overlays = [];
      this.path = [];
    },
    beginPoltting() {
      this.polyEditor.open();
    },
    finishPoltting() {
      this.polyEditor.close();
    },
    confirm() {
      let path = [];
      if (this.editRow.plottingStatus == 1) {
        this.polyEditor
          .getTarget()
          .getPath()
          .map((e) => {
            path.push({ lng: e.lng, lat: e.lat });
          });
      } else {
        path = [...this.path];
      }
      delete this.editRow.points;
      this.instance
        .post(
          `/app/appgirdinfo/addOrUpdate`,
          {
            ...this.editRow,
            points: path,
          },
          null
        )
        .then((res) => {
          if (res.code == 0) {
            this.getList();
            this.showMap = false;
          }
        });
    },
    eventOn() {
      this.path = [];
      this.overlays = [];
      this.map.on("mousemove", this.showInfoMove, this);
      this.mouseTool.on("draw", ({ type, obj }) => {
        obj.getPath().map((e) => {
          this.path.push({ lat: e.getLat(), lng: e.getLng() });
        });
        this.overlays.push(obj);
      });
    },
    resetSearch() {
      Object.keys(this.searchObj).map((e) => {
        this.searchObj[e] = "";
      });
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.app-grid-block {
  width: 100%;
  height: 100%;

  .mt10 {
    padding: 8px 0;
  }

  .map {
    width: 780px;
    position: relative;
    overflow: hidden;

    .container {
      width: 760px;
      height: 420px;
      border-radius: 2px;
      border: 1px solid #d0d4dc;
    }

    #panel {
      position: absolute;
      height: 400px;
      right: 30px;
      top: 20px;
      width: 280px;
      overflow: hidden;
      z-index: 10000;
    }

    .tipinput {
      position: absolute;
      width: 200px;
      height: 38px;
      left: 20px;
      top: 20px;
      z-index: 10000;
    }
  }

  ::v-deep .treePanel {
    display: flex;
    flex-direction: column;

    .el-tree {
      min-height: 0;
      flex: 1;
    }

    footer {
      width: 100%;
      height: 32px;
      background-color: #fff;
      display: flex;
      align-items: center;

      span {
        width: 33.33%;
        text-align: center;
        cursor: pointer;
      }

      .el-button {
        width: 33.33%;
      }
    }
  }
}
</style>
