<template>
  <view class="container">
    <view class="index-image" style="position: absolute; top: -30px; right: 30rpx;z-index: 999;">
        <img src="/static/images/history.png" mode="aspectFill" width="100%" height="100%" @click="toHistory"/>
    </view>
    <uni-card>
        <view class="uni-list-cell">
            <view class="uni-list-cell-left">
                物业名称<text class="require">*</text>
            </view>
            <view class="uni-list-cell-db">
                <input
                class="uni-input"
                v-model="addForm.building_name"
                maxlength="50"
                placeholder="请输入，最多50字"
                @input="handleBuildingNameInput"
                />
                <div
                v-show="estateOptions.length > 0"
                class="property-dropdown border-1px"
                >
                <div v-if="estateLoading" class="loading-indicator">
                    <i class="el-icon-loading"></i> 加载中...
                </div>
                <ul v-else>
                    <li
                    v-for="estate in estateOptions"
                    :key="estate.lp_id"
                    @click="selectEstate(estate, index)"
                    class="property-option"
                    >
                    <div
                        :content="estate.loupan_name"
                        placement="top"
                        :open-delay="0"
                    >
                        <span>{{ estate.loupan_name }}</span>
                    </div>
                    </li>
                </ul>
                </div>
            </view>
        </view>
        <view class="uni-list-cell">
            <view class="uni-list-cell-left">
                栋号<text class="require">*</text>
            </view>
            <view class="uni-list-cell-db">
                <input
                class="uni-input"
                v-model="addForm.building_no"
                maxlength="15"
                placeholder="请输入"
                @input="handleBuildingInput(index)"
                />
                <div
                v-show="buildingOptions.length > 0"
                class="property-dropdown"
                >
                <div v-if="buildingLoading" class="loading-indicator">
                    <i class="el-icon-loading"></i> 加载中...
                </div>
                <ul v-else>
                    <li
                    v-for="building in buildingOptions"
                    :key="building.b_id"
                    @click="selectBuilding(building, index)"
                    class="property-option"
                    >
                    <div
                        :content="building.building_name"
                        placement="top"
                        :open-delay="0"
                    >
                        <span>{{ building.building_name }}</span>
                    </div>
                    </li>
                </ul>
                </div>
            </view>
        </view>
        <view class="uni-list-cell">
            <view class="uni-list-cell-left">
                房号<text class="require">*</text>
            </view>
            <view class="uni-list-cell-db">
                <input
                class="uni-input"
                v-model="addForm.unit_no"
                maxlength="15"
                placeholder="请输入"
                @input="handleUnitNoInput($event, index)"
                />
                <div
                v-show="unitOptions.length > 0"
                class="property-dropdown"
                >
                <div v-if="unitLoading" class="loading-indicator">
                    <i class="el-icon-loading"></i> 加载中...
                </div>
                <ul v-else>
                    <li
                    v-for="unit in unitOptions"
                    :key="unit.h_id"
                    @click="selectUnit(unit, index)"
                    class="property-option"
                    >
                    <div
                        :content="unit.house_number"
                        placement="top"
                        :open-delay="0"
                    >
                        <span>{{ unit.house_number }}</span>
                    </div>
                    </li>
                </ul>
                </div>
            </view>
        </view>
        <view class="uni-list-cell">
            <view class="uni-list-cell-left">
                建筑面积（m²）<text class="require">*</text>
            </view>
            <view class="uni-list-cell-db">
                <input
                class="uni-input"
                style="box-sizing: border-box; height: 100%"
                v-model="addForm.size"
                placeholder="请输入"
                />
            </view>
        </view>
        <view class="uni-list-button">
            <button
                :loading="loading"
                open-type=""
                hover-class="button-hover"
                style="color:#00CC66; background-color: #fff; border: 1px solid #00CC66"
                @click="submitForm"
            >
                提交
            </button>  
        </view> 
        <view class="uni-list-mobile" @click="toMobile">
            试试人工评房
        </view>
    </uni-card>
  </view>
</template>
 
<script>
import {
  getEstateListByName,
  getBuildingListByBName,
  getPropertyListByBid,
  autoInquiry
} from "api/inquiry/inquiry";

