<!-- 机房巡检操作 -->
  <view>
    <view v-for="(item, index) in itemData.detail" :key="index">
      <view class="form-item">
        <text class="form-label"
          ><text class="required">*</text>{{ item.settingLabel }}</text
        ><text>{{ item.setting }}</text>
      </view>
      <view class="form-item">
        <text class="form-label"
          ><text class="required">*</text>{{ item.label }}</text
        >
        <view class="switch-container">
          <view
            :class="['status-btn', { active: item.inspectionResult === 0 }]"
            @click="setInspectionResult(index, 0, item.lableArr[0])"
          >
            {{ item.lableArr[0] }}
          </view>
          <view
            :class="['status-btn', { active: item.inspectionResult === 1 }]"
            @click="setInspectionResult(index, 1, item.lableArr[1])"
          >
            {{ item.lableArr[1] }}
          </view> </view
        ><input
          v-if="'value' in item"
          class="input"
          v-model="item.value"
          type="text"
          placeholder="请输入"
          maxlength="3"
        />{{ item.unit }}
      </view>
      <view v-if="'conclusion' in item" class="form-item">
        <text class="form-label"><text class="required">*</text>情况摘要</text>
        <text class="conclusion" @click="showPopup(index)">{{
          item.conclusion || "请输入情况摘要"
        }}</text>
      </view>
      <view class="form-item" v-if="'photos' in item">
        <text class="form-label"><text class="required">*</text>现场照片</text>
        <view class="photo-box">
          <view class="photo-container">
            <view @click="takePhoto(index)" class="photo-btn"> + </view>
            <view
              v-for="(photo, itemIndex) in item && item.photos"
              :key="itemIndex"
              class="photo-item"
            >
              <image :src="photo" class="photo"></image>
              <text class="delete-photo" @click="deletePhoto(index, itemIndex)"
                >×</text
              >
            </view>
          </view>
          <view class="photo-limit"
            >请对检查项进行拍照留存（限5张）。发现“异常、告警”时，需拍照留存。</view
          >
        </view>
      </view> </view
    ><custom-popup
      ref="customPopup"
      :inspectionItem="inspectionItem"
      @confirm="handlePopupConfirm"
    ></custom-popup>
  </view>
</template>

<script>
import customPopup from "./customPopup.vue";
import _ from "lodash";

