<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>

      <el-row :gutter="20" slot="rightList" class="mytree">
        <el-card>
          <div>
            <span><b class="cardTitle">部署列表</b></span>
            <div class="deployall">
              <div class="statistics">
                <div class="sbzs item">
                  <div>1</div>
                  <div class="wz">设备总数(台)</div>
                </div>
                <div class="zx item">
                  <div>0</div>
                  <div class="wz">在线(台)</div>
                </div>
                <div class="lx item">
                  <div>1</div>
                  <div class="wz">离线(台)</div>
                </div>
              </div>
            </div>
          </div>
          <div class="deploylist">
            <div v-for="i in 10" :key="i" class="deployitem">
              <div class="title">绵阳市政府服务中心</div>
              <div class="are">绵阳市政府服务中心绵阳市政府服务中心绵阳市政府服务中心绵阳市政府服务中心</div>
              <div class="data">
                <div class="sbzs dataitem">设备总数：<span>111台</span></div>
                <div class="zx dataitem">在线：<span>111台</span></div>
                <div class="lx dataitem">离线：<span>111台</span></div>
              </div>
            </div>
          </div>
        </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() {
    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;
      this.areaData.map(item=>{
        item.lng = item.longitude
        item.lat = item.latitude
        item.chang = item.children.length+1
      })
      console.log(this.areaData);
      this.$refs.map.refreshOne(this.areaData);
    });
  },
  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) {
      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() {
      this.$router.push({
        path: "/sitestat/list",
      });
    },

    handleNodeClick(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>
.deploylist::-webkit-scrollbar{
  width: 0;
}
.deploylist{
  padding: 0 4px;
  max-height: 550px;
  overflow: auto;
  .deployitem{
    padding: 10px 0;
    color: #223333;
    border-bottom: 1px solid gainsboro;
    .data{
      display: flex;
      font-size: 12px;
      font-weight: 500;
      color: #999999;
      margin:4px 0 ;
      .dataitem{
        margin-right: 16px;
      }
      .sbzs>span{
        color: #223333;
      }
      .zx>span{
        color: #0064e9;
      }
      .zx{
        position: relative;
      }
      .zx::before{
        content: '';
        position: absolute;
        width:4px;
        height: 4px;
        background: #0064e9;
        border-radius: 50%;
        top:6px;
        left: -6px;
      }
      .lx>span{
        color: #fa4d4c;
      }
    }
    .title{
      font-size: 14px;
      font-weight: 600;
      padding: 4px 0;
    }
    .are{
      font-size: 12px;
    }
  }
}
.deployall{
  margin-top: 20px;
  .statistics{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ededed;
    padding-bottom: 10px;
    font-size: 8px;
    .item{
      width: 120px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: #fff;
      padding-bottom: 6px;
      .wz{
        margin-left: 14px;
      }
    }
    .sbzs{
      background: url("../../assets/images/sbzs.png") no-repeat;
      background-size: 100% 100%;
    }
    .zx{
      background: url("../../assets/images/zx.png") no-repeat;
      background-size: 100% 100%;
    }
    .lx{
      background: url("../../assets/images/lx.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
.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>