<template>
  <div class="map-toolbar">
    <div class="datetime">
      <span class="time">{{ dateTime.time }}</span>
      <span class="date">{{ dateTime.date }}</span>
    </div>
    <div class="tools">
      <div class="top" style="top: 60px; height: 24px">工具栏</div>
      <transition name="scale-up-ver-top">
        <div
          v-show="contentShow"
          class="content"
          :style="{
            height: toolData.length * 48 - 24 + 'px',
            top: '84px',
          }"
        >
          <div class="item" v-for="item in toolData" :key="item.name" :class="item.disable ? 'item-disable' : ''">
            <el-tooltip effect="dark" :content="item.content" placement="top">
              <el-badge v-if="item.name === 'history' && (totalUnreadCount > 0 || hasUnreadMessage)" is-dot class="badge">
                <img
                  class="icon"
                  style="width: 24px; height: 24px"
                  :src="item.disable ? item.disableIcon : item.icon"
                  alt=""
                  @click="
                    () => {
                      if (!item.disable) item.onclick(item);
                    }
                  "
                />
              </el-badge>
              <img
                v-else
                class="icon"
                style="width: 24px; height: 24px"
                :src="item.disable ? item.disableIcon : item.icon"
                alt=""
                @click="
                  () => {
                    if (!item.disable) item.onclick(item);
                  }
                "
              />
            </el-tooltip>
            <transition name="hor-right">
              <div
                v-if="item.active && item.children.length > 0"
                class="item-children"
                :class="'item-children-' + item.children.length"
              >
                <div v-for="child in item.children" class="item-child" :key="child.name">
                  <el-tooltip effect="dark" :content="child.content" placement="top">
                    <img class="icon" :src="child.icon" alt="" style="width: 24px; height: 24px" @click="child.onclick(item)" />
                  </el-tooltip>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </transition>
      <div
        :class="contentShow ? 'bottom' : 'bottom bottom-close'"
        :style="{
          top: (contentShow ? toolData.length * 48 - (toolData.length > 1 ? 24 : 4) : 0) + 84 + 'px',
        }"
        @click="contentShow = !contentShow"
      >
        <span>{{ contentShow ? "收起" : "展开" }}</span>
        <i class="icon-arrow" :class="contentShow ? 'icon-arrow-close' : 'icon-arrow-open'"></i>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import _ from "lodash";
import { mapGetters, mapState } from "vuex";

