<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search-container">
      <u-search
        v-model="searchPhone"
        placeholder="请输入手机号"
        :show-action="false"
        :clearabled="true"
        bg-color="#fff"
        shape="square"
        @search="handleSearch"
        @clear="handleClear"
      >
        <template v-slot:prefix>
          <u-icon name="search" size="16" color="#999"></u-icon>
        </template>
      </u-search>
    </view>

    <!-- 预约列表 -->
    <view class="appointment-list">
      <scroll-view scroll-y="true">
        <view
          class="appointment-card"
          v-for="item in filteredAppointmentList"
          :key="item.id"
        >
          <!-- 卡片头部 -->
          <view class="card-header">
            <u-icon name="home" size="16" color="#08B3B3"></u-icon>
            <text class="community-info"
              >{{ item.community }} | {{ item.houseType }}</text
            >
          </view>

          <!-- 卡片内容 -->
          <view class="card-content">
            <view class="info-row">
              <text class="label">预约人：</text>
              <text class="value">{{ item.appointee }}</text>
            </view>
            <view class="info-row">
              <text class="label">预约人电话：</text>
              <text class="value">{{ item.phone }}</text>
            </view>
            <view class="info-row">
              <text class="label">预约时间：</text>
              <text class="value">{{ item.appointmentTime }}</text>
            </view>
          </view>

          <!-- 操作按钮 -->
          <view class="actionButtons">
            <button class="btn process" @click="handleViewHouse(item)">
              看房登记
            </button>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 空状态 -->
    <u-empty
      v-if="filteredAppointmentList.length === 0 && !loading"
      text="暂无预约信息"
      mode="list"
    ></u-empty>

    <!-- 加载状态 -->
    <u-loading-page
      v-if="loading"
      :loading="true"
      text="加载中..."
    ></u-loading-page>

    <!-- 看房登记弹框 -->
    <u-popup
      :show="showRegisterPopup"
      mode="center"
      :round="16"
      @close="handleClosePopup"
      bgColor="transparent"
    >
      <view class="register-popup" @click="showStatusDropdown = false">
        <view class="popup-close" @click.stop="handleClosePopup">
          <u-icon
            name="/static/img/close-circle.png"
            size="22"
            color="#666"
          ></u-icon>
        </view>
        <view class="popup-title" style="letter-spacing: 1rpx">看房登记</view>

        <view class="form-container">
          <!-- 看房状态 -->
          <view class="form-item">
            <text class="required">*</text>
            <text class="form-label"> 看房状态 </text>
            <view class="dropdown" @click.stop="toggleStatusDropdown">
              <u-input
                v-model="viewingStatusText"
                placeholder="请选择看房状态"
                :disabled="true"
                :border="true"
                shape="round"
                :custom-style="{ backgroundColor: '#fff' }"
              >
                <template v-slot:suffix>
                  <u-icon
                    :class="{ 'arrow-open': showStatusDropdown }"
                    name="arrow-down"
                    size="14"
                    color="#999"
                  ></u-icon>
                </template>
              </u-input>
              <view v-if="showStatusDropdown" class="dropdown-list">
                <view
                  v-for="opt in statusColumns"
                  :key="opt.value"
                  class="dropdown-item"
                  @click.stop="selectStatus(opt)"
                >
                  {{ opt.text }}
                </view>
              </view>
            </view>
          </view>

          <!-- 看房说明 -->
          <view class="form-item" style="flex-direction: column">
            <text class="form-label">看房说明</text>
            <u-textarea
              v-model="viewingDescription"
              placeholder="请输入看房说明"
              :border="true"
              shape="round"
              :custom-style="{ backgroundColor: '#fff' }"
              :maxlength="200"
              :count="true"
            ></u-textarea>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="popup-actions">
          <u-button
            type="default"
            plain
            :custom-style="{
              background: '#ffffff',
              color: '#B0B0B0',
              borderColor: '#D7D7D7',
              height: '35px',
            }"
            shape="circle"
            @click="handleCancel"
          >
            取消
          </u-button>
          <u-button
            type="primary"
            :custom-style="{
              background: '#22C1C3',
              color: '#ffffff',
              borderColor: '#22C1C3',
              height: '35px',
            }"
            shape="circle"
            @click="handleConfirm"
          >
            确定
          </u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchPhone: "", // 搜索手机号
      loading: false, // 加载状态
      appointmentList: [
        {
          id: 1,
          community: "西海岸路乐业社区",
          houseType: "三居室",
          appointee: "杨斌",
          phone: "13362000010",
          appointmentTime: "2025-08-06 上午09:00-12:00",
          idCard: "370832199606062001",
        },
        {
          id: 2,
          community: "西海岸路乐业社区",
          houseType: "三居室",
          appointee: "曲曼",
          phone: "17700020202",
          appointmentTime: "2025-08-06 上午09:00-12:00",
          idCard: "370832199606062002",
        },
      ],
      showRegisterPopup: false, // 看房登记弹框显示状态
      currentAppointment: {}, // 当前选中的预约信息
      viewingStatus: "1", // 看房状态 (1: 已看房, 2: 未看房)
      viewingStatusText: "已看房", // 看房状态文本
      viewingDescription: "", // 看房说明
      showStatusDropdown: false, // 看房状态下拉
      statusColumns: [
        {
          text: "已看房",
          value: "1",
        },
      ],
    };
  },
  computed: {
    // 过滤后的预约列表
    filteredAppointmentList() {
      if (!this.searchPhone) {
        return this.appointmentList;
      }
      return this.appointmentList.filter(
        (item) =>
          item.phone.includes(this.searchPhone) ||
          item.appointee.includes(this.searchPhone)
      );
    },
  },
  onLoad() {
    this.loadAppointmentList();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.loadAppointmentList();
  },
  // 上拉加载
  onReachBottom() {},
  methods: {
    // 加载预约列表
    loadAppointmentList() {
      this.loading = true;
      // 模拟API调用
      setTimeout(() => {
        this.loading = false;
        // 停止下拉刷新
        uni.stopPullDownRefresh();
      }, 1000);
    },

    // 搜索预约
    handleSearch(value) {
      console.log("搜索:", value);
      // 搜索逻辑通过computed属性自动处理
    },

    // 清空搜索
    handleClear() {
      this.searchPhone = "";
    },

    // 看房登记
    handleViewHouse(item) {
      this.currentAppointment = item;
      this.viewingStatus = item.viewingStatus || "1"; // 如果有已有的看房状态，则使用
      this.viewingStatusText =
        this.statusColumns.find((col) => col.value === this.viewingStatus)
          ?.text || "已看房";
      this.viewingDescription = item.viewingDescription || "";
      this.showRegisterPopup = true;
    },

    // 关闭弹框
    handleClosePopup() {
      this.showRegisterPopup = false;
      this.currentAppointment = {};
      this.viewingStatus = "1";
      this.viewingStatusText = "已看房";
      this.viewingDescription = "";
      this.showStatusDropdown = false;
    },

    // 内联下拉切换与选择
    toggleStatusDropdown() {
      this.showStatusDropdown = !this.showStatusDropdown;
    },
    selectStatus(opt) {
      this.viewingStatus = opt.value;
      this.viewingStatusText = opt.text;
      this.showStatusDropdown = false;
    },

    // 确定看房登记
    handleConfirm() {
      if (!this.viewingStatus) {
        uni.showToast({
          title: "请选择看房状态",
          icon: "none",
        });
        return;
      }
    },

    // 取消看房登记
    handleCancel() {
      this.handleClosePopup();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 20rpx;
}

.search-container {
  margin-bottom: 30rpx;
}

.appointment-list {
  .appointment-card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
    position: relative;
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
    }

    .card-header {
      display: flex;
      align-items: center;
      margin-bottom: 24rpx;

      .community-info {
        margin-left: 16rpx;
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
      }
    }

    .card-content {
      background: #fbfbfb;
      padding: 20rpx;

      .info-row {
        display: flex;
        margin-bottom: 16rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .label {
          color: #999;
          font-size: 28rpx;
          min-width: 160rpx;
          text-align: right;
        }

        .value {
          color: #333;
          font-size: 28rpx;
          flex: 1;
        }
      }
    }

    .actionButtons {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 20rpx;
      margin-left: auto;
      gap: 20rpx;
      width: fit-content;
    }

    .btn {
      height: 52rpx;
      line-height: 46rpx;
      border-radius: 52rpx;
      background-color: rgba(255, 255, 255, 1);
      color: rgba(8, 179, 179, 1);
      font-size: 28rpx;
      text-align: center;
      font-family: AlibabaPuHui-regular;
      border: 2rpx solid rgba(8, 179, 179, 1);
    }
  }
}

