<template>
  <view class="checkout-detail-bg">
    <!-- 房间图片 -->
    <image
      class="room-img"
      :src="info.houseTypeCoverImg"
      mode="aspectFill"
    ></image>
    <!-- 基本信息卡片 -->
    <view class="info-card">
      <view class="room-title">{{ info.roomNamePath }}</view>
      <view style="border-bottom: 2rpx dashed #e5e5e5; margin: 24rpx 0"></view>
      <view class="info-row"
        ><text class="label">居住人</text>{{ info.graduateName }}</view
      >
      <view class="info-row"
        ><text class="label">性别</text
        >{{ info.gender == 1 ? "男" : "女" }}</view
      >
      <view class="info-row"
        ><text class="label">联系电话</text
        >{{ maskPhoneNumber(info.telephone) }}</view
      >
      <view class="info-row"
        ><text class="label">居住日期</text>{{ info.checkInDate }}至{{
          info.checkOutDate
        }}</view
      >
    </view>
    <!-- 设备检查 -->
    <view class="section-card">
      <view class="section-title">设备检查</view>
      <view
        v-for="(item, idx) in deviceList"
        :key="item.name"
        class="device-row"
      >
        <text class="device-label">{{ item.name }}</text>
        <u-radio-group
          placement="row"
          @change="onDeviceChange(idx, $event)"
          v-model="checkStatus[idx]"
        >
          <u-radio
            :custom-style="'margin-right:36rpx;'"
            activeColor="#0DC6C6"
            v-for="opt in statusOptions"
            :key="opt.value"
            :label="opt.label"
            :name="opt.value"
          ></u-radio>
        </u-radio-group>
      </view>
    </view>
    <!-- 水电表 -->
    <view class="section-card">
      <view class="section-title">水电表设备</view>
      <view class="meter-row">
        <text class="meter-label">水表数</text>
        <u-input
          v-model="waterMeterValue"
          type="digit"
          placeholder="请输入水表数"
          border="none"
        />
      </view>
      <view style="border-bottom: 2rpx solid #e5e5e5; margin: 24rpx 0"></view>
      <view class="meter-row">
        <text class="meter-label">电表数</text>
        <u-input
          v-model="energyMeterValue"
          type="digit"
          placeholder="请输入电表数"
          border="none"
        />
      </view>
    </view>
    <!-- 其他说明 -->
    <view class="section-card">
      <view class="section-title">其他说明</view>
      <u-textarea
        v-model="facilitiesCheckDesc"
        ref="textarea"
        placeholder="请输入内容（不超过500字）"
        maxlength="500"
        height="150"
        border="none"
        custom-style="background:#f7f7f7;border-radius:12rpx;padding:16rpx;"
      ></u-textarea>
    </view>
    <!-- 图片/视频上传区域 -->
    <view class="section-card">
      <view class="section-title">图片/视频</view>
      <u-upload
        :max-count="10"
        :multiple="true"
        :preview-full-image="true"
        :deletable="true"
        :show-upload-list="true"
        :fileList="fileList"
        :auto-upload="false"
        accept="all"
        :maxSize="10 * 1024 * 1024"
        @oversize="oversize"
        @delete="onDelete"
        :disabled="true"
      >
        <view class="custom-upload-btn" @click.stop="chooseMedia">
          <view class="icon-box">
            <image
              class="camera-icon"
              src="/static/img/camera-icon.png"
              mode="aspectFill"
            ></image>
          </view>
          <view class="upload-tips">点击上传</view>
        </view>
      </u-upload>
    </view>
    <!-- 提交按钮 -->
    <view style="margin: 30rpx 0 30rpx 30rpx">
      <!-- <checkbox-group v-model="isChecked">
        <checkbox value="1" style="margin-right: 10rpx" />
        <text style="color: #888; font-size: 28rpx">
          
        </text>
      </checkbox-group> -->
      <checkbox-group  @change="checkboxChange">
					<label>
						<checkbox value="isChecked" :checked="isChecked"  style="transform:scale(0.7)" />确认以上信息无误，生成“房屋交割单”，由毕业生在微信小程序端签字确认。
					</label>
				</checkbox-group>
    </view>
     <view class="btn" @click="onSubmit">提交</view>
    <!-- <view class="submit-btn-wrap">
      <u-button
        type="primary"
        shape="circle"
        @click="onSubmit"
        :custom-style="btnStyle"
        >提交</u-button
      >
    </view> -->
  </view>
