<template>
  <div class="container">
    <div class="currentAdd">
      <div class="currentAdd_left">{{ city.region }}</div>
      <div class="currentAdd_right" @click="changeAddress">
        切换城市
        <image
          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_choseAddress.png"
        ></image>
      </div>
    </div>

    <div class="communityBox" v-if="step == 1">
      <div class="search">
        <input
          type="text"
          placeholder="请输入小区名称"
          v-model="communityName"
        />
        <image
          @click="searchByName"
          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
        ></image>
      </div>

      <!-- @click="chooseCommunity(item)" -->
      <div class="communityList">
        <div
          class="communityItem"
          v-for="item in communityList"
          :key="item.community_id"
          @click="nextStep(item)"
        >
          <div class="communityItem_left">
            <div class="communityItem_tit">{{ item.name }}</div>
            <div class="communityItem_address">{{ item.addr }}</div>
          </div>
          <div class="communityItem_right">
            <image
              src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communityMore.png"
            ></image>
          </div>
        </div>
      </div>

      <div class="empty" v-if="communityList.length == 0">
        <image
          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"
        ></image>
        <span>未找到相关信息的小区</span>
      </div>
    </div>

    <!-- <div class="communityBox" v-if="step == 2">
			<div class="search">
				<input type="text" placeholder="请输入楼栋名称">
				<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"></image>
			</div>

			<div class="floorList">
				<div @click="nextStep(item)" class="floorItem" v-for="(item,index) in foloorList" :key="index">
					{{item.label}}
				</div>
			</div>

			<div class="empty" v-if="!foloorList">
				<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"></image>
				<span>未找到相关信息的楼栋</span>
			</div>
		</div> -->

    <div class="communityBox" v-if="step == 2">
      <div class="search">
        <input v-model="searchQuery" type="text" placeholder="请输入楼栋名称" />
        <image
          @click="searchName"
          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
        ></image>
      </div>

      <div class="floorList">
        <div
          @click="nextStep(item, index)"
          :class="{ active: index === selectedFloorIndex }"
          class="floorItem"
          v-for="(item, index) in filteredFloorsList"
          :key="index"
        >
          {{ item.label }}
        </div>
      </div>

      <div class="empty" v-if="filteredFloorsList.length === 0">
        <image
          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"
        ></image>
        <span>未找到相关信息的楼栋</span>
      </div>
    </div>

    <div class="communityBox" v-if="step == 3">
      <div class="search">
        <input v-model="searchQuery" type="text" placeholder="请输入楼层名称" />
        <image
          @click="searchName"
          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
        ></image>
      </div>

      <div class="roomList">
        <!-- <div class="roomItem" v-for="(item,index) in 5" :class="index == 1?'active2':''"> -->
        <div
          @click="nextStep(item, index, 'room')"
          :class="{ active2: index === selectedRoomIndex }"
          class="roomItem"
          v-for="(item, index) in filteredFloorsList"
          :key="index"
        >
          {{ item.label }}
        </div>
      </div>

      <div class="empty" v-if="filteredFloorsList.length === 0">
        <image
          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"
        ></image>
        <span>未找到相关信息的楼层</span>
      </div>
    </div>

    <div class="communityBox" v-if="step == 4">
      <div class="search">
        <input v-model="searchQuery" type="text" placeholder="请输入房间名称" />
        <image
          @click="searchName"
          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
        ></image>
      </div>

      <div class="roomList">
        <!-- <div class="roomItem" v-for="(item,index) in 5" :class="index == 1?'active2':''"> -->
        <div
          @click="nextStep(item, index, 'room')"
          :class="{ active2: index === selectedRoomIndex }"
          class="roomItem"
          v-for="(item, index) in filteredFloorsList"
          :key="index"
        >
          {{ item.label }}
        </div>
      </div>

      <div class="empty" v-if="filteredFloorsList.length === 0">
        <image
          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"
        ></image>
        <span>未找到相关信息的房间</span>
      </div>
    </div>

    <areaPopup :show="show" @selectArea="selectArea" @close="close"></areaPopup>

    <div class="dialogBox" v-if="dialogBoxShow">
      <div class="dialogBoxCon">
        <div class="dialogBoxCon1">确认选择</div>
        <div class="dialogBoxCon2">{{ cName }}</div>
        <div class="dialogBoxCon3">{{ facilityName + fName + rName }}</div>
        <div class="dialogBoxConBtnList">
          <div class="dialogBoxConBtnItem1" @click="dialogBoxShow = false">
            取消
          </div>
          <div class="dialogBoxConBtnItem2" @click="confirmComm">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiArr } from "../../../api/community";
