<template>
  <!-- 机房巡检操作 -->
  <view>
    <view v-for="(item, index) in itemData.detail" :key="index">
      <view class="form-item">
        <text class="form-label"
          ><text class="required"></text>{{ item.label }}</text
        >
        <text
          :class="['conclusion', { 'no-text': !item.conclusion }]"
          @click="showPopup(item, index)"
        >
          {{ item.conclusion || "请输入情况摘要" }}</text
        >
      </view>
      <view class="form-item">
        <text class="form-label"><text class="required"></text>现场照片</text>
        <CommonUpload
          v-model="item.photos"
          :max-count="9999"
          @input="onPhotoChange"
        >
          <template #tip><div></div></template>
        </CommonUpload>
      </view>
    </view>
    <custom-popup
      ref="customPopup"
      :inspectionItem="inspectionItem"
      @confirm="handlePopupConfirm"
    >
    </custom-popup>
  </view>
</template>

<script>
import CommonUpload from "@/components/CommonUpload/index.vue";
import customPopup from "./customPopup.vue";
import _ from "lodash";

import mixin from "./mixin";
export default {
  mixins: [mixin],
  components: {
    CommonUpload,
    customPopup,
  },
  props: {
    // 父组件传递的巡检状态
    status: {
      type: Number,
      default: 0,
    },
    // 父组件传递的巡检事项名
    inspectionItem: {
      type: String,
      default: "",
    },
    // 父组件传递的数据
    defaultData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      isQt: true,
      currentIndex: 0, // 当前操作的索引
      photos: [],
      // 父组件传递的数据
      itemData: {
        isValid: true, // true是不校验
        status: 0, //0是未巡检 1是已巡检 2巡检异常
        statusLabel: "未巡检",
        inspectionItem: "", //巡检事项
        detail: [
          {
            label: "其他问题",
            inspectionResult: 0,
            inspectionResultLable: "正常",
            lableArr: ["正常", "异常"],
            conclusion: "",
            photos: [],
          },
        ],
      },
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.now_user || {};
    },
  },
  watch: {
    defaultData(newVal) {
      // 在这里处理数据变化
      if (Object.keys(this.defaultData).length !== 0) {
        this.itemData = this.defaultData;
      }
    },
  },
  mounted() {},
  methods: {
    // 设置巡检结论
    setInspectionResult(index, value) {
      this.itemData.detail[index].inspectionResult = value; // 0正常 1异常
    },
    // 处理弹窗确认
    handlePopupConfirm(summary) {
      this.itemData.detail[this.currentIndex].conclusion = summary; // 回显到文字显示区域
    },
    // 处理】数据
    getFromData() {
      this.itemData.inspectionItem = this.inspectionItem;
      console.log(222, this.itemData);
      // 全都是正常
      this.itemData.status = 1; //1表示已经巡检过没有异常
      this.itemData.statusLabel = "已巡检";
      return this.itemData;
    },
    // 数据校验方法 true说明有未填项
    areAllObjectsValid(arr) {
      for (let i = 0; i < arr.length; i++) {
        const obj = arr[i];
        const keys = Object.keys(obj);
        for (let j = 0; j < keys.length; j++) {
          const key = keys[j];
          const value = obj[key];
          if (value === null || value === undefined || value === "") {
            return false;
          }
          if (Array.isArray(value)) {
            if (value.length === 0) {
              return false;
            }
            for (let k = 0; k < value.length; k++) {
              if (typeof value[k] === "object" && value[k] !== null) {
                if (!validateArrayObjects([value[k]])) {
                  return false;
                }
              }
            }
          } else if (typeof value === "object" && value !== null) {
            if (!validateArrayObjects([value])) {
              return false;
            }
          }
        }
      }
      return true;
    },
    // 校验是否有异常
    areAllInspectionResultsOne(arr) {
      return arr.every((obj) => obj.inspectionResult === 0);
    },
    onPhotoChange(val) {
      this.itemData.detail[this.currentIndex].photos = val;
    },
  },
};
</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;
    }
  }
  .conclusion {
    &.no-text {
      color: #c7c7c7;
    }
    .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>