</template>

<script>
import {
  getRoomFacilities,
  submitCheckout,
  uploadImage,
  tempSaveCheckOut,
} from "../../../pages/api";

export default {
  data() {
    return {
      btnStyle:
        "background:linear-gradient(90deg,#0DC6C6 0%,#13C2C2 100%);font-size:36rpx;border-radius:48rpx;width:60vw;height:80rpx;",
      deviceList: [],
      statusOptions: [
        {
          label: "完好",
          value: "0",
        },
        {
          label: "破损",
          value: "1",
        },
        {
          label: "丢失",
          value: "2",
        },
      ],
      waterMeterValue: "",
      energyMeterValue: "",
      checkStatus: [],
      remark: "",
      fileList: [],
      img1: [],
      info: {},
      facilitiesCheckDesc: "",
      isChecked: false, // 勾选状态
    };
  },
  onLoad(options) {
    console.log("options", options);

    const detail = uni.getStorageSync("checkoutDetail");
    this.info = detail;
    this.getFacilities(options.houseId);
  },
  methods: {
    checkboxChange(event) {
      this.isChecked = !this.isChecked
    },
    maskPhoneNumber(phoneNumber) {
      if (!phoneNumber || phoneNumber.length !== 11) {
        return phoneNumber;
      }
      return phoneNumber.substr(0, 3) + "****" + phoneNumber.substr(7);
    },
    getFacilities(id) {
      getRoomFacilities({ houseId: id }).then((res) => {
        this.deviceList = res.data;
        // 初始化每个设备的状态为“完好”
        this.checkStatus = this.deviceList.map(() => "0");
      });
    },
    onDeviceChange(idx, val) {
      this.deviceList[idx].status = val;
    },
    chooseMedia() {
      uni.chooseMedia({
        count: 10 - this.fileList.length,
        mediaType: ["image", "video"],
        sourceType: ["album", "camera"],
        maxDuration: 60,
        camera: "back",
        success: async (res) => {
          // 添加文件大小检查
          const files = res.tempFiles;
          // 检查每个文件的大小
          const oversizeFiles = files.filter(
            (file) => file.size > 10 * 1024 * 1024
          );
          if (oversizeFiles.length > 0) {
            this.$u.toast("请选择10MB以内大小的图片/视频！");
            return;
          }
          uni.showLoading({ title: "上传中...", mask: true });
          try {
            const files = res.tempFiles;
            for (let i = 0; i < files.length; i++) {
              const file = files[i];
              const filePath = file.tempFilePath;
              const type =
                file.fileType ||
                (filePath.match(/\.(mp4|mov|avi|wmv|flv|mkv)$/i)
                  ? "video"
                  : "image");
              // 上传
              const uploadRes = await uploadImage(filePath);
              this.fileList.push({
                url: uploadRes.data?.url || uploadRes.url || uploadRes.path,
                name: uploadRes.data?.name || uploadRes.name || "",
                type: type,
                status: "success",
              });
            }
            // 更新 facilitiesCheckImages
            this.facilitiesCheckImages = this.fileList.map((v) => ({
              name: v.name || "",
              format: v.type,
              url: v.url,
            }));
          } catch (e) {
            uni.showToast({ title: "上传失败", icon: "none" });
          } finally {
            uni.hideLoading();
          }
        },
        fail: () => {
          uni.hideLoading();
        },
      });
    },
    //图片超过大小时取消上传
    oversize(e) {
      this.$u.toast("请传10MB以内大小的图片/视频！");
      return false;
    },
    onDelete(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
      var arry = [];
      this.fileList.filter((v, i) => {
        arry.push({
          name: v.name || "",
          format: v.type,
          url: v.url,
        });
      });
      this.form.imageList = arry;
    },
    // 暂存提交
    handleTempSave(formData) {
      tempSaveCheckOut(formData).then((res) => {
        if (res.code === 200) {
          uni.showToast({ title: res.msg, icon: "success" });
          uni.navigateTo({
            url: `/pagesA/checkout/list/list`,
          });
        } else {
          uni.showToast({ title: res.msg, icon: "warning" });
        }
      });
    },
    onSubmit() {
      console.log(this.isChecked);
      
      if (!this.isChecked) {
        uni.showToast({
          title: "请先确认信息无误并勾选",
          icon: "none",
        });
        return;
      }
      // 校验设备检查是否全部完成
      const uncheckedDevices = this.deviceList.filter((item, index) => {
        return (
          this.checkStatus[index] === undefined ||
          this.checkStatus[index] === ""
        );
      });

      if (uncheckedDevices.length > 0) {
        uni.showToast({
          title: "请完成所有设备检查",
          icon: "none",
          duration: 2000,
        });
        return;
      }

      // 校验水电表是否填写
      if (!this.waterMeterValue || this.waterMeterValue.trim() === "") {
        uni.showToast({
          title: "请输入水表数",
          icon: "none",
          duration: 2000,
        });
        return;
      }

      if (!this.energyMeterValue || this.energyMeterValue.trim() === "") {
        uni.showToast({
          title: "请输入电表数",
          icon: "none",
          duration: 2000,
        });
        return;
      }

      const facilitiesCheckResults = this.deviceList.map((item, index) => ({
        facilityId: item.id,
        checkResult: this.checkStatus[index],
      }));
      console.log(facilitiesCheckResults, "facilitiesCheckResults");
      const params = {
        idCard: this.info.idCard,
        checkOutType: 0, //正常退房
        facilitiesCheckDesc: this.facilitiesCheckDesc,
        facilitiesCheckImages: this.fileList,
        facilitiesCheckResults: facilitiesCheckResults,
        waterMeterValue: this.waterMeterValue || "",
        energyMeterValue: this.energyMeterValue || "",
      };
      this.handleTempSave(params);
      uni.switchTab({
        url: "/pages/tabBar/work/index",
      });
      uni.showToast({ title: "提交成功", icon: "success" });
    },
  },
};
</script>