import {
  request,
  picUrl,
  uniqueByField,
  menuButtonInfo,
  NavgateTo,
} from "../../../utils";

export default {
  data() {
    return {
      selectedFloorIndex: -1,
      selectedRoomIndex: -1,
      show: false,
      step: "1",
      communityName: "",
      cName: "",
      fName: "",
      communityId: "",
      communityList: [],
      facilityName: "",
      // foloorList: [],
      // floorsList: [],
      rName: "",
      roomId: "",
      // roomList: [],
      page_num: 1,
      page_size: 10,
      dialogBoxShow: false,
      searchQuery: "",
      filteredFloorsList: [],
      searchList: [],
      city: uni.getStorageSync("location"),
      currentCommunity: "",
    };
  },
  methods: {
    changeAddress() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    selectArea(val) {
      console.log(val);
      this.city = {
        region: val.confirmDist.ad_name.split(",").join(""),
        ...val.confirmDist,
      };
      this.searchByName();
      this.show = false;
    },
    async searchByName() {
      console.log(this.communityName, "zzz");
      await request(apiArr.getAllList, "POST", {
        community_id: "",
        name: this.communityName,
        comm_code: "",
        ad_code: this.city.ad_code
          ? this.city.ad_code
          : uni.getStorageSync("ad_code"),
        page_num: this.page_num,
        page_size: this.page_size,
      }).then((res) => {
        console.log(res.rows);
        this.communityList = res.rows;
      });
    },
    async nextStep(item, index, type = "") {
      if (type === "room") {
        this.selectedRoomIndex = index;
      } else {
        this.selectedFloorIndex = index;
      }
      this.communityId = item.community_id
        ? item.community_id
        : this.communityId;
      this.facilityName = this.facilityName ? this.facilityName : item.label;
      this.fName =
        this.step == 4 ? this.fName : this.facilityName ? item.label : "";
      await request(apiArr.commRoomSelect, "POST", {
        community_ids: item.community_id ? item.community_id : this.communityId,
        facility_names: this.facilityName,
        floors: this.facilityName
          ? this.facilityName == this.fName
            ? ""
            : item.label
          : "",
      }).then((res) => {
        // 对楼层数据进行从大到小排序
          if(this.step != 4) {
            res.rows.sort((a, b) => {
              // 提取楼层数字
              const floorA = parseInt(a.label.replace(/[^\d]/g, ''));
              const floorB = parseInt(b.label.replace(/[^\d]/g, ''));
              return floorA - floorB;
            });
          }
          this.filteredFloorsList = this.step == 4 ? this.filteredFloorsList : res.rows;
        this.searchList = res.rows;
        this.searchQuery = "";
        if (this.step == "1") {
          this.step = "2";
          this.cName = item.name;
          // this.foloorList = res.rows
        } else if (this.step == "2") {
          this.step = "3";
          // this.floorsList = res.rows
        } else if (this.step == "3") {
          console.log(item.label);
          this.fName = item.label;
          // this.roomList = res.rows
          this.step = "4";
        } else {
          this.dialogBoxShow = true;
          this.rName = item.label;
          this.romId = item.value;
        }
      });
    },
    searchName() {
      // 根据输入框内容进行模糊查询
      this.filteredFloorsList = this.searchList.filter((item) =>
        item.label.includes(this.searchQuery)
      );
    },
    confirmComm() {
      const params = {
        changeVal: `${this.cName}${this.facilityName}${this.fName}${this.rName}`,
        community_id: this.communityId,
        room_id: this.romId,
      };
      console.log(params);
      // 手动创建查询字符串
      function createQueryString(params) {
        return Object.keys(params)
          .map(
            (key) =>
              `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`
          )
          .join("&");
      }

      // 拼接路径和参数
      const targetPath = "/packages/community/addCommunity/index";
      const queryString = createQueryString(params);
      const fullPath = `${targetPath}?${queryString}`;

      // 调用导航方法
      NavgateTo(fullPath);
    },

    //选择小区
    chooseCommunity(e) {
      this.currentCommunity = e;

      this.getRoomSelect();
    },
    //选择楼栋
    getRoomSelect() {
      request(apiArr.commRoomSelect, "POST", {
        community_ids: this.currentCommunity.community_id,
      }).then((res) => {
        console.log(res);
        this.step = 2;
      });
    },
  },

  onLoad(options) {
    const meun = menuButtonInfo();
    this.searchByName();
  },

  onReachBottom() {},
};
</script>

<style>
@import url("./index.css");
</style>
