<template>
  <view>
    <cu-custom bgColor="bg-gradual-blueness" :isBack="true" :isRingt="true">
      <block slot="backText">返回</block>
      <block slot="content">点检清单</block>
    </cu-custom>
    <view class="top-fixed"></view>
    <scroll-view class="dy-scroll-nobg" scroll-y
      :style="'top:' + sTop + 'px;height:calc(100vh - ' + totalHeight + 'px)'">
      <view v-if="list.length > 0">
        <view class="dy-card" v-for="item in list" :key="item.LISTMANAGER_ID">
          <view class="dy-card-title">
            <text><text style="margin-right: 10upx;color: #07BB07;">★</text>{{ item.CHECK_ITEMS }}</text>
          </view>
          <view class="dy-card-content">
            <view class="dy-sub-stitle">
              <text class="text-grey">
                点检结论：{{ item.CHECK_CONCLUSION === '1' ? '合格' : '不合格' }}
              </text>
              <text class="text-grey">
                问题描述：{{ item.CHECK_DESCRIBE }}
              </text>
            </view>
            <view class="check-box">
              <text class="text-grey">检查图片：</text>
              <image class="check-img" style="width:50%; height:auto;" :src="item.CHECK_PIC" mode="widthFix"
                @tap="viewImage(item)">
              </image>
            </view>
          </view>
        </view>
      </view>
      <view v-else-if="dataFlag === 'noData'" class="dy-null">
        <view class="dy-null-img">
          <image :src="background[dataFlag].url" mode=""></image>
        </view>
        <view class="dy-null-title">
          {{ background[dataFlag].msg }}
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { basePath, loginUser, loginSession } from '@/common/tool.js';
export default {
  data() {
    return {
      sTop: 0,
      totalHeight: 0,
      list: [],
      currentPage: 1,
      rows: 10,
      dataFlag: 'noData',
      searchQuery: '',
      CHECK_ID: '' // 用于存储传递过来的CHECK_ID
    }
  },
  onLoad(options) {
    this.CHECK_ID = options.CHECK_ID || ''; // 获取传递过来的CHECK_ID
    this.getData();
    loginSession();
    this.background = require('@/common/background.json'); // 引入空数据的背景图片
  },
  onReady() {
    let that = this;
    let CustomBar = this.CustomBar;
    // 调用uni-app接口获取屏幕高度
    uni.getSystemInfo({
      // 成功回调函数
      success(res) {
        let titleH = uni.createSelectorQuery().select(".top-fixed");
        titleH.boundingClientRect(data => {
          // 计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
          that.sTop = data.height;
          that.totalHeight = data.height + CustomBar;
        }).exec();
      }
    });
  },
  methods: {
    getData() {
      var _this = this;
      if (_this.isEnd) {
        return;
      }
      uni.showLoading({ title: '加载中' });
      uni.request({
        url: basePath + '/app/recordinfo/list',
        method: 'POST',
        dataType: 'json',
        header: { 'Content-type': 'application/x-www-form-urlencoded' },
        data: {
          USER_NAME: loginUser.NAME,
          showCount: _this.rows,
          currentPage: _this.currentPage,
          KEYWORDS: _this.searchQuery,
          CHECK_ID: _this.CHECK_ID // 将CHECK_ID作为参数传递
        },
        success: (res) => {
          if ("success" == res.data.result) {
            var content = res.data.varList;
            _this.list = _this.list.concat(content);
            _this.currentPage += 1;
            uni.hideLoading();
          } else {
            uni.showToast({ icon: 'none', title: '系统异常', duration: 2000 });
          }
        }
      });
    },
    /**
     * 图片预览
     */
    viewImage(val) {
      let { CHECK_PIC } = val;
      uni.previewImage({
        urls: [CHECK_PIC],
        current: CHECK_PIC
      })
    },
  }
}
</script>

<style>
.dy-list {
  background: #fff;
  margin-top: 2upx;
}

.dy-card {
  background-color: #fff;
  border-radius: 10upx;
  margin: 30upx
}

.dy-stitle {
  margin: 16upx 0;
}

.dy-sub-stitle {
  margin: 16upx 0;
  display: flex;
  justify-content: space-between;
}

.dy-card-title {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  min-height: 80upx;
  line-height: 80upx;
  padding: 0 30upx;
}

.dy-card-content {
  padding: 0upx 30upx 30upx;
}

.check-box {
  display: flex;
  gap: 5px;
  flex-direction: column;
}

.check-img {
  border-radius: 5px;
}
</style>
