<template>
  <view class="page">
    <base-background />
    <!-- 使用自定义导航栏组件 -->
    <custom-navbar title="添加牌位" />

    <view class="content">
      <!-- 扫码获取SN和MAC -->
      <view class="scan-section">
        <view class="section-title">设备信息</view>
        <view class="scan-container">
          <view class="scan-btn" @click="handleScanCode">
            <view class="qrcode-icon">
              <image
                mode="aspectFit"
                src="https://api.ccttiot.com/smartmeter/img/static/uy7BNwAMIKwvstqFnRhs"
              />
            </view>
            <view class="scan-text">扫码获取设备信息</view>
          </view>
        </view>

        <!-- 显示SN和MAC信息 -->
        <view v-if="deviceInfo.sn || deviceInfo.mac" class="device-info">
          <view v-if="deviceInfo.code" class="info-item">
            <view class="info-label">牌位编号：</view>
            <view class="info-value"
              >{{ deviceInfo.code }}(牌位已添加编号)
            </view>
          </view>
          <view v-if="deviceInfo.mac" class="info-item">
            <view class="info-label">mac：</view>
            <view class="info-value">{{ deviceInfo.mac }}</view>
          </view>
          <view v-if="deviceInfo.sn" class="info-item">
            <view class="info-label">sn：</view>
            <view class="info-value">{{ deviceInfo.sn }}</view>
          </view>
        </view>
      </view>

      <!-- 牌位信息表单 -->
      <view class="form-section">
        <view class="section-title">牌位信息</view>
        <view class="form-container">
          <!-- 牌位编号 -->
          <view class="form-item">
            <view class="label"
              >牌位编号
              <text class="required">*</text>
            </view>
            <input
              v-model="formData.code"
              class="input"
              maxlength="20"
              placeholder="请输入牌位编号"
            />
          </view>

          <!-- 区域选择 -->
          <view class="form-item">
            <view class="label"
              >所属区域
              <text class="required">*</text>
            </view>
            <view class="picker" @click="showRegionSelect">
              <view class="picker-text">
                {{ selectedRegionText || "请选择区域" }}
              </view>
              <view class="picker-arrow">></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="button-container">
        <view class="btn cancel-btn" @click="handleCancel">取消</view>
        <view
          :class="{ disabled: !canSubmit }"
          class="btn confirm-btn"
          @click="handleConfirm"
          >确认添加
        </view>
      </view>
    </view>

    <!-- 区域选择器 -->
    <u-select
      v-model="showRegionPicker"
      :list="regionList"
      mode="mutil-column-auto"
      @cancel="onRegionCancel"
      @confirm="onRegionConfirm"
    ></u-select>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 设备信息
      deviceInfo: {
        sn: "",
        mac: "",
        code: "",
        id: "",
      },
      // 表单数据
      formData: {
        code: "",
        id: "",
        regionId: "",
      },
      // 区域相关数据
      regionList: [], // 区域树形数据
      showRegionPicker: false, // 控制区域选择器显示
      selectedRegion: null, // 选中的区域信息
      selectedRegionText: "", // 选中的区域显示文本
      // 加载状态
      loading: false,
    };
  },
  computed: {
    // 是否可以提交
    canSubmit() {
      return (
        this.deviceInfo.sn &&
        this.deviceInfo.mac &&
        this.formData.code.trim() &&
        this.selectedRegion
      );
    },
  },
  async onLoad() {
    // 页面加载时获取区域数据
    await this.loadRegionData();
    // 尝试从缓存中恢复区域选择
    this.loadCachedRegion();
  },
  methods: {
    // 扫码获取SN
    async handleScanCode() {
      try {
        uni.showLoading({ title: "扫码中...", mask: true });

        // 调用扫码功能
        const res = await new Promise((resolve, reject) => {
          uni.scanCode({
            onlyFromCamera: true,
            scanType: ["qrCode"],
            success: (result) => {
              resolve(result);
            },
            fail: (error) => {
              reject(error);
            },
          });
        });

        uni.hideLoading();

        if (res.result) {
          // 解析二维码内容，提取SN参数
          let sn = null;
          let queryParams = res.result.split("?")[1];
          if (queryParams) {
            let params = queryParams.split("&");
            params.forEach((param) => {
              let [key, value] = param.split("=");
              if (key === "s") {
                sn = value;
              }
            });
          }

          // 如果没有从URL参数中获取到SN，尝试直接使用结果
          if (!sn) {
            sn = res.result.trim();
          }

          console.log("扫码获取到SN:", sn);
          console.log("原始扫码结果:", res.result);

          if (sn) {
            // 通过SN获取设备信息
            await this.getDeviceInfoBySn(sn);
          } else {
            uni.showToast({
              title: "未找到有效的SN码",
              icon: "none",
            });
          }
        }
      } catch (error) {
        uni.hideLoading();
        console.error("扫码失败:", error);

        if (error.errMsg && error.errMsg.includes("cancel")) {
          // 用户取消扫码，不显示错误提示
          return;
        }

        uni.showToast({
          title: "扫码失败，请重试",
          icon: "none",
        });
      }
    },

    // 通过SN获取设备信息
    async getDeviceInfoBySn(sn) {
      try {
        uni.showLoading({ title: "获取设备信息...", mask: true });

        // 调用API获取设备信息
        const res = await this.$request.get("/bst/memorial/getBySn", {
          sn: sn,
        });

        uni.hideLoading();

        console.log("@@@@@@@@@@@@@@@@@@@@", res);

        if (res) {
          const deviceData = res;
          this.deviceInfo = {
            sn: deviceData.sn || sn,
            mac: deviceData.mac || "",
            code: deviceData.code || "",
            id: deviceData.id || "",
          };

          uni.showToast({
            title: "设备信息获取成功",
            icon: "success",
          });

          console.log("设备信息:", this.deviceInfo);
        } else {
          throw new Error(res?.msg || "获取设备信息失败");
        }
      } catch (error) {
        uni.hideLoading();
        console.error("获取设备信息失败:", error);

        uni.showToast({
          title: error.message || "获取设备信息失败",
          icon: "none",
        });
      }
    },

    // 加载区域数据
    async loadRegionData() {
      try {
        // 从缓存中获取templeId，如果没有则使用默认值
        const templeId = uni.getStorageSync("templeId") || "12";

        const res = await this.$request.get(`/bst/region/listTree/${templeId}`);

        if (res && res.data) {
          // 转换数据格式为u-select需要的格式
          this.regionList = this.transformRegionData(res.data);
          console.log("区域数据加载成功:", this.regionList);
        } else {
          throw new Error("获取区域数据失败");
        }
      } catch (error) {
        console.error("加载区域数据失败:", error);
        uni.showToast({
          title: "加载区域数据失败",
          icon: "none",
        });
      }
    },

    // 转换区域数据格式
    transformRegionData(data) {
      if (!data || !data.children) return [];

      return data.children.map((floor) => ({
        label: floor.label,
        value: floor.id,
        children: floor.children
          ? floor.children.map((area) => ({
              label: area.label,
              value: area.id,
            }))
          : [],
      }));
    },

    // 显示区域选择器
    showRegionSelect() {
      if (this.regionList.length === 0) {
        uni.showToast({
          title: "区域数据加载中，请稍后",
          icon: "none",
        });
        return;
      }
      this.showRegionPicker = true;
    },

    // 区域选择确认
    onRegionConfirm(e) {
      console.log("区域选择结果:", e);
      if (e && e.length >= 2) {
        const [floor, area] = e;

        this.selectedRegion = {
          floorId: floor.value,
          floorName: floor.label,
          areaId: area.value,
          areaName: area.label,
        };

        this.selectedRegionText = `${floor.label} - ${area.label}`;
        this.formData.regionId = area.value;

        // 缓存区域选择
        this.cacheRegionSelection();

        uni.showToast({
          title: "区域选择成功",
          icon: "success",
        });
      }
    },

    // 区域选择取消
    onRegionCancel() {
      this.showRegionPicker = false;
    },

    // 缓存区域选择
    cacheRegionSelection() {
      if (this.selectedRegion) {
        uni.setStorageSync("lastSelectedRegion", this.selectedRegion);
        uni.setStorageSync("lastSelectedRegionText", this.selectedRegionText);
      }
    },

    // 从缓存加载区域选择
    loadCachedRegion() {
      try {
        const cachedRegion = uni.getStorageSync("lastSelectedRegion");
        const cachedRegionText = uni.getStorageSync("lastSelectedRegionText");

        if (cachedRegion && cachedRegionText) {
          this.selectedRegion = cachedRegion;
          this.selectedRegionText = cachedRegionText;
          this.formData.regionId = cachedRegion.areaId;
          console.log("已恢复缓存的区域选择:", cachedRegion);
        }
      } catch (error) {
        console.error("加载缓存区域失败:", error);
      }
    },

    // 取消操作
    handleCancel() {
      uni.navigateBack();
    },

    // 确认添加
    async handleConfirm() {
      if (!this.canSubmit) {
        uni.showToast({
          title: "请完善必填信息",
          icon: "none",
        });
        return;
      }

      // 表单验证
      if (!this.validateForm()) {
        return;
      }

      try {
        uni.showLoading({ title: "添加中...", mask: true });

        // 构建请求数据
        const requestData = {
          id: this.deviceInfo.id, // 使用设备ID
          code: this.formData.code,
          regionId: this.selectedRegion ? this.selectedRegion.areaId : "",
        };

        console.log("提交数据:", requestData);

        // 调用API添加牌位
        const res = await this.$request.put("/bst/memorial", requestData);

        uni.hideLoading();

        if (res && (res.code === 200 || res.status === 200)) {
          uni.showToast({
            title: "添加成功",
            icon: "success",
          });

          // 延迟返回上一页
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } else {
          throw new Error(res?.msg || "添加失败");
        }
      } catch (error) {
        uni.hideLoading();
        console.error("添加牌位失败:", error);
        uni.showToast({
          title: error.message || "添加失败，请重试",
          icon: "none",
        });
      }
    },

    // 表单验证
    validateForm() {
      if (!this.formData.code.trim()) {
        uni.showToast({
          title: "请输入牌位编号",
          icon: "none",
        });
        return false;
      }

      if (!this.selectedRegion) {
        uni.showToast({
          title: "请选择所属区域",
          icon: "none",
        });
        return false;
      }

      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background: #f5f5f5;
}

.content {
  padding: 20rpx;
  padding-bottom: 120rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding-left: 10rpx;
  border-left: 6rpx solid #4a90e2;
}

.scan-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

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

.scan-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200rpx;
  border: 3rpx dashed #4a90e2;
  border-radius: 16rpx;
  background: #f8fbff;
  transition: all 0.3s ease;

  &:active {
    background: #e8f4ff;
    transform: scale(0.98);
  }
}

