<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: "polyline",
          disable: false,
          icon: require("@/assets/images/mapToolbar/澶氬彉閫夋嫨.png"),
          disableIcon: require("@/assets/images/mapToolbar/澶氬彉閫夋嫨.png"),
          active: false,
          onclick: (e) => this.polyline(e),
          content: "璺嚎",
          children: [],
        },
        {
          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: "grid",
          disable: false,
          icon: require("@/assets/images/mapToolbar/璐ｄ换鍖虹綉鏍�.png"),
          disableIcon: require("@/assets/images/mapToolbar/璐ｄ换鍖虹綉鏍�.png"),
          active: false,
          onclick: (e) => this.responseAreaGrid(e),
          content: "璐ｄ换鍖虹綉鏍�",
          children: [],
        },
        {
          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));
    },
    responseAreaGrid(e) {
      console.log("馃殌 ~ responseAreaGrid ~ e:", e)
      this.closeOtherChildren(e);
      this.$emit("responseAreaGrid");
    },
    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");
    },
    polyline(e) {
      this.closeOtherChildren(e, true);
      this.polylineActive = !this.polylineActive;
      this.$emit("polyline", this.polylineActive);
    },
    circle(e) {
      this.closeOtherChildren(e, true);
      this.circleActive = !this.circleActive;
      this.$emit("circle", this.circleActive);
    },
    square(e) {
      console.log('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>