<template>
  <div class="dialog-container">
    <transition
      enter-active-class="animate__slideInLeft"
      leave-active-class="animate__slideOutLeft"
    >
      <div class="animate__animated" v-show="show">
        <div class="panel-box">
          <div class="panel-box-title">区域人数统计</div>
          <div class="panel-box-tree">
            <el-tree
              class="custom-tree"
              :data="areaCount"
              default-expand-all
              :render-content="renderContent"
            ></el-tree>
          </div>
        </div>
        <div class="show-box left-arrows animate__animated" @click="show = false"></div>
      </div>
    </transition>
    <transition enter-active-class="animate__fadeIn" leave-active-class="animate__fadeOut">
      <div class="hide-box animate__animated" v-show="!show" @click="show = true">区域统计</div>
    </transition>
  </div>
</template>

<script>
import { initData } from '@/api/data'
import { setCustomConut } from '@/api/positioning/map'
export default {
  name: 'CountareaPanel',
  components: {},
  data() {
    return {
      areaCount: [],
    }
  },
  props: {
    buildid: '',
    countdic: {
      type: Object,
      default: () => {},
    },
    show: true,
  },
  computed: {},
  watch: {},
  mounted() {
    this.int()
  },
  methods: {
    int() {
      initData('Positioning/CountArea/GetTreeRC', { buildId: this.buildId }).then((res) => {
        this.areaCount = res.data.content
      })
    },
    nodeColor(riskLevel) {
      switch (riskLevel) {
        case '306001':
          return '#ff4949'
        case '306002':
          return '#e09213'
        case '306003':
          return '#d8c732'
        case '306004':
          return '#606aff'
        default:
          return '#fff'
      }
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span style={'color: ' + this.nodeColor(data.riskLevel)}>
            {node.label}
            {data.treeId.indexOf('c') >= 0 ? <a class="el-icon-plus custom-tree-node-button" on-click={() => this.setCustom(data.treeId, 1)}></a> : ''}
            {data.treeId.indexOf('c') >= 0 ? <a class="el-icon-minus custom-tree-node-button" on-click={() => this.setCustom(data.treeId, -1)}></a> : ''}
          </span>
          <span style={'width: 80px; color: ' + this.nodeColor(data.riskLevel)}>
            人数：{this.countdic[data.treeId] || 0}
          </span>
        </span>
      )
    },
    async setCustom(tag, i) {
      if (tag.indexOf('c') == -1) return
      let params = {
        BuildId: this.buildid,
        Tag: tag,
        Change: i,
      }
      await setCustomConut(params)
    },
  },
}
</script>

<style lang="scss" scoped>
.dialog-container {
  position: absolute;
  left: 0;
  top: calc((100vh + 84px) / 2);
  transform: translate(0, -50%);
  box-sizing: border-box;
}
.panel-box {
  width: 350px;
  height: 600px;
  color: white;
  background-color: rgba(48, 65, 86, 0.8);
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  padding-left: 5px;
  padding-right: 15px;
  pointer-events: auto;
}
.show-box {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 1000;
  cursor: pointer;
}
.left-arrows {
  width: 0;
  height: 0;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
  border-right: 8px solid white;
  transform: translate(0, -50%);
}
.hide-box {
  position: absolute;
  color: white;
  writing-mode: vertical-lr;
  text-align: center;
  font-size: 20px;
  left: 0;
  top: 50%;
  width: 40px;
  height: 200px;
  transform: translate(0, -50%);
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  padding-left: 5px;
  pointer-events: auto;
  background-color: rgba(48, 65, 86, 0.8);
  cursor: pointer;
}
.animate__animated {
  --animate-duration: 0.5s;
}
.panel-box-title {
  text-align: center;
  font-size: 20px;
  padding-top: 10px;
}
.panel-box-tree {
  margin-top: 10px;
  height: calc(100% - 45px);
  overflow: auto;
}
.custom-tree {
  background: none;
}
::v-deep .custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  padding-right: 8px;
}
::v-deep .custom-tree-node-button {
  background-color: #001528;
  padding: 2px;
  text-align: center;
  margin-left: 5px;
  border-radius: 5px;
  font-size: 15px;
}
::v-deep .el-tree-node.is-current > .el-tree-node__content {
  background-color: #1f2d3d;
}
::v-deep .el-tree-node__content:hover {
  background-color: #1f2d3d;
}
::v-deep .el-tree-node:focus > .el-tree-node__content {
  background-color: #1f2d3d;
}
</style>