.qrcode-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.scan-text {
  font-size: 28rpx;
  color: #4a90e2;
  font-weight: 500;
}

.device-info {
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 20rpx;
  border: 2rpx solid #e9ecef;
}

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

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

.info-label {
  font-size: 26rpx;
  color: #666;
  width: 140rpx;
  flex-shrink: 0;
}

.info-value {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
  flex: 1;
  word-break: break-all;
}

.form-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.form-container {
  // 表单容器样式
}

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

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

.label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 12rpx;
  font-weight: 500;
}

.required {
  color: #ff4757;
  margin-left: 4rpx;
}

.input {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
  background: #fff;

  &:focus {
    border-color: #4a90e2;
  }
}

.picker {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  background: #fff;
  box-sizing: border-box;
}

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

.picker-arrow {
  color: #999;
  font-size: 24rpx;
  transform: rotate(90deg);
}

.textarea {
  width: 100%;
  min-height: 120rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
  background: #fff;
  resize: none;

  &:focus {
    border-color: #4a90e2;
  }
}

.button-container {
  display: flex;
  gap: 20rpx;
  padding: 0 20rpx;
}

.btn {
  flex: 1;
  height: 88rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: bold;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
  border: 2rpx solid #e5e5e5;

  &:active {
    background: #e8e8e8;
  }
}

.confirm-btn {
  background: #4a90e2;
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.3);

  &:active {
    background: #357abd;
  }

  &.disabled {
    background: #ccc;
    color: #999;
    box-shadow: none;

    &:active {
      background: #ccc;
    }
  }
}
</style>
