<template>
  <div class="app-view-toolbar app-view-full-toolbar">
    <div class="pano-label">
      <div class="pano-con">
        <tabList
          :deviation="-35"
          :list="info.catalogRoot"
          @clickItem="
            (item) => {
              taboneActive = item;
            }
          "
          :active="taboneActive"
          :id="'rand'"
          @addGroup="hadnleAddGroup"
          :subId="'rand1'"
        >
          <template slot="hover" slot-scope="{ item }">
            <ul>
              <li @click="$emit('addGroup', { type: 1, oper: 'edit', item })">
                重命名
              </li>
              <li
                @click="
                  $emit('addGroup', {
                    type: 2,
                    oper: 'add',
                    item: { parentId: item.id },
                  })
                "
              >
                创建二级分组
              </li>
              <li @click="del(item, 'one')">删除</li>
            </ul>
          </template>
        </tabList>

        <tabList
          :deviation="-35"
          v-if="childTab.length > 1"
          :list="childTab"
          @clickItem="
            (item) => {
              tabtowActive = item;
            }
          "
          :active="tabtowActive"
          :id="'subrand'"
          @addGroup="
            $emit('addGroup', {
              type: 2,
              oper: 'add',
              item: { parentId: taboneActive.id },
            })
          "
          :subId="'subrand1'"
        >
          <template slot="hover" slot-scope="{ item }">
            <ul @mouseover.prevent @mouseleave.prevent>
              <li @click="$emit('addGroup', { type: 2, oper: 'edit', item })">
                重命名
              </li>
              <li @click="del(item, 'two')">删除</li>
            </ul>
          </template>
        </tabList>

        <template v-if="scenes.length > 0">
          <draggable
            tag="ul"
            v-model="scenes"
            animation="300"
            @sort="uploadListSort"
          >
            <li v-for="(item, i) in scenes" :key="i">
              <div class="typeli">
                <i
                  class="iconfont iconedit_type_3d"
                  :class="{iconedit_type_panorama: item.type !== '4dkk' }"
                ></i>
              </div>
              <div class="img">
                <img :src="$cdn + item.icon +`?${Math.random()}`" alt="" />
              </div>
              <div class="oper">
                <i class="iconfont iconedit_list_more"></i>
                <ul>
                  <li @click="$emit('rename', item)">重命名</li>
                  <li @click="delPano(item)">删除</li>
                </ul>
              </div>
              <div class="ui-title">
                <span :title="item.sceneTitle">{{
                 item.sceneTitle
                }}</span>
              </div>
            </li>
          </draggable>
        </template>
        <div class="no-record" v-else>
          <i class="iconfont iconedit_list_default"></i>
          <p>暂无全景图或三维场景，可点击下方按钮进行添加</p>
        </div>
        <div class="add-btn">
          <button class="ui-button submit" @click="$emit('addPano')">
            选择全景图
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tabList from "@/components/tablist";
import browser from "@/utils/browser";

