<template>
  <div class="m-menu">
    <div class="list">
      <div
        class="item"
        :key="'menu1' + item.coverageType"
        v-for="item in menuList"
      >
        <div
          class="info"
          :class="{ 'z-on': item.selected }"
          @click="selectAll(item)"
        >
          <div class="name">
            {{ item.coverageName }}
            <i v-if="item.quantity">({{ item.quantity }})</i>
          </div>

          <div
            class="i-arrow"
            :class="{ 'z-unfold': !item.folded }"
            @click.stop="item.folded = !item.folded"
          >
            <img src="@/assets/img/shuju/command/arrow-right.png" />
          </div>
        </div>

        <div
          v-show="!item.folded"
          class="granditem"
          :key="'menu3' + granditem.categoryKey"
          v-for="granditem in item.categories"
        >
          <div
            class="info"
            :class="{ 'z-on': granditem.selected }"
            @click="granditem.selected = !granditem.selected"
          >
            <div class="i-ico">
              <img
                v-if="grandIcoList[granditem.categoryKey]"
                :src="grandIcoList[granditem.categoryKey]"
              />
            </div>

            <div class="name">
              {{ granditem.categoryName }}
              <i v-if="granditem.quantity">({{ granditem.quantity }})</i>
            </div>
          </div>
        </div>

        <div
          v-show="!item.folded"
          class="subitem"
          :key="'menu2' + subitem.placeType"
          v-for="subitem in item.placeTypesInAnalysis"
        >
          <div
            class="info"
            :class="{ 'z-on': subitem.selected }"
            @click="selectAll(subitem)"
          >
            <div class="i-ico">
              <img
                v-if="subitem.placeType == 'xxxxx'"
                src="@/assets/img/shuju/command/fuwusheshi.png"
              />
              <img
                v-if="subitem.placeType == 'enterprise_patrol'"
                src="@/assets/img/shuju/command/qishiyedanweixuncha.png"
              />
              <img
                v-if="subitem.placeType == 'group_rent'"
                src="@/assets/img/shuju/command/qunzufang.png"
              />
              <img
                v-if="subitem.placeType == 'community_org'"
                src="@/assets/img/shuju/command/shequzizhuzi.png"
              />
              <img
                v-if="subitem.placeType == 'superior_resource'"
                src="@/assets/img/shuju/command/youshiziyuan.png"
              />
              <img
                v-if="subitem.placeType == 'volunteer'"
                src="@/assets/img/shuju/command/zhiyuanzhe.png"
              />
              <img
                v-if="subitem.placeType == 'dangerous_chemicals'"
                src="@/assets/img/shuju/command/zhongdianweihuapinqiye.png"
              />
              <img
                v-if="subitem.placeType == 'party_unit'"
                src="@/assets/img/shuju/command/lianjiandanwei.png"
              />
            </div>

            <div class="name">
              {{ subitem.placeTypeName }}
              <i v-if="subitem.quantity">({{ subitem.quantity }})</i>
            </div>

            <div
              class="i-arrow"
              :class="{ 'z-unfold': !subitem.folded }"
              @click.stop="subitem.folded = !subitem.folded"
            >
              <img src="@/assets/img/shuju/command/arrow-right.png" />
            </div>
          </div>

          <div
            v-show="!subitem.folded"
            class="granditem"
            :key="'menu3' + granditem.categoryKey"
            v-for="granditem in subitem.categories"
          >
            <div
              class="info"
              :class="{ 'z-on': granditem.selected }"
              @click="granditem.selected = !granditem.selected"
            >
              <div class="i-ico">
                <img
                  v-if="grandIcoList[granditem.categoryKey]"
                  :src="grandIcoList[granditem.categoryKey]"
                />
              </div>

              <div class="name">
                {{ granditem.categoryName }}
                <i v-if="granditem.quantity">({{ granditem.quantity }})</i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";

export default {
  name: "sidemenu",

  props: {
    grandIcoList: {
      type: Object,
      default: () => ({}),
    },
    orgId: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      menuList: [],
    };
  },

  computed: {},
  watch: {
    menuList: {
      handler(newValue, oldValue) {
        // console.log("菜单改变拉------------------------------------", newValue);
        if (oldValue.length != 0) {
          this.$emit("change", newValue);
        }
      },
      deep: true,
      // immediate: true
    },
    orgId() {
      this.requestList();
    },
  },

  mounted() {
    this.requestList();
  },

  methods: {
    selectAll(item) {
      item.selected = !item.selected;
      item.categories.forEach((subitem) => {
        subitem.selected = item.selected;
      });
      if (item.placeTypesInAnalysis) {
        item.placeTypesInAnalysis.forEach((subitem) => {
          subitem.selected = item.selected;
          subitem.categories.forEach((subitem2) => {
            subitem2.selected = item.selected;
          });
        });
      }
    },
    //加载组织数据
    async requestList() {
      const url = "/data/aggregator/coverage/analysis/resourceCategories";
      let params = {
        agencyId: this.orgId,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.menuList = data.map((item) => {
          item.selected = false;
          item.folded = true;
          item.categories.forEach((subitem) => {
            subitem.selected = false;
          });
          item.placeTypesInAnalysis.forEach((subitem) => {
            subitem.selected = false;
            subitem.folded = true;
            subitem.categories.forEach((granditem) => {
              granditem.selected = false;
            });
          });
          return item;
        });
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.m-menu {
  padding-top: 10px;

  .list {
    .item {
      position: relative;
      z-index: 2;
      line-height: 60px;
      color: rgba(#fff, 0.8);

      .z-on {
        color: #ffffff;
        background-color: #041267;
        font-weight: bold;
      }

      .info {
        position: relative;
        font-size: 18px;
        width: 100%;
        padding-left: 10px;
        display: flex;
        align-items: center;
        cursor: pointer;

        .i-ico {
          position: relative;
          width: 35px;
          height: 35px;
          margin-right: 4px;

          img {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 2px;
            margin: auto;
          }
        }

        .i-arrow {
          margin-left: auto;
          margin-right: 20px;

          &.z-unfold {
            transform: rotate(90deg);
          }
        }

        &:hover {
          box-shadow: 0 0 30px 5px inset #22f;
          background-color: darken(#104ba4, 12);
        }
      }

      .subitem,
      .granditem {
        > .info {
          padding-left: 20px;
          font-size: 16px;
        }

        .granditem {
          > .info {
            padding-left: 40px;
          }
        }
      }
    }
  }
}
</style>
