<template>
  <view class="container">
    <u-divider
      text="上报信息"
      text-position="left"
      text-color="rgb(42, 86, 247)"
      line-color="rgb(42, 86, 247)"
      dashed
    />
    <u-cell-group>
      <u-cell title="上报单位" :value="info.DEPARTMENT_NAME" />
      <u-cell title="上报人" :value="info.CREATOR" />
      <u-cell title="上报时间" :value="info.CREATTIME" />
      <u-cell title="上报内容" :value="info.INSPECT_CONTENT" />
      <u-cell title="上报照片">
        <template #label>
          <div class="img-wrap">
            <div v-for="item in info.imgsList" :key="item.FILEPATH">
              <u--image
                :show-loading="true"
                :src="item.FILEPATH"
                width="80px"
                height="80px"
                @click="fnPreview(item.FILEPATH)"
              />
            </div>
          </div>
        </template>
      </u-cell>
    </u-cell-group>
  </view>
</template>

<script>
import { getDisasterPreventionInspectionRecordView } from "@/api";

export default {
  data() {
    return {
      info: {
        imgsList: [],
      },
    };
  },
  onLoad(query) {
    this.fnGetData(query.DISASTER_PREVENTION_INSPECT_ID);
  },
  methods: {
    async fnGetData(DISASTER_PREVENTION_INSPECT_ID) {
      const resData = await getDisasterPreventionInspectionRecordView({
        DISASTER_PREVENTION_INSPECT_ID,
      });
      for (let i = 0; i < resData.pd.imgsList.length; i++) {
        resData.pd.imgsList[i].FILEPATH =
          this.$filePath + resData.pd.imgsList[i].FILEPATH;
      }
      this.info = resData.pd;
    },
    fnPreview(current) {
      uni.previewImage({
        current,
        urls: this.info.imgsList.map((item) => item.FILEPATH),
      });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 20upx;
}
.u-icon {
  justify-content: center;
}
titleStyle {
  font-weight: bold;
}
.cell_tit {
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.img-wrap {
  display: flex;
  flex-wrap: wrap;
  > div {
    margin: 15upx;
  }
}
</style>
