<template>
  <uni-popup ref="deviceListPopup" type="bottom" :safe-area="false">
    <view class="device-list-popup">
      <!-- 顶部标题栏 -->
      <view class="popup-header">
        <text class="popup-title">设备列表</text>
        <view class="popup-close" @click="close">
          <uni-icons type="close" size="20" color="#666" />
        </view>
      </view>

      <!-- 设备列表内容 -->
      <scroll-view
        class="device-list-content"
        scroll-y
        @scrolltolower="onScrollToLower"
      >
        <!-- 顶部工具栏：总数 + 搜索条件 + 刷新 -->
        <view class="device-toolbar">
          <text class="toolbar-total">{{ filteredDeviceList.length }}台</text>

          <view class="toolbar-filters">
            <!-- 状态筛选 -->
            <picker
              class="status-picker"
              mode="selector"
              :range="statusOptions"
              :value="statusIndex"
              @change="onStatusChange"
            >
              <view class="status-picker-inner">
                <text class="status-label">状态</text>
                <text class="status-value">{{ statusOptions[statusIndex] }}</text>
                <uni-icons type="down" size="14" color="#999" />
              </view>
            </picker>

            <!-- 设备编号 -->
            <input
              class="toolbar-input"
              v-model="queryDeviceCode"
              placeholder="设备编号"
              placeholder-style="color:#B0B0B0"
              confirm-type="search"
              @confirm="onSearch"
            />

            <!-- 电话 -->
            <input
              class="toolbar-input"
              v-model="queryPhone"
              placeholder="电话"
              placeholder-style="color:#B0B0B0"
              confirm-type="search"
              @confirm="onSearch"
            />
          </view>

          <view class="toolbar-actions">
            <view class="toolbar-btn" @click="onRefresh">
              <uni-icons type="refresh" size="18" color="#2A68FF" />
              <text>刷新</text>
            </view>
          </view>
        </view>

        <!-- 设备卡片列表 -->
        <view
          class="device-card"
          v-for="(item, index) in filteredDeviceList"
          :key="item.id || index"
        >
          <view class="card-header">
            <text class="device-code">{{ item.deviceCode || '未填写设备编号' }}</text>
            <view
              class="bind-tag"
              :class="item.bindStatus ? 'bind-tag--on' : 'bind-tag--off'"
            >
              <text>{{ item.bindStatus ? '已绑定' : '未绑定' }}</text>
            </view>
          </view>

          <view class="card-body">
            <view class="card-row">
              <text class="card-label">家长电话</text>
              <text class="card-value">{{ item.salesPhone || '-' }}</text>
            </view>
            <view class="card-row">
              <text class="card-label">所属门店</text>
              <text class="card-value">{{ item.dealershipName || '-' }}</text>
            </view>
            <view class="card-row">
              <text class="card-label">创建时间</text>
              <text class="card-value">{{ item.createTime || '-' }}</text>
            </view>
          </view>
        </view>

        <!-- 空状态 -->
        <view v-if="!loading && deviceList.length === 0" class="empty-box">
          <text class="empty-text">暂无设备记录</text>
        </view>

        <!-- 底部加载/无更多提示 -->
        <view v-if="deviceList.length > 0" class="empty-box">
          <text class="empty-text" v-if="loading">加载中...</text>
          <text class="empty-text" v-else-if="noMore">没有更多了</text>
        </view>
      </scroll-view>
    </view>
  </uni-popup>
</template>

<script>
import { get } from '@/common/request.js';

