<template>
  <view class="detail-box">
    <!-- <image
      class="weitu"
      src="@/static/img/add-img/weitu.png"
      mode="aspectFit"
    ></image> -->
    <view class="container">
      <view  class="container-item">
        <view class="cards">
          <view
            v-for="(item, index) in detailsItem"
            :key="index"
            class="cards-item"
          >
            <view class="name"
              >{{ item.dictLabel
              }}<text
                class="status"
                :class="{ warning: item.inspectionResult === 1 }"
                >{{ item.inspectionResult?"异常":"正常" }}</text
              ></view
            >
            <view class="list">
              <view class="label">情况描述：</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="center"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 父组件传递的详情
    detailsItem: {
      type: Array,
      default: () => ([]),
    },
  },
  data() {
    return {};
  },
  mounted() {
    console.log("this.detailsItem", this.detailsItem);
  },
  methods: {},
};
</script>

<style scoped lang="less">
.detail-box {
  border-radius: 0 0 9.6px 9.6px;
  background-color: #fff;
  margin-top: 6.4px;
  .weitu {
    width: 100%;
    margin-bottom: 19.2px;
    height: 280px;
  }
  .container {
    .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>