export default {
  name: "mapToolbar",
  props: {
    mode: {
      type: String,
      default: "dispatch",
    },
    showList: {
      type: Array,
      default() {
        return [];
      },
    },
    disableList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      tools: [
        {
          name: "tile",
          disable: false,
          icon: require("@/assets/images/mapToolbar/地图切换.png"),
          disableIcon: require("@/assets/images/mapToolbar/地图切换.png"),
          active: false,
          onclick: (e) => this.closeOtherChildren(e),
          content: "地图切换",
          children: [
            {
              name: "Satellite",
              icon: require("@/assets/images/mapToolbar/卫星图.png"),
              onclick: (e) => this.setTile(["Satellite", "RoadNet"], e),
              content: "卫星图",
            },
            {
              name: "default",
              icon: require("@/assets/images/mapToolbar/路网图.png"),
              onclick: (e) => this.setTile(["default"], e),
              content: "地图",
            },
          ],
        },
        {
          name: "fence",
          disable: false,
          icon: require("@/assets/images/mapToolbar/电子围栏.png"),
          disableIcon: require("@/assets/images/mapToolbar/电子围栏.png"),
          active: false,
          children: [],
          onclick: (e) => this.setFence(e),
          content: "电子围栏",
        },
        {
          name: "media",
          disable: false,
          icon: require("@/assets/images/mapToolbar/音视频会话.png"),
          active: false,
          onclick: (e) => this.closeOtherChildren(e),
          content: "音视频会话",
          children: [
            {
              name: "video",
              icon: require("@/assets/images/mapToolbar/视频商会.png"),
              onclick: (e) => this.video(e),
              content: "视频会商",
            },
            // {
            //   name: "preview",
            //   icon: require("@/assets/images/mapToolbar/批量视频查看.png"),
            //   onclick: (e) => this.preview(e),
            //   content: "批量视频查看",
            // },
            {
              name: "broadcast",
              icon: require("@/assets/images/mapToolbar/广播／全呼.png"),
              onclick: (e) => this.broadcast(e),
              content: "广播／全呼",
            },
          ],
        },
        {
          name: "draw",
          disable: false,
          icon: require("@/assets/images/mapToolbar/框选工具.png"),
          disableIcon: require("@/assets/images/mapToolbar/框选工具.png"),
          active: false,
          onclick: (e) => this.closeOtherChildren(e),
          content: "框选工具",
          children: [
            {
              name: "circle",
              icon: require("@/assets/images/mapToolbar/圈选.png"),
              onclick: (e) => this.circle(e),
              content: "圈选",
            },
            {
              name: "square",
              icon: require("@/assets/images/mapToolbar/框选.png"),
              onclick: (e) => this.square(e),
              content: "框选",
            },
            {
              name: "polygon",
              icon: require("@/assets/images/mapToolbar/多变选择.png"),
              onclick: (e) => this.polygon(e),
              content: "多边选择",
            },
          ],
        },
        {
          name: "tools",
          disable: false,
          icon: require("@/assets/images/mapToolbar/地图工具.png"),
          disableIcon: require("@/assets/images/mapToolbar/地图工具置灰.png"),
          active: false,
          onclick: (e) => this.closeOtherChildren(e),
          content: "地图工具",
          children: [
            {
              name: "traffic",
              icon: require("@/assets/images/mapToolbar/隐藏路况.png"),
              onclick: (e) => this.traffic(e),
              content: "路况",
            },
            {
              name: "star",
              icon: require("@/assets/images/mapToolbar/显示非关.png"),
              onclick: (e) => this.star(e),
              content: "显示非关",
            },
            {
              name: "measure",
              icon: require("@/assets/images/mapToolbar/测距.png"),
              onclick: (e) => this.measure(e),
              content: "测距",
            },
          ],
        },
        {
          name: "resource",
          disable: false,
          icon: require("@/assets/images/mapToolbar/地图工具.png"),
          disableIcon: require("@/assets/images/mapToolbar/地图工具置灰.png"),
          active: false,
          onclick: (e) => this.closeOtherChildren(e),
          content: "地图工具",
          children: [
            {
              name: "heatmap",
              icon: require("@/assets/images/mapToolbar/热力图.png"),
              onclick: (e) => this.heatmap(e),
              content: "热力图",
            },
          ],
        },
        {
          name: "more",
          disable: false,
          icon: require("@/assets/images/mapToolbar/更多.png"),
          disableIcon: require("@/assets/images/mapToolbar/更多.png"),
          active: false,
          onclick: (e) => this.closeOtherChildren(e),
          content: "更多",
          children: [
            {
              name: "chair",
              icon: require("@/assets/images/mapToolbar/主席台模式.png"),
              onclick: (e) => this.chair(e),
              content: "主席台模式",
            },
          ],
        },
        {
          name: "history",
          disable: false,
          icon: require("@/assets/images/mapToolbar/历史消息.png"),
          disableIcon: require("@/assets/images/mapToolbar/历史消息.png"),
          active: false,
          onclick: (e) => this.history(e),
          content: "历史消息",
          children: [],
        },
      ],
      contentShow: true,
      dateTime: {
        date: "",
        time: "",
      },
      timer: null,
      circleActive: false,
      squareActive: false,
      polygonActive: false,
      measureActive: false,
    };
  },
  computed: {
    ...mapState({
      hasUnreadMessage: (state) => state.conversation.hasUnreadMessage,
    }),
    ...mapGetters(["totalUnreadCount"]),
    toolData() {
      return _.filter(this.tools, (v) => _.includes(this.showList, v.name)).map((x) => {
        return {
          ...x,
          disable: _.includes(this.disableList, x.name),
        };
      });
    },
  },
  watch: {
    contentShow(value) {
      if (!value) {
        this.closeAllChildren();
      }
    },
    showList() {
      this.closeAllChildren();
    },
    disableList() {
      this.closeAllChildren();
    },
  },
  methods: {
    closeAllChildren() {
      this.tools.forEach((tool) => (tool.active = false));
    },
    closeOtherChildren(e, flag) {
      this.tools.forEach((tool) => {
        if (e.name === tool.name) {
          tool.active = !tool.active;
          if (flag) tool.active = true;
        } else {
          tool.active = false;
        }
      });
      // this.$emit("clearMap");
      this.$emit("hideAllLayers");
      this.$emit("hideAllList");
    },
    setTile(type, e) {
      this.closeOtherChildren(e, true);
      this.$emit("changeLayer", type);
    },
    setFence(e) {
      this.closeOtherChildren(e);
      this.$emit("fence");
      this.$emit("clearMap");
    },
    video(e) {
      this.closeOtherChildren(e, true);
      this.$emit("video");
    },
    preview(e) {
      this.closeOtherChildren(e, true);
      this.$emit("preview");
    },
    broadcast(e) {
      this.closeOtherChildren(e, true);
      this.$emit("broadcast");
    },
    circle(e) {
      this.closeOtherChildren(e, true);
      this.circleActive = !this.circleActive;
      this.$emit("circle", this.circleActive);
    },
    square(e) {
      this.closeOtherChildren(e, true);
      this.squareActive = !this.squareActive;
      this.$emit("square", this.squareActive);
    },
    polygon(e) {
      this.closeOtherChildren(e, true);
      this.polygonActive = !this.polygonActive;
      this.$emit("polygon", this.polygonActive);
    },
    traffic(e) {
      this.closeOtherChildren(e, true);
      this.$emit("traffic");
    },
    heatmap(e) {
      this.closeOtherChildren(e, true);
      this.$emit("heatmap");
    },
    star(e) {
      this.closeOtherChildren(e, true);
      this.$emit("star");
    },
    measure(e) {
      this.closeOtherChildren(e, true);
      this.measureActive = !this.measureActive;
      this.$emit("measure", this.measureActive);
    },
    chair(e) {
      this.closeOtherChildren(e, true);
      this.$emit("chair");
    },
    history(e) {
      this.closeOtherChildren(e);
      this.$emit("history");
    },
  },
  mounted() {
    this.dateTime.date = dayjs().format("M/DD");
    this.dateTime.time = dayjs().format("HH:mm");
    this.timer = setInterval(() => {
      this.dateTime.date = dayjs().format("M/DD");
      this.dateTime.time = dayjs().format("HH:mm");
    }, 10000);
  },
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
};
</script>