/* 看房登记弹框样式 */
.register-popup {
  width: 76%;
  padding: 36rpx 50rpx 32rpx;
  background: radial-gradient(
      110% 140% at 80% 0%,
      rgba(35, 217, 208, 0.35) 0%,
      rgba(35, 217, 208, 0.18) 22%,
      rgba(255, 255, 255, 0) 60%
    ),
    radial-gradient(
      120% 140% at 0% 100%,
      rgba(255, 173, 199, 0.28) 0%,
      rgba(255, 173, 199, 0.12) 28%,
      rgba(255, 255, 255, 0) 58%
    ),
    #ffffff;
  border-radius: 45rpx;
  box-shadow: 0 12rpx 28rpx rgba(0, 0, 0, 0.18);
  border: 1rpx solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  .popup-close {
    position: absolute;
    top: -35rpx;
    right: -48rpx;
  }

  .popup-title {
    font-size: 40rpx;
    font-weight: 700;
    color: #111;
    margin-bottom: 36rpx;
    text-align: center;
  }

  .form-container {
    width: 100%;
    margin-bottom: 32rpx;

    .appointment-info {
      background-color: #fafafa;
      border-radius: 16rpx;
      padding: 24rpx 30rpx;
      margin-bottom: 28rpx;
      border: 1rpx solid #efefef;
      box-shadow: none;

      .info-item {
        display: flex;
        margin-bottom: 16rpx;
        align-items: center;

        &:last-child {
          margin-bottom: 0;
        }

        .label {
          color: #6c757d;
          font-size: 28rpx;
          min-width: 200rpx;
          font-weight: 500;
        }

        .value {
          color: #495057;
          font-size: 28rpx;
          flex: 1;
          font-weight: 400;
        }
      }
    }

    .form-item {
      margin-bottom: 30rpx;
      display: flex;

      &:last-child {
        margin-bottom: 0;
      }
      .required {
        color: #ff0000;
        font-size: 28rpx;
        margin-top: 16rpx;
      }
      .form-label {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        margin-bottom: 16rpx;
        white-space: nowrap;
        margin-right: 20rpx;
      }
      .u-input,
      .u-textarea {
        background-color: #fff;
        border: 1rpx solid #e6e6e6;
        border-radius: 14rpx;
        padding: 20rpx;
        font-size: 28rpx;
        color: #333;
        min-height: 80rpx;
        transition: all 0.3s ease;

        &:focus {
          border-color: #08b3b3;
          box-shadow: 0 0 0 2rpx rgba(8, 179, 179, 0.1);
        }
      }

      .u-textarea {
        padding-top: 16rpx;
        min-height: 120rpx;
        resize: none;
      }

      /* 下拉样式 */
      .dropdown {
        position: relative;
      }
      .dropdown-list {
        position: absolute;
        top: calc(100% + 8rpx);
        left: 0;
        right: 0;
        background: #ffffff;
        border: 1rpx solid #e6e6e6;
        border-radius: 14rpx;
        box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
        z-index: 9;
        overflow: hidden;
      }
      .dropdown-item {
        padding: 22rpx 24rpx;
        font-size: 28rpx;
        color: #333;
      }
      .dropdown-item:active {
        background: #f6f7fb;
      }
      .arrow-open {
        transform: rotate(180deg);
        transition: transform 0.2s ease;
      }
    }
  }

  .popup-actions {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 36rpx;
    gap: 28rpx;

    .u-button {
      flex: 1;
      border-radius: 48rpx;
      font-size: 30rpx;
      height: 88rpx;
      line-height: 88rpx;
    }
  }
}
</style>