export default {
  name: 'DeviceListPopup',
  data() {
    return {
      statusOptions: ['全部状态', '已绑定', '未绑定'],
      statusIndex: 0,
      queryDeviceCode: '',
      queryPhone: '',
      deviceList: [],
      page: {
        current: 1,
        size: 10,
      },
      loading: false,
      total: 0,
      noMore: false,
    };
  },
  computed: {
    // 根据筛选条件过滤设备列表
    filteredDeviceList() {
      return this.deviceList.filter((item) => {
        // 状态筛选
        if (this.statusIndex === 1 && !item.bindStatus) return false; // 只看已绑定
        if (this.statusIndex === 2 && item.bindStatus) return false; // 只看未绑定

        // 设备编号模糊匹配
        if (
          this.queryDeviceCode &&
          !(item.deviceCode || '').includes(this.queryDeviceCode.trim())
        ) {
          return false;
        }

        // 电话模糊匹配
        if (
          this.queryPhone &&
          !(item.salesPhone || '').includes(this.queryPhone.trim())
        ) {
          return false;
        }

        return true;
      });
    },
  },
  methods: {
    /**
     * 打开设备列表弹窗
     */
    open() {
      if (this.$refs.deviceListPopup) {
        this.$refs.deviceListPopup.open();
        // 打开时重新加载数据
        this.fetchDeviceList(true);
      }
    },
    /**
     * 关闭设备列表弹窗
     */
    close() {
      if (this.$refs.deviceListPopup) {
        this.$refs.deviceListPopup.close();
      }
    },
    // 将 LocalDateTime 字符串格式化为 YYYY-MM-DD HH:mm:ss
    formatDateTime(value) {
      if (!value) return '-';
      try {
        const date = new Date(value);
        if (Number.isNaN(date.getTime())) return value;
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      } catch (e) {
        console.warn('格式化时间失败:', e, value);
        return value;
      }
    },
    buildQueryParams() {
      const params = {
        current: this.page.current,
        size: this.page.size,
      };

      const trimmedDeviceCode = this.queryDeviceCode && this.queryDeviceCode.trim();
      const trimmedPhone = this.queryPhone && this.queryPhone.trim();

      if (trimmedDeviceCode) {
        params.deviceCode = trimmedDeviceCode;
      }
      if (trimmedPhone) {
        params.salesPhone = trimmedPhone;
      }

      // 绑定状态：0=全部，1=已绑定(true)，2=未绑定(false)
      if (this.statusIndex === 1) {
        params.bindStatus = true;
      } else if (this.statusIndex === 2) {
        params.bindStatus = false;
      }

      // 目前门店筛选暂未在前端提供控件，如后续有需求可在此添加 dealershipId

      return params;
    },
    async fetchDeviceList(reset = false) {
      if (this.loading) return;
      this.loading = true;

      if (reset) {
        this.page.current = 1;
        this.noMore = false;
      }

      try {
        const queryParams = this.buildQueryParams();
        const res = await get('/api/deviceManagement/list', queryParams);

        if (res.statusCode === 200 && res.data && res.data.success) {
          const records = Array.isArray(res.data.data) ? res.data.data : [];
          const mapped = records.map((item) => ({
            id: item.id,
            deviceCode: item.deviceCode,
            salesPhone: item.salesPhone,
            dealershipName: item.dealershipName,
            bindStatus: item.bindStatus,
            createTime: this.formatDateTime(item.createTime),
          }));

          if (reset) {
            this.deviceList = mapped;
          } else {
            this.deviceList = [...this.deviceList, ...mapped];
          }

          // 保存分页信息
          if (typeof res.data.current === 'number') {
            this.page.current = res.data.current;
          }
          if (typeof res.data.size === 'number') {
            this.page.size = res.data.size;
          }
          if (typeof res.data.total === 'number') {
            this.total = res.data.total;
          }

          // 判断是否还有更多数据
          const pages =
            typeof res.data.pages === 'number'
              ? res.data.pages
              : Math.ceil((this.total || 0) / this.page.size);
          this.noMore = pages > 0 && this.page.current >= pages;
        } else {
          this.deviceList = [];
          uni.showToast({
            title: (res.data && res.data.message) || '获取设备列表失败',
            icon: 'none',
          });
        }
      } catch (error) {
        console.error('获取设备列表失败:', error);
        if (reset) {
          this.deviceList = [];
        }
        let msg = '获取设备列表失败，请稍后重试';
        if (error.errMsg && error.errMsg.includes('timeout')) {
          msg = '请求超时，请检查网络后重试';
        }
        uni.showToast({
          title: msg,
          icon: 'none',
        });
      } finally {
        this.loading = false;
      }
    },
    // 滚动到底部时加载更多
    onScrollToLower() {
      if (this.loading || this.noMore) return;
      // 下一页
      this.page.current += 1;
      this.fetchDeviceList(false);
    },
    onStatusChange(e) {
      this.statusIndex = Number(e.detail.value || 0);
      this.onSearch();
    },
    onSearch() {
      // 根据筛选条件重新从后端分页接口拉取列表
      this.fetchDeviceList(true);
    },
    async onRefresh() {
      await this.fetchDeviceList(true);
      uni.showToast({
        title: '刷新成功',
        icon: 'none',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.device-list-popup {
  background-color: #f5f5f5;
  border-radius: 24rpx 24rpx 0 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 24rpx 24rpx 0 0;
}

.popup-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.popup-close {
  padding: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-list-content {
  flex: 1;
  padding: 16rpx;
  box-sizing: border-box;
}

.device-toolbar {
  display: flex;
  align-items: center;
  padding: 12rpx 12rpx;
  margin-bottom: 24rpx;
  background-color: #f8f8fa;
  border-radius: 8rpx;
  border: 1px solid #efeff2;
}

.toolbar-total {
  font-size: 24rpx;
  color: #666;
  margin-right: 12rpx;
  flex-shrink: 0;
}

.toolbar-filters {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8rpx;
  overflow: hidden;
}

.status-picker {
  flex-shrink: 0;
}

.status-picker-inner {
  flex-direction: row;
  display: flex;
  align-items: center;
  padding: 0 12rpx;
  height: 56rpx;
  border-radius: 999rpx;
  background-color: #ffffff;
  border: 1px solid #d6e3ff;
}

.status-label {
  font-size: 24rpx;
  color: #666;
  margin-right: 6rpx;
}

.status-value {
  font-size: 24rpx;
  color: #333;
  margin-right: 4rpx;
}

.toolbar-input {
  flex: 1;
  min-width: 120rpx;
  height: 56rpx;
  line-height: 56rpx;
  background-color: #f5f6fa;
  border-radius: 8rpx;
  padding: 0 12rpx;
  font-size: 24rpx;
  box-sizing: border-box;
}

.toolbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.toolbar-btn {
  display: flex;
  align-items: center;
  padding: 0 16rpx;
  height: 56rpx;
  border-radius: 28rpx;
  background-color: #ffffff;
  border: 1px solid #d6e3ff;
}

.toolbar-btn text {
  margin-left: 6rpx;
  font-size: 24rpx;
  color: #2a68ff;
}

.device-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx 24rpx 20rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.device-code {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}

.bind-tag {
  min-width: 104rpx;
  padding: 6rpx 16rpx;
  border-radius: 999rpx;
  font-size: 22rpx;
  text-align: center;
}

.bind-tag--on {
  background-color: #e6f6ec;
  color: #2e7d32;
}

.bind-tag--off {
  background-color: #fff4e5;
  color: #ff9800;
}

.card-body {
  border-top: 1px solid #f0f0f0;
  padding-top: 16rpx;
}

.card-row {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.card-label {
  width: 160rpx;
  font-size: 24rpx;
  color: #999;
}

.card-value {
  font-size: 26rpx;
  color: #333;
}

.empty-box {
  padding: 80rpx 0;
  text-align: center;
}

.empty-text {
  font-size: 26rpx;
  color: #999;
}
</style>