import draggable from "vuedraggable";
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters({
      vrlist: "vrlist",
      info: "info",
    }),
    oneWidth() {
      let tmp = $("#tablist").width();
      return tmp;
    },
    menuWidth() {
      let tmp = $("#menucon").width();
      return tmp;
    },
  },
  data() {
    return {
      taboneActive: { children: [] },
      tabtowActive: "",
      childTab: [],
      scenes: [],
      interval: null,
      list: [],
      isLongPolling: false,
      oneLeft: 0,
      loadList: true,
    };
  },
  watch: {
    "info.scenes": {
      deep: true,
      handler: function (newVal) {
        let arr = newVal.filter((item) => {
          return this.tabtowActive.id == item.category;
        });
        this.scenes = arr.sort((a,b)=>a.weight-b.weight)
      },
    },
    "info.catalogs": {
      deep: true,
      handler: function (newVal) {
        let temp = [];
        this.childTab = [];
        let id = this.taboneActive.id;
        let oneActive = this.info.catalogRoot.find((item) => item.id == id);
        if (!oneActive) {
          oneActive = this.info.catalogRoot[0]
          this.taboneActive = this.info.catalogRoot[0]
        }
        oneActive.children &&
          oneActive.children.forEach((item) => {
            newVal.forEach((sub) => {
              if (item == sub.id) {
                temp.push(sub);
              }
            });
          });
        this.childTab = temp;
      },
    },
    taboneActive: {
      immediate: true,
      deep: true,
      handler: function (newVal, oldVal) {
        if (!newVal.id) {
          this.taboneActive = this.info.catalogRoot[0];
        }
        let temp = [];
        newVal.children &&
          newVal.children.forEach((item) => {
            this.info.catalogs.forEach((sub) => {
              if (item == sub.id) {
                temp.push(sub);
              }
            });
          });
        this.childTab = temp;
        if (this.childTab.length == 1 || newVal != oldVal) {
          this.tabtowActive = this.childTab[0];
        }
      },
    },
    tabtowActive: {
      immediate: true,
      handler: function (newVal) {
        if (!newVal) {
          this.tabtowActive = this.childTab[0];
        } else {
          this.$emit("catalog", newVal);
          let arr = this.info.scenes.filter((item) => {
            return newVal.id == item.category;
          });
          this.scenes = arr.sort((a,b)=>a.weight-b.weight)
        }
      },
    },
  },

  methods: {

    hadnleAddGroup() {
      this.$emit("addGroup", { type: 1, oper: "add", item: {} });
    },
    
    uploadListSort() {
      this.scenes.forEach((item, i) => {
        item.weight = i+1
      });

      this.info.scenes.forEach((item)=>{
        this.scenes.forEach((sub, idx) => {
          sub.weight = idx+1
          if (item.sceneCode == sub.sceneCode) {
            item = sub
          }
        });
      })

      this.$store.commit("SetInfo", this.info);
    },

    delTree(data, type) {
      let fn = (ele) => {
        let tmp = [];
        this.info.catalogs.forEach((sub, i) => {
          if (ele == sub.id) {
            this.info.scenes.forEach((item) => {
              if (sub.id != item.category) {
                tmp.push(item);
              }
            });
            this.info.scenes = tmp;
            this.info.catalogs.splice(i, 1);
          }
        });
      };
      if (type == "one") {
        data.children.forEach((ele) => {
          fn(ele);
        });
        let idx = this.info.catalogRoot.findIndex((item) => item.id == data.id);
        this.info.catalogRoot.splice(idx, 1);
        this.taboneActive = this.info.catalogRoot[0];
      }

      if (type == "two") {
        let id = this.taboneActive.id;
        let oneActive = this.info.catalogRoot.find((item) => item.id == id);
        let idx = oneActive.children.findIndex((item) => item == data.id);
        oneActive.children.splice(idx, 1);
        fn(data.id);

        let temp = browser.CloneObject(this.taboneActive);
        this.taboneActive = "";
        this.taboneActive = temp;
      }


      this.delFirstScene()
      this.$bus.emit('scenesChange')
      this.$store.commit("SetInfo", this.info);
    },

    delFirstScene(){
        if (this.info.firstScene) {
          let firIdx = this.info.scenes.find(item=>{
            return item.sceneCode == this.info.firstScene.sceneCode
          });
          !firIdx&&(this.info.firstScene='')
        }
    },

    del(data, type) {
      if (this.info.catalogRoot.length <= 1 && type == "one") {
        return this.$alert({
          content: "请至少保留一个分组",
          ok: () => {
            return;
          },
        });
      }

      this.$confirm({
        content: `分组“${data.name}”下所有${
          type == "one" ? "二级分组和" : ""
        }(场景/全景图)也都将会被删除，是否删除？`,
        ok: () => {
          this.delTree(data, type);
          this.$msg.success("删除成功")
        },
      });
    },
    delPano(item) {
      this.$confirm({
        content: `${item.type=='4dkk'?'场景':'全景图'}“${item.sceneTitle}”下所有设置也都将会被删除，是否删除？`,
        ok: () => {
          let idx = this.info.scenes.findIndex(ele=>ele.sceneCode==item.sceneCode)
          this.info.scenes.splice(idx,1)
          this.delFirstScene()
          this.$store.commit("SetInfo", this.info);
          this.$bus.emit('scenesChange')
          this.$msg.success("删除成功")
        },
      });
    },
  },

  mounted() {
    this.$bus.on('getActive',data=>{
      if (data.type == 1) {
        this.taboneActive = data.willActive
      } else{
        this.tabtowActive = data.willActive
      }
    })
  },
  components: {
    draggable,
    tabList,
  },
};
</script>
<style lang="less" scoped>
.tips {
  width: 100%;
  .ui-remark {
    margin-bottom: 10px;
  }
}
.no-record {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  > i {
    font-size: 40px;
  }
  > p {
    margin-top: 10px;
  }
}
.pano-label {
  .pano-con {
    padding: 20px 30px;
    height: calc(100vh - 250px);
    .menu-con {
      position: relative;
      > .iconfont {
        left: -20px;
        top: 8px;
        position: absolute;
        cursor: pointer;
      }
      > .icon_forward {
        right: 40px;
        left: auto;
      }
      .sub-menu {
        max-width: calc(100% - 70px);
        position: relative;
        overflow: hidden;
        height: 40px;

        > ul {
          max-width: unset;
          overflow: unset;
          position: absolute;
          left: 0;
          transition: 0.3s ease all;
          .fixed {
            position: absolute;
            right: 0;
          }
          // &::before{
          //   width: calc(100% - 70px);
          //   height: calc(100% - 10px);
          //   pointer-events: none;
          //   content: '';
          //   background: linear-gradient(to right,rgba(#fff,0) 0%,rgba(#fff,0) 98%,rgba(#000,1) 100%);
          //   position: absolute;
          //   top: 0;
          //   left: 0;
          //   z-index: 999;
          //   display: inline-block;
          // }
        }
      }
    }

    > ul {
      max-height: calc(100% - 82px);
      overflow-y: auto;
      position: relative;
      left: -2px;
      > li {
        margin: 10px 20px 30px 0;
      }
    }
    .add-btn {
      z-index: 20;
      .ui-button {
        margin: 0 5px;
      }
    }
  }
}
</style>
