<template>
  <BasicLayout>
    <!-- 巡查记录列表 -->
    <view class="inspection-list">
      <BasicListLayout
        @register="registerInspection"
        style="position: absolute"
      >
        <template v-slot="{ data, index }">
          <view class="inspection-record bg-white r-md p-15 mb-15">
            <view class="record-header">
              <view class="record-time">
                <u-icon name="clock" color="#666" size="14"></u-icon>
                <text class="time-text">{{ formatTime(data.xctime) }}</text>
              </view>
              <view class="record-status">
                <text class="status-text">已巡查</text>
              </view>
            </view>
            <view class="record-content">
              <view class="content-item">
                <text class="item-label">巡查教师：</text>
                <text class="item-value">{{ data.jsxm }}</text>
              </view>
              <view class="content-item flex-col">
                <text class="item-label" style="flex: 0 0 25px"
                  >巡查项目：</text
                >
                <view class="item-value" style="width: 100%">
                  <template
                    v-if="data.xkXcXmList && data.xkXcXmList.length > 0"
                  >
                    <view
                      v-for="(xm, idx) in data.xkXcXmList"
                      :key="xm.xcXmId"
                      style="margin-bottom: 4px"
                    >
                      <view>
                        <text>{{ idx + 1 }}、{{ xm.xcMc }}</text>
                        <view
                          style="
                            display: flex;
                            justify-content: space-between;
                            margin: 4px 0;
                          "
                        >
                          <text>分值：{{ xm.xmFz }}分</text>
                          <text
                            >巡查结果：{{
                              xm.xcJg === "A" ? "有" : "无"
                            }}</text
                          >
                        </view>
                      </view>
                    </view>
                  </template>
                  <template v-else> 无巡查项目 </template>
                </view>
              </view>
              <view
                class="content-item"
                v-if="data.zp && data.zp.length > 0"
              >
                <text class="item-label">巡查图片：</text>
                <view
                  class="item-value"
                  style="display: flex; flex-wrap: wrap; gap: 8px"
                >
                  <image
                    v-for="(img, imgIdx) in getImageArray(data.zp)"
                    :key="imgIdx"
                    :src="imagUrl(img)"
                    mode="aspectFill"
                    style="
                      width: 60px;
                      height: 60px;
                      border-radius: 4px;
                      border: 1px solid #eee;
                      cursor: pointer;
                    "
                    @click="handlePreviewImage(img, getImageArray(data.zp))"
                  />
                </view>
              </view>
              <view
                class="content-item"
                v-if="data.sp && data.sp.length > 0"
              >
                <text class="item-label">巡查视频：</text>
                <view
                  class="item-value"
                  style="display: flex; flex-wrap: wrap; gap: 8px"
                >
                  <view
                    v-for="(video, vIdx) in getVideoArray(data.sp)"
                    :key="vIdx"
                    style="
                      width: 80px;
                      height: 60px;
                      position: relative;
                      border-radius: 4px;
                      overflow: hidden;
                      border: 1px solid #eee;
                      cursor: pointer;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      background: #000;
                    "
                    @click="handlePreviewVideo(getVideoArray(data.sp), vIdx)"
                  >
                    <video
                      :src="video"
                      style="width: 100%; height: 100%; object-fit: cover"
                      :controls="false"
                      :show-center-play-btn="false"
                      :show-play-btn="false"
                      :show-fullscreen-btn="false"
                      :show-progress="false"
                      :show-mute-btn="false"
                      :enable-progress-gesture="false"
                      :enable-play-gesture="false"
                      :loop="false"
                      :muted="true"
                      :poster="''"
                    ></video>
                    <view
                      style="
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      "
                    >
                      <u-icon
                        name="play-right-fill"
                        color="#fff"
                        size="28"
                      ></u-icon>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </template>
      </BasicListLayout>
    </view>
  </BasicLayout>
</template>

<script setup lang="ts">
import { xkXcFindPageApi } from "@/api/base/xkXcApi";
import BasicLayout from "@/components/BasicLayout/Layout.vue";
import { useLayout } from "@/components/BasicListLayout/hooks/useLayout";
import { useDataStore } from "@/store/modules/data";
import { useUserStore } from "@/store/modules/user";
import { computed, onMounted, ref } from "vue";
import dayjs from "dayjs";
import { imagUrl } from "@/utils";

const { getJs } = useUserStore();
const { getData } = useDataStore();

const js = computed(() => getJs);
const xkkc = computed(() => getData);

// 巡查记录列表参数
let inspectionParams = ref({
  rows: 10,
  xkkcId: xkkc.value.id,
  jsId: js.value.id,
});

// 巡查记录列表
const [registerInspection, { reload }] = useLayout({
  api: xkXcFindPageApi,
  componentProps: {},
  param: inspectionParams.value,
});

// 图片预览
const handlePreviewImage = (img: string, images: string[]) => {
  // 兼容uni-app的图片预览API
  uni.previewImage({
    current: img,
    urls: images,
  });
};

// 视频预览
const handlePreviewVideo = (videos: string[], index: number) => {
  // 兼容uni-app的视频预览API
  // uni.previewMedia 仅在H5/小程序/APP支持
  uni.previewMedia({
    current: index,
    sources: videos.map((url) => ({
      url,
      type: "video",
    })),
  });
};

// 格式化时间
const formatTime = (timestamp: string) => {
  return dayjs(timestamp).format("YYYY-MM-DD HH:mm");
};

// 将逗号分隔的字符串转换为数组
const getImageArray = (str: string) => {
  if (!str) return [];
  return str.split(",").map((item) => item.trim());
};

// 将逗号分隔的字符串转换为数组
const getVideoArray = (str: string) => {
  if (!str) return [];
  return str.split(",").map((item) => item.trim());
};

// 页面加载时重新加载巡查记录
onMounted(() => {
  reload();
});
</script>

<style scoped lang="scss">
.inspection-list {
  position: relative;
  height: calc(100vh - 50px);

  .inspection-record {
    .record-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;

      .record-time {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #666;

        .time-text {
          margin-left: 5px;
        }
      }

      .record-status {
        padding: 3px 8px;
        border-radius: 4px;
        border: 1px solid #4080ff;
        display: inline-flex;
        font-size: 12px;
        color: #4080ff;
      }
    }

    .record-content {
      .content-item {
        display: flex;
        margin-bottom: 5px;
        font-size: 14px;
        color: #333;

        .item-label {
          font-weight: bold;
          flex: 0 0 80px;
        }
      }
    }
  }

  ::v-deep .zp-loading-fixed {
    position: absolute;
  }

  ::v-deep .d-load-main {
    position: absolute;
  }
}
</style>