export default {
  name: "Index",
  components: {
  },
  data() {
    return {
        loading: false,
        estateOptions: [],
        estateLoading: false,
        buildingOptions: [],
        buildingLoading: false,
        unitOptions: [],
        unitLoading: false,
        addForm: {
            building_name: "",
            building_no: "",
            unit_no: "",
            size: "",
        }
    }
  },
  methods: {
    handleBuildingNameInput(item) {
      this.estateOptions = [];
      this.buildingOptions = [];
      const value = item.detail.value;
      if (!value) {
        this.estateOptions = [];
        return;
      }

      this.estateLoading = true;
      // 使用正确的API获取物业数据
      getEstateListByName({ name: value })
        .then((res) => {
          this.estateLoading = false;
          if (res.code === 1 && res.data && res.data.length > 0) {
            this.estateOptions = res.data;
          } else {
            this.estateOptions = [];
          }
        })
        .catch(() => {
          this.estateLoading = false;
          this.estateOptions = [];
        });
    },
    selectEstate(estate, index) {
      this.addForm.building_name = estate.loupan_name;
      this.addForm.lp_id = estate.lp_id;

      // 清空其他字段
      this.addForm.building_no = "";
      this.addForm.unit_no = "";
      // 获取栋号列表
      this.estateOptions = [];
      //获取栋号列表
      this.handleBuildingInput(index);
    },
    handleBuildingInput(index) {
      const estate = this.addForm;
      if (estate && estate.building_name) {
        this.buildingLoading = true;
        getBuildingListByBName({
          bname: estate.building_no,
          lpid: estate.lp_id,
        })
          .then((res) => {
            // 添加 500ms 延迟
            setTimeout(() => {
              this.buildingLoading = false;
              if (res.code === 1 && res.data && res.data.length > 0) {
                this.buildingOptions = res.data;
              } else {
                this.buildingOptions = [];
              }
            }, 500); // 延迟 500 毫秒
          })
          .catch(() => {
            this.buildingLoading = false;
            this.buildingOptions = [];
          });
      }
    },
    selectBuilding(building, index) {
      this.addForm.building_no = building.building_name;
      this.addForm.b_id = building.b_id;

      this.buildingOptions = [];
    },
    handleUnitNoInput(value, index) {
      console.log("value", value);
      if (!value.detail.value) {
        this.unitOptions = [];
        return;
      }
      this.unitLoading = true;
      let item = this.addForm;
      // 添加 500ms 延迟
      getPropertyListByBid({ bid: item.b_id, hno: item.unit_no })
        .then((res) => {
          setTimeout(() => {
            this.unitLoading = false;
            if (res.code === 1 && res.data && res.data.length > 0) {
              this.unitOptions = res.data;
            } else {
              this.unitOptions = [];
            }
          }, 500); // 延迟 500 毫秒
        })
        .catch(() => {
          this.unitLoading = false;
          this.unitOptions = [];
        });
    },
    selectUnit(unit, index) {
      this.addForm.unit_no = unit.house_number;
      this.unitOptions = [];
    },
    submitForm() {
      this.loading = true;
      autoInquiry(this.addForm)
        .then((res) => {
          this.loading = false;
          if (res.code === 1) {
            this.$tab.navigateTo("/pages/automatic/detail?info=" + encodeURIComponent(JSON.stringify(res.data)));
            console.log("res",res.data);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    toMobile() {
        uni.makePhoneCall({
	        phoneNumber: '075583279666', //仅为示例
	        success: function () {
	            console.log('拨打电话成功');
	        },
	        fail: function () {
	            console.log('拨打电话失败');
	        }
        });
    },
    toHistory() {
        this.$tab.navigateTo("/pages/automatic/list");
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 93vh;
  background-color: #fff;
}

/* 将 mask 缩小到一行 */
.uni-popup-mask {
  height: 1px;
}
/* 将 mask 演示为浅蓝色 */
.uni-popup-mask::before {
  background-color: #e6f1ff;
}
.uni-list-cell {
  line-height: 90rpx;
  display: flex;
  align-items: center;
}
.uni-input {
  height: 50rpx;
  padding: 0rpx 25rpx;
  line-height: 30rpx;
  font-size: 28rpx;
  text-align: right;
}
.property-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    z-index: 2000;
    margin-top: 5px;
}
.uni-file-picker{
    margin-top: 40rpx;
}
.require {
  color: RED;
}
.uni-list-button{
    margin-top: 40rpx;
}
.uni-list-mobile{
    margin-top: 40rpx;
    text-align: center;
}
.index-image{
    width: 40rpx;
    height: 40rpx;
}
</style>