<template>
  <view class="container-item">
    <view class="title">{{ title }}</view>
    <view class="cards">
      <view
        v-for="(item, index) in detailObj.detail"
        :key="index"
        class="cards-item"
        v-if="showItem(item)"
      >
        <view v-if="hasLabel" class="name"
          >{{ item.label
          }}<text
            class="status"
            :class="{ warning: item.inspectionResult === 1 }"
            >{{ item.inspectionResultLable }}</text
          ></view
        >

        <view class="list" v-if="type == 1">
          <view class="label">{{ item.settingLabelShow }}：</view>
          <view class="content">
            {{ item.setting }}
          </view>
        </view>

        <view v-if="type == 2 && item.inspectionResult === 1" class="list">
          <view class="label">故障设备：</view>
          <view class="content">
            <text v-for="(current, idx) in item.cabinets" :key="idx">
              【{{ current.deviceId }}机柜，{{ current.UpositonS }}~{{
                current.UpositonE
              }}U】
            </text>
          </view>
        </view>

        <view class="list" v-if="type == 3">
          <view class="label">{{ item.settingLabel }}：</view>
          <view class="content"> {{ item.setting }}{{ item.unit }} </view>
        </view>
        <view class="list" v-if="type == 3">
          <view class="label">{{ item.sjLabel }}：</view>
          <view class="content"> {{ item.value }}{{ item.unit }} </view>
        </view>

        <view class="name" v-if="type == 4">
          <template v-if="index == 0">
            <view>
              {{ item.label }} （气压范围：{{ item.setting }}）
              <text
                class="status"
                :class="{ warning: item.inspectionResult === 1 }"
                >{{ item.inspectionResultLable }}
              </text>
            </view>
          </template>
          <template v-else>
            {{ item.label }}
            <text
              class="status"
              :class="{ warning: item.inspectionResult === 1 }"
              >{{ item.inspectionResultLable }}
            </text>
          </template>
        </view>

        <view class="list">
          <view class="label">{{ conclusionName || "情况描述" }}：</view>
          <view class="content">
            {{ item.conclusion }}
          </view>
        </view>
        <view class="list">
          <view class="label">现场照片：</view>
          <view v-if="item.photos.length === 0" class="content">
            未拍摄照片
          </view>
          <view v-else class="content">
            <image
              v-for="(url, urlIndex) in item.photos"
              :key="urlIndex"
              class="image-item"
              :src="url"
              mode="aspectFit"
              @click="previewImage(item.photos, urlIndex)"
            ></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    detailObj: {
      type: Object,
      default: () => ({}),
    },
    title: {
      type: String,
      default: "",
    },
    type: {
      type: [String, Number],
      default: "",
    },
    conclusionName: {
      type: String,
      default: "情况描述",
    },
    hasLabel: {
      type: Boolean,
      default: true,
    },
    isShowItem: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    showItem(item) {
      if (!this.isShowItem) return true;

      const hasMonitor = this.detailsItem.afxt.detail.find(
        (i) => i.label === "是否有监控",
      );
      if (hasMonitor && hasMonitor.inspectionResultLable === "无监控") {
        return !["监控外观破损", "监控画面清晰", "监控存储连续"].includes(
          item.label,
        );
      }
      return true;
    },
    previewImage(images, index) {
      uni.previewImage({
        current: index,
        urls: images,
      });
    },
  },
};
</script>

<style scoped lang="less">
.container-item {
  margin-bottom: 19.2px;
  .title {
    font-size: 12.8px;
    color: #000000;
    line-height: 19.2px;
    font-weight: 500;
    margin-bottom: 9.6px;
  }
  .cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .cards-item {
      width: calc(50% - 6.4px);
      margin-bottom: 12.8px;
      background: #f9f9f9;
      border-radius: 6.4px;
      padding: 6.4px;
      &.sbgj {
        width: 100%;
      }
      .name {
        font-size: 12.8px;
        color: #000000;
        line-height: 19.2px;
        font-weight: 500;
        margin-bottom: 9.6px;
        .status {
          margin-left: 6.4px;
          padding: 0 6.4px;
          font-size: 9.6px;
          background: #e6f9f3;
          border-radius: 8.8px;
          color: #0cc991;
          line-height: 16px;
          font-weight: 400;
          &.warning {
            background: #fdebe9;
            color: #f55a42;
          }
        }
      }
      .list {
        display: flex;
        align-items: flex-start;
        margin-bottom: 9.6px;
        &:last-child {
          margin-bottom: 0;
        }
        .label {
          width: 56px;
          font-size: 11.2px;
          color: #7c7c7c;
          line-height: 17.6px;
          font-weight: 400;
        }
        .content {
          flex: 1;
          word-wrap: break-word;
          font-size: 11.2px;
          color: #000000;
          line-height: 17.6px;
          font-weight: 400;
          display: flex;
          flex-wrap: nowrap;
          // justify-content: space-between;
          .image-item {
            width: 57.6px;
            height: 57.6px;
            margin-right: 6.4px;
            border-radius: 3.2px;
          }
        }
      }
    }
  }
}
</style>