<style lang="scss" scoped>
.checkout-detail-bg {
  background: #f7f7f7;
  min-height: 100vh;
  padding-bottom: 40rpx;
}
.room-img {
  width: 100vw;
  height: 400rpx;
  object-fit: cover;
  display: block;
}
.info-card {
  background: #fff;
  border-radius: 20rpx;
  // margin: -40rpx 24rpx 16rpx 24rpx;
  padding: 24rpx 24rpx 12rpx 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 2;
  margin-bottom: 24rpx;
}
.room-title {
  font-weight: bold;
  font-size: 32rpx;
  margin-bottom: 16rpx;
}
.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
  font-size: 28rpx;
}
.label {
  color: #888;
  margin-right: 24rpx;
  min-width: 120rpx; /* 固定宽度，保证对齐 */
  text-align: right;
}
.section-card {
  background: #fff;
  border-radius: 20rpx;
  margin: 0 24rpx 16rpx 24rpx;
  padding: 24rpx;
}
.section-title {
  font-weight: bold;
  font-size: 28rpx;
  margin-bottom: 18rpx;
}
.device-row {
  display: flex;
  align-items: center;
  padding: 12rpx 0rpx;
  min-height: 64rpx;
  border-bottom: 1px solid #f2f2f2;
}
.device-label {
  width: 160rpx;
  color: #68758b;
  font-size: 28rpx;
  margin-right: 24rpx;
}
.meter-row {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}
.meter-label {
  width: 120rpx;
  color: #888;
  font-size: 28rpx;
}

.meter-value {
  color: #222;
  font-size: 28rpx;
}
.custom-upload-btn {
  width: 160rpx;
  height: 160rpx;
  background: #fafafa;
  border: 2rpx solid #f0f0f0;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20rpx 16rpx 0 0;
}
.icon-box {
  width: 60rpx;
  height: 60rpx;
  background: #ceeced;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.camera-icon {
  width: 36rpx;
  height: 36rpx;
}
.upload-tips {
  color: #bbb;
  font-size: 24rpx;
  margin-top: 8rpx;
}
.u-upload__wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.u-upload__preview {
  border-radius: 16rpx;
  overflow: hidden;
  margin-right: 16rpx;
  margin-bottom: 16rpx;
}
.btn {
  width: 414rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 600rpx;
  background: linear-gradient(
    86.25deg,
    rgba(13, 198, 198, 1) 3.03%,
    rgba(19, 194, 194, 1) 3.03%,
    rgba(70, 219, 213, 1) 96.43%
  );
  color: rgba(255, 255, 255, 1);
  font-size: 34rpx;
  text-align: center;
  margin: auto;
  margin-top: 40rpx;
}
</style>