export default {
  components: {
    customPopup,
  },
  props: {
    // 父组件传递的巡检状态
    status: {
      type: Number,
      default: 0,
    },
    // 父组件传递的巡检类型
    jfType: {
      type: Number,
      default: 0,
    },
    // 父组件传递的巡检事项名
    inspectionItem: {
      type: String,
      default: "",
    },
    // 父组件传递的数据
    defaultData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      currentIndex: 0, // 当前操作的索引
      photos: [],
      itemData: {
        isValid: false, // false是校验未通过 true是校验通过
        // status: 0, 0是未巡检 1是已巡检 2巡检异常 statusLabel: "未巡检",
        inspectionItem: "", //巡检事项
        detail: [
          {
            label: "实际电池电压",
            inspectionResult: 0,
            inspectionResultLable: "正常",
            lableArr: ["正常", "正常"],
            conclusion: "",
            settingLabel: "设定电池电压",
            setting: "10V-15V", //设定温度值
            value: "", //输入温度
            unit: "V", //单位
            photos: [],
          },
          {
            label: "实际电池温度",
            inspectionResult: 0,
            inspectionResultLable: "正常",
            lableArr: ["正常", "正常"],
            conclusion: "",
            settingLabel: "设定电池温度",
            setting: "15℃-30℃", //设定湿度值
            value: "", //输入湿度
            unit: "℃", //单位
            photos: [],
          },
          {
            label: "实际电池内阻",
            inspectionResult: 0,
            inspectionResultLable: "正常",
            lableArr: ["正常", "正常"],
            conclusion: "",
            settingLabel: "设定电池内阻",
            setting: "<10mΩ", //设定湿度值
            value: "", //输入湿度
            unit: "mΩ", //单位
            photos: [],
          },
        ],
      },
      itemDataOther: {
        isValid: false, // false是校验未通过 true是校验通过
        // status: 0, 0是未巡检 1是已巡检 2巡检异常 statusLabel: "未巡检",
        inspectionItem: "", //巡检事项
        detail: [
          {
            label: "实际电池电压",
            inspectionResult: 0,
            inspectionResultLable: "正常",
            lableArr: ["正常", "正常"],
            conclusion: "",
            settingLabel: "设定电池电压",
            setting: "2V-3V", //设定温度值
            value: "", //输入温度
            unit: "V", //单位
            photos: [],
          },
          {
            label: "实际电池温度",
            inspectionResult: 0,
            inspectionResultLable: "正常",
            lableArr: ["正常", "正常"],
            conclusion: "",
            settingLabel: "设定电池温度",
            setting: "15℃-30℃", //设定湿度值
            value: "", //输入湿度
            unit: "℃", //单位
            photos: [],
          },
          {
            label: "实际电池内阻",
            inspectionResult: 0,
            inspectionResultLable: "正常",
            lableArr: ["正常", "正常"],
            conclusion: "",
            settingLabel: "设定电池内阻",
            setting: "<0.5mΩ", //设定湿度值
            value: "", //输入湿度
            unit: "mΩ", //单位
            photos: [],
          },
        ],
      },
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.now_user || {};
    },
  },
  mounted() {
    console.log(console.log(45454854,this.jfType))
    if (this.jfType === "2") {
      this.itemData = this.itemDataOther;
    }
    console.log("itemData",this.itemData)
    if (Object.keys(this.defaultData).length !== 0) {
      this.itemData = this.defaultData;
    }
  },
  methods: {
    // 拍照
    takePhoto(index) {
      uni.chooseImage({
        count: 1,
        sourceType: ["camera"], // 可以从相机拍摄
        success: async (res) => {
          if (this.photos.length < 5) {
            const base64 = await this.convertFileToBase64(res.tempFilePaths[0]);
            this.itemData.detail[index].photos.push(base64);
          } else {
            uni.showToast({
              title: "最多只能上传5张照片",
              icon: "none",
            });
          }
        },
      });
    },
    // 转化为base64
    convertFileToBase64(filePath) {
      return new Promise((resolve, reject) => {
        plus.io.resolveLocalFileSystemURL(
          filePath,
          function (entry) {
            entry.file(
              function (file) {
                const reader = new plus.io.FileReader();
                reader.onloadend = function (evt) {
                  const base64 = evt.target.result; // 获取 Base64 数据
                  resolve(base64); // 返回 Base64 数据
                };
                reader.readAsDataURL(file); // 读取文件并转换为 Base64
              },
              function (error) {
                reject("获取文件对象失败：" + error.message);
              }
            );
          },
          function (error) {
            reject("解析文件路径失败：" + error.message);
          }
        );
      });
    },
    // 删除照片
    deletePhoto(index, itemIndex) {
      this.itemData.detail[index].photos.splice(itemIndex, 1);
    },

    // 设置巡检结论
    setInspectionResult(index, value, label) {
      this.itemData.detail[index].inspectionResult = value; // 0正常 1异常
      this.itemData.detail[index].inspectionResultLable = label;
    },
    // 显示弹窗
    showPopup(index) {
      this.currentIndex = index;
      this.$refs.customPopup.open();
    },
    // 处理弹窗确认
    handlePopupConfirm(summary) {
      this.itemData.detail[this.currentIndex].conclusion = summary; // 回显到文字显示区域
    },
    // 处理】数据
    getFromData() {
      console.log(111, this.itemData);
      const isValid = this.areAllObjectsValid(this.itemData.detail, 2); //false不通过 true通过
      // const isAllOne = this.areAllInspectionResultsOne(this.itemData.detail);
      this.itemData.isValid = isValid;
      this.itemData.inspectionItem = this.inspectionItem;
      console.log(222, this.itemData);
      // if (isAllOne) {
      //   // 全都是正常
      //   this.itemData.status = 1; //1表示已经巡检过没有异常
      //   this.itemData.statusLabel = "已巡检";
      // } else {
      //   this.itemData.status = 2; //1表示已经巡检过有异常
      //   this.itemData.statusLabel = "巡检异常";
      // }
      // console.log(this.itemData);
      return this.itemData;
    },
    // 数据校验方法 true说明有未填项
    areAllObjectsValid(arr, skipIndex) {
      // 遍历数组中的每个对象
      for (let i = 0; i < arr.length; i++) {
        const obj = arr[i];
        // 如果当前索引大于等于 skipIndex，并且 inspectionResult 为 1，则跳过后续校验
        if (i >= skipIndex && obj.inspectionResult === 1) {
          break;
        }
        // 检查对象中的每个属性是否有值
        for (const key in obj) {
          if (obj.hasOwnProperty(key)) {
            // 如果属性值为空（null, undefined, 空字符串等），则校验不通过
            if (
              obj[key] === null ||
              obj[key] === undefined ||
              obj[key] === ""
            ) {
              return false;
            }
          }
        }
      }
      // 如果所有对象都通过校验，返回 true
      return true;
    },
    // 校验是否有异常
    areAllInspectionResultsOne(arr) {
      return arr.every((obj) => obj.inspectionResult === 0);
    },
  },
};
</script>
<style scoped lang="less">
.form-item {
  display: flex;
  align-items: center;
  padding: 9.6px 0;
  line-height: 28.8px;
  border-bottom: 0.8px solid #f2f3f5;

  .form-label {
    font-size: 11.2px;
    margin-right: 25.6px;
    width: 88px;
    text-align: right;
    color: #7c7c7c;

    .required {
      color: red;
      margin-right: 3.2px;
    }
  }
  .input {
    width: 50px;
    margin-left: 12px;
  }
  .fg {
    margin: 0 12px;
  }
  .conclusion {
    color: #c7c7c7;
    font-size: 11.2px;
    .have {
      color: #000;
    }
  }
  .label {
    font-size: 11.2px;
  }

  .switch-container {
    display: flex;
    gap: 9.6px;

    .status-btn {
      flex: 1;
      padding: 5.6px 19.2px;
      font-size: 12.8px;
      color: #000000;
      background: #f2f2f2;
      text-align: center;
      font-weight: 400;
      line-height: 17.6px;
      border-radius: 14.4px;

      &.active {
        color: #ffffff;
        background: #3774f6;
        border: 0.32px solid rgba(224, 224, 224, 1);
      }
    }
  }

  .input-box {
    flex: 1;
    border-radius: 3.2px;
    font-size: 12.8px;
    line-height: 19.2px;
  }

  .photo-limit {
    font-size: 12.8px;
    color: #959595;
    line-height: 19.2px;
    font-weight: 400;
  }

  .photo-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 6.4px;

    .photo-item {
      position: relative;
      margin-right: 6.4px;
      margin-bottom: 6.4px;

      .photo {
        width: 57.6px;
        height: 57.6px;
        border-radius: 3.2px;
        margin-left: 9.6px;
      }

      .delete-photo {
        position: absolute;
        top: -6.4px;
        right: -6.4px;
        background-color: #ff4d4f;
        color: #fff;
        width: 12.8px;
        height: 12.8px;
        border-radius: 50%;
        text-align: center;
        line-height: 12.8px;
        font-size: 9.6px;
      }
    }
  }

  .photo-btn {
    background: #ffffff;
    border: 0.272px solid rgba(221, 221, 221, 1);
    border-radius: 1.64px;
    width: 57.6px;
    height: 57.6px;
    font-size: 57.6px;
    color: #cccccc;
    text-align: center;
    line-height: 51.2px;
  }
}
</style>