<template>
  <div>
    <setting @select="handleSelectScene"></setting>
    <!-- <toolbar></toolbar> -->
    <div class="dialog" style="z-index: 2000" v-if="show">
      <Select
        :houseList="houseList"
        @updateList="updateHX"
        @cancle="show = false"
        :title="'选择VR模型'"
        :name="'table'"
        @changeCurrent="changeCurrent"
        :paging="paging"
        @submit="selectHX"
      >
      </Select>
    </div>
  </div>
</template>
<script>
import Setting from "./Setting";
import Select from "@/components/select";
import { getHouseList } from "@/api";

export default {
  name: "home",
  components: {
    Setting,
    Select,
  },
  mounted() {
    this.getHouseList();
  },
  watch: {
    show(newVal) {
      if (newVal) {
        this.searchKey = "";
        this.getHouseList();
      } else {
        this.activeWebsite = "";
      }
    },
    "paging.pageNum": function () {
      this.getHouseList();
    },
    activeWebsite: {
      deep: true,
      handler: function(newVal) {
        if (!newVal || !newVal.sceneCode) {
          return;
        }
        let tmp = "";
        this.list.forEach((item) => {
          if (!tmp) {
            tmp = item.arr.find((i) => {
              return newVal.sceneCode == i.sceneCode;
            });
          }
        });

        this.activeItem = tmp || this.activeItem;
      },
    },
  },
  data() {
    return {
      show: false,
      houseList: [],
      activeItem: "",
      searchKey: "",
      activeWebsite: "",
      paging: {
        pageSize: 8,
        pageNum: 1,
        total: 0,
        showSize: 8,
        current: 1,
      },
    };
  },
  methods: {
    updateHX(data) {
      this.searchKey = data;
      this.paging.pageNum = 1;
      this.getHouseList();
    },
    handleSelectScene(data) {
      this.activeWebsite = data;
      this.show = true;
    },
    changeCurrent(data) {
      console.log(data);
      this.paging.pageNum = data;
    },
    getHouseList() {
      getHouseList(
        {
          pageNum: this.paging.pageNum,
          pageSize: this.paging.pageSize,
          searchKey: this.searchKey,
        },
        (res) => {
          this.paging.pageNum = res.data.pageNum;
          this.paging.pageSize = res.data.pageSize;
          this.paging.total = res.data.total;
          this.houseList = res.data.list;
        }
      );
    },
    selectHX(data) {
      this.activeItem = data
      this.$bus.emit("selectUrl", this.activeItem);
      this.show = false;
    },
  },
};
</script>

<style lang="less" scoped>
.dialog {
  position: fixed;
  z-index: 30;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.pano-con {
  height: auto;
  background: none;
  padding: 10px 0;
  .ui-remark {
    padding-left: 10px;
  }
}
</style>
