<template>
  <view class="contai_warp">
    <view class="top_area_warp">
      <view class="top_status_area" :style="{ height: statusBarHeight + 'px' }"></view>
      <view class="top_nav_warp">
        <view>设备绑定</view>
        <view class="back_button_warp" @click="goBack()">
          <image class="back_button_icon" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
        </view>
      </view>
    </view>

    <view class="content_area_warp">
      <view class="content_warp">
        <view class="content_item_warp" @click="scanCode()">
          <view class="content_item_left">
            <view class="item_left_txt1">扫码绑定</view>
            <!-- <view class="item_left_txt2">副文案副文案</view> -->
          </view>
          <image class="content_item_right" src="https://online.totustec.com/upload/deviceBind/content_item_right1.png">
          </image>
        </view>

        <!-- <view class="content_item_warp" @click="deviceBingDialog.show = true">
          <view class="content_item_left">
            <view class="item_left_txt1">输入设备名称</view>
            <view class="item_left_txt2">副文案副文案</view>
          </view>
          <image
            class="content_item_right"
            src="https://online.totustec.com/upload/deviceBind/content_item_right2.png"
          ></image>
        </view> -->
      </view>
    </view>

    <view class="pop_up_warp" v-if="deviceBingDialog.show">
      <view class="pop_up_content">
        <view class="popUp_content">
          <input class="popUp_input" placeholder="请输入设备名称" v-model="deviceBingDialog.deviceName" />
        </view>

        <view class="popUp_button_warp">
          <view class="popUp_button_item">取消</view>
          <view class="popUp_button_item popUp_button_css" @click="binding()">绑定</view>
        </view>

        <image class="colse_icon" src="https://online.totustec.com/upload/deviceBind/colse_icon.png"
          @click="deviceBingDialog.show = false">
        </image>
      </view>
    </view>
  </view>
</template>

<script>
import {
  BASE_API_URL,
  BASE_IMG_URL
} from "@/config.js";
export default {
  data () {
    return {
      title: "Hello",
      statusBarHeight: 0,
      deviceBingDialog: {
        show: false,
        deviceName: "",
      },
      deviceCode: ""
    };
  },
  onLoad () {
    const systemInfo = wx.getSystemInfoSync();
    const {
      statusBarHeight, // 状态栏高度（单位：px）
    } = systemInfo;

    this.statusBarHeight = statusBarHeight;
  },
  methods: {
    binding () {
      console.log("此处绑定");
    },
    goBack () {
      uni.navigateBack();
    },
    scanCode () {
      uni.scanCode({
        onlyFromCamera: false, // 允许从相册选择
        scanType: ['qrCode'], // 只识别二维码
        success: (res) => {
          console.log('扫码结果:', res);
          if (res.result) {
            // 扫码成功，获取到设备ID或编码
            this.deviceCode = res.result;
            // 友好提示
            uni.showToast({
              title: '扫码成功，正在绑定设备...',
              icon: 'success',
              duration: 1500
            });
            // 调用绑定接口
            // 1500ms（1.5秒）后执行绑定
             setTimeout(() => {
               this.bindDevice();
             }, 1500); // 与 toast 的 duration 保持一致
          }
        },
        fail: (err) => {
          console.error('扫码失败:', err);
          uni.showToast({
            title: '扫码失败，请重试',
            icon: 'none'
          });
        }
      });
    },
    async bindDevice () {
      try {
        const res = await uni.request({
          url: BASE_API_URL + '/api/front/device/bindingDevice',
          method: "GET",
          data: {
            deviceCode: this.deviceCode
          },
          header: {
            "Content-Type": "application/x-www-form-urlencoded", // 关键配置
            "Authorization": uni.getStorageSync("userInfo")?.token || ""
          }
        });

        uni.showModal({
          title: '提示',
          content: res.data.message, // 直接显示完整文本
          showCancel: false // 不显示取消按钮（可选）
        });
        // console.log('res', res);

        if (res.statusCode === 200) {
          uni.showToast({ title: "绑定成功" });
        }
      } catch (error) {
        console.error("设备绑定失败:", error);
        uni.showToast({ title: "设备绑定失败", icon: "none" });
      }
    },
  },
};
</script>
<!-- 临时样式 -->
<style scoped>
.colse_icon {
  position: absolute;
  right: 21rpx;
  top: 19rpx;
  width: 40rpx;
  height: 40rpx;
}

.popUp_button_css {
  color: #0095de !important;
  border-left: 1rpx solid #f0f0f0;
}

.popUp_button_item {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 32rpx;
  color: #666666;
}

.popUp_button_warp {
  width: 100%;
  height: 80rpx;
  border-top: 1rpx solid #f0f0f0;
  display: flex;
}

.popUp_input {
  width: 534rpx;
  height: 80rpx;
  background: #f3f3f3;
  border-radius: 10rpx;
  padding-left: 31rpx;
}

.popUp_content {
  width: 100%;
  height: 230rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pop_up_content {
  width: 600rpx;
  background: #ffffff;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  position: relative;
}

.pop_up_warp {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}

.content_item_right {
  width: 106rpx;
  height: 106rpx;
  margin-right: 23rpx;
}

.item_left_txt2 {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #666666;
  margin-top: 3rpx;
}

.item_left_txt1 {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 30rpx;
  color: #000000;
}

.content_item_left {
  display: flex;
  flex-direction: column;
  margin-left: 26rpx;
}

.content_item_warp {
  width: 340rpx;
  height: 158rpx;
  background: linear-gradient(180deg, #eaebfc 0%, #ffffff 100%);
  border-radius: 20rpx;
  border: 1rpx solid #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content_area_warp {
  width: 100%;
}

.content_warp {
  padding: 23rpx 20rpx 0 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>

<style scoped>
.back_button_icon {
  transform: rotate(180deg);
  width: 28rpx;
  height: 28rpx;
}

.back_button_warp {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 20rpx;
}

.contai_warp {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: PingFang SC, PingFang SC !important;
  min-height: 100vh;
  background-color: #f1f6fc;
  overflow-x: hidden !important;
}

.top_area_warp {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.top_status_area {
  width: 100%;
}

.top_nav_warp {
  width: 100%;
  height: 88rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #000000;
  position: relative;
  z-index: 5;
  position: relative;
}
</style>
