<template>
  <div class="map-right">
    <img :class="isShow?'':'close'" alt="" class="map-right-icon" src="@/assets/images/renfang/map-right-open.png"
         @click="isShow = !isShow">
    <div :class="isShow?'':'hidden'" class="map-right-content">
      <div class="title">
        {{orgData.name}}
      </div>
      <div class="map-list">
        <div class="map-item" v-for="(item,index) in orgData.children" :key="index" @click="clickAgency(item)">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "map-right",
  props: {
    orgData: {
      type: Object,
      default: () => {}
    },
  },
  data() {
    return {
      isShow: true
    }
  },
  methods: {
    clickAgency(item) {
        this.$emit('clickAgency', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.map-right {
  position: absolute;
  top: calc(50% - 184px);
  right: 20px;
  display: flex;
  align-items: center;

  .map-right-icon {
    transform: rotate(180deg);
    &.close {
      transform: rotate(0deg);
    }
  }

  .map-right-content {
    overflow: hidden;
    width: 134px;
    transition: all .3s;
    color: #fff;
    border: 1px solid #488CC5;
    border-radius: 2px;
    background: rgba(10, 35, 81, 0.66);

    &.hidden {
      width: 0;
      border-width: 0px;
    }

    .title {
      line-height: 32px;
      height: 32px;
      padding-left: 24px;
      background: url("@/assets/images/renfang/map-right-title.png");
    }

    .map-list {
      overflow-y: auto;
      height: 336px;

      .map-item {
        line-height: 42px;
        overflow: hidden;
        height: 42px;
        padding-left: 24px;
        text-overflow: ellipsis;
        border-bottom: 1px solid;
        border-image: linear-gradient(to right, #000 0%, #4eafd5 50%, #000 100%);
        border-image-slice: 1;

        &:hover {
          color: #72F7FF;
          background: url("@/assets/images/renfang/map-right-cur.png");
        }
      }
    }
  }
}
</style>