<style scoped lang="scss">
@import "src/styles/animation";
.badge {
}
.map-toolbar {
  position: absolute;
  top: 36px;
  right: 32px;
  z-index: 2;
  .datetime {
    width: 54px;
    height: 47px;
    background: #0e71ff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px 4px 4px 4px;
    position: absolute;
    top: 20px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    color: #ffffff;
    pointer-events: none;
    .time {
      font-size: 14px;
    }
    .date {
      font-size: 12px;
    }
  }
  .tools {
    //width: 100%;
    //height: auto;
    .top {
      position: absolute;
      //top: 60px;
      right: 0;
      width: 54px;
      //height: 24px;
      background: #0e71ff;
      border-radius: 4px 4px 0px 0px;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      color: #ffffff;
      line-height: 24px;
    }
    .content {
      //height: 448px;
      width: 54px;
      background: #ffffff;
      position: absolute;
      //top: 84px;
      right: 0;
      //padding: 16px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      .item {
        //height: 54px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        //margin-bottom: 12px;

        .icon {
          //width: 32px;
          //height: 32px;
          cursor: pointer;
        }
        &-disable {
          .icon {
            cursor: not-allowed;
          }
        }
        .item-children {
          //width: 120px;
          height: 52px;
          background: #f2f2f2;
          border-radius: 4px 0px 0px 4px;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          position: absolute;
          top: -5;
          right: 43px;
          align-items: center;
          justify-content: space-between;
          padding: 0 16px;
          &-1 {
            width: 64px;
          }
          &-2 {
            width: 120px;
          }
          &-3 {
            width: 176px;
          }
          .item-child {
            height: 100%;
            display: flex;
            align-items: center;
          }
        }
      }
    }
    .bottom {
      width: 54px;
      height: 24px;
      background: #0e71ff;
      border-radius: 0px 0px 4px 4px;
      position: absolute;
      //top: 532px;
      right: 0;
      transition: all 0.5s;
      cursor: pointer;
      font-weight: 400;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      &-close {
        //height: 0;
        top: 84px;
        transition: all 0.5s;
      }
      span {
        font-size: 12px;
      }
      .icon-arrow {
        display: block;
        height: 16px;
        width: 16px;
        &-open {
          background: url("~@/assets/images/mapToolbar/16px展开.png") no-repeat;
          background-size: 100% 100%;
        }
        &-close {
          background: url("~@/assets/images/mapToolbar/16px收起.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
</style>
