<template>
  <div>
    <Map ref="map" :markersData="originData" @choose="getDetailData">
      <el-row :gutter="20" slot="leftTop" class="mytree">
        <el-card>
          <div slot="header">
            <span><b class="cardTitle">站点分布</b></span>
            <el-button style="float: right" @click="switchStat" type="text"
              >切换为列表模式</el-button
            >
          </div>
          <el-scrollbar style="height: 100%">
            <el-tree
              size="mini"
              ref="siteTree"
              :data="areaData"
              id="el-tree"
              node-key="id"
              indent="4"
              :props="treeProps"
              :load="loadNode"
              highlight-current
              default-expand-all
              :expand-on-click-node="false"
              :render-content="renderContent"
              @node-click="handleNodeClick"
            >
            </el-tree>
          </el-scrollbar>
        </el-card> </el-row
    ></Map>
    <dialog-show ref="dialogform" @ok="getData" />
  </div>
</template>

<script>
/** 表单弹出框模式需引入 */
import dialogShow from "./dialogshow";
import table from "@/assets/mixins/table";
import tree from "@/assets/mixins/tree";
export default {
  name: "Sitestat",
  components: { dialogShow },
  mixins: [table, tree],
  mounted() {
    console.log(this.pageInfo);
    this.pageInfo.list = "/sitestat/list";
  },

  created() {
    this.pageInfo.list = "/sitestat/list";
    this.$get("/sitestat/maplist", {}).then(({ data }) => {
      this.originData = data;
      this.$refs.map.refresh(this.originData);
    });

    this.$get("/sitestat/siteTree", {}).then(({ data }) => {
      this.areaData = data.siteTree;
    });
  },
  methods: {
    /** 下载模板操作 */
    downloadTemplate() {
      this.isExport = true;
      this.$download("/sitestat/downloadTemplate", {}, { type: "excel" })
        .then(() => (this.isExport = false))
        .catch((error) => {
          this.isExport = false;
          this.$message.error(error.message);
        });
    },

    /** 导出Excel */
    doExport() {
      this.isExport = true;
      this.$download(
        "/sitestat/exportExcel",
        {
          siteId: this.$route.query["siteId"],
          siteName: this.$route.query["siteName"],
        },
        { type: "excel" }
      )
        .then(() => (this.isExport = false))
        .catch((error) => {
          this.isExport = false;
          this.$message.error(error.message);
        });
    },

    getDetailData(info, callback) {
      console.log("info:", info);
      this.$router.push({
        path: "/sitestat/mapDetail",
        // query: info,
        query: { sitestatId: info.id, siteId: info.siteId },
      });
    },

    /** 重写新增方法 */
    toAdd(row) {
      this.$refs.dialogform.add(row);
    },
    /** 重写编辑方法 */
    toEdit(row) {
      this.$refs.dialogform.edit(row);
    },
    /** 重写查看方法 */
    toView(row) {
      //进入设备列表页面
      this.$router.push({
        path: "/device/list",
        query: {
          siteId: row.siteId,
        },
      });
    },

    switchStat() {
      console.log("切换列表页面");
      this.$router.push({
        path: "/sitestat/list",
      });
    },

    handleNodeClick(node) {
      console.log("click node", node);
      this.currentNode = node;
      if (node.type === "site") {
        let obj = {};
        obj.lng = node.longitude;
        obj.lat = node.latitude;
        this.$refs.map.relocate(obj);
      }
    },
  },
  data() {
    return {
      isExport: false,
      originData: [],
      config: {
        search: [
          {
            name: "siteName",
            type: "text",
            label: "站点名称",
          },
        ],
        columns: [
          { type: "selection", width: 60 },

          { label: "站点名称", prop: "siteName" },

          { label: "站点编号", prop: "siteCode" },

          { label: "设备总数", prop: "deviceTotal", formatter: this.formatter },

          { label: "在线数量", prop: "onlineCount", formatter: this.formatter },

          {
            label: "离线数量",
            prop: "offlineCount",
            formatter: this.formatter,
          },

          { label: "停用数量", prop: "stopCount", formatter: this.formatter },

          {
            label: "待激活数量",
            prop: "unActiveCount",
            formatter: this.formatter,
          },
          {
            label: "操作",
            width: 240,
            formatter: (row) => {
              return (
                <table-buttons
                  noAdd
                  noEdit
                  row={row}
                  onEdit={this.toEdit}
                  onView={this.toView}
                  onDel={this.toDel}
                />
              );
            },
          },
        ],
      },
    };
  },
};
</script>

<style>
.el-card__body {
  padding: 10px;
}
.el-calendar-table .el-calendar-day {
  height: 70px;
}
.is-selected {
  color: #fa3b19;
}
</style>

<style lang="scss" scoped>
.cardTitle {
  font-size: 16px;
  color: rgb(20, 134, 248);
  list-style-type: none;
  border-bottom: 3px solid rgb(20, 134, 248);
  padding-bottom: 2px;
}
.mytree ::v-deep {
  .el-tree--highlight-current
    ::v-deep
    .el-tree-node.is-checked
    > .el-tree-node__content {
    background-color: rgb(255, 255, 255);
    color: rgb(64, 158, 255);
  }
  .el-tree--highlight-current
    ::v-deep
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: rgb(255, 255, 255);
    color: rgb(64, 158, 255);
  }
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }
  .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 24px;
  }
}
</style>

<style>
.amap-wrapper {
  width: 500px;
  height: 500px;
}
</style>