<template>
  <view class="page inspection">
    <uni-nav-bar
      dark
      :fixed="true"
      :border="false"
      background-color="#004098"
      status-bar
      left-icon="left"
      :title="$t('inspection.viewWorkOrder')"
      @clickLeft="navigatorBack()"
    />
    <view class="page-top">
      <view class="top-content flex-col justify-start align-start">
        <view class="align-center">
          {{ $t("workOrder.workOrderNumber") }}: {{ details.inspectOrderCode }}
        </view>
        <view class="align-center">
          {{ $t("workOrder.workOrderName") }}: {{ details.inspectOrderTitle }}
        </view>
        <view class="align-center">
          {{ $t("workOrder.planCode") }}: {{ details.planCode }}
        </view>
        <view class="align-center">
          {{ $t("workOrder.responsiblePerson") }}: {{ details.chargeName }}
        </view>
      </view>
    </view>
    <view class="page-content">
      <scroll-view class="tabs-container" :scroll-x="true" scroll-left="120">
        <uni-segmented-control
          class="justify-start"
          :current="currentTab"
          :values="tabs"
          :style-type="'text'"
          :active-color="'#0082CC'"
          @clickItem="onClickItem"
        />
      </scroll-view>
      <swiper
        class="swiper-container"
        :current="currentTab"
        duration="100"
        @change="onSwiperChanged($event)"
      >
        <swiper-item v-for="detail in details.details">
          <view class="step-number flex-row justify-between align-center">
            <!-- 待填写巡检项 -->
            <view
              class="step-number-item flex-col justify-between align-center"
            >
              <view class="step-number-text">
                {{ $t("inspection.pendingInspectionItems") }}
              </view>
              <view class="step-number-num">
                {{ detail.itemNeed }}
              </view>
            </view>
            <!-- 正常巡检项 -->
            <view
              class="step-number-item flex-col justify-between align-center"
            >
              <view class="step-number-text">
                {{ $t("inspection.normalInspectionItems") }}
              </view>
              <view class="step-number-num color-green">
                {{ detail.itemNormal }}
              </view>
            </view>
            <!-- 异常巡检项 -->
            <view
              class="step-number-item flex-col justify-between align-center"
            >
              <view class="step-number-text">
                {{ $t("inspection.abnormalInspectionItems") }}
              </view>
              <view class="step-number-num color-red">
                {{ detail.itemException }}
              </view>
            </view>
          </view>
          <scroll-view class="step-section" :scroll-y="true" scroll-top="120">
            <view class="step-form" v-for="stepItem in detail.orderDetails">
              <view class="step-title form-remark align-center justify-between">
                <view>
                  {{ $t("inspection.projItem") }}
                </view>
                <view style="color: #004098">
                  {{ stepItem.item }}
                </view>
                <view class="border"></view>
              </view>
              <view class="step-standard form-remark">
                <view class="form-title">{{ $t("inspection.standard") }}</view>
                <view>
                  {{ stepItem.standard }}
                </view>
              </view>
              <view class="step-standard file" v-if="stepItem.urls">
                <view class="file-title">
                  {{ $t("inspection.standardFile") }}
                </view>
                <view class="file-media">
                  <video
                    class="video"
                    id="myVideo"
                    :src="stepItem.urls"
                    controls
                    v-if="stepItem.urls && stepItem.urls.includes('mp4')"
                  ></video>
                  <uni-file-picker
                    class="pic"
                    file-mediatype="image"
                    mode="grid"
                    :auto-upload="false"
                    :limit="1"
                    :imageStyles="{ border: false }"
                    v-model="stepItem.urlsList"
                    readonly
                    v-if="
                      stepItem.urls &&
                      (stepItem.urls.includes('jpg') ||
                        stepItem.urls.includes('png'))
                    "
                  >
                  </uni-file-picker>
                </view>
              </view>
              <view class="step-form-item">
                <view class="form-remark flex-row justify-between align-center">
                  <view class="form-title">
                    {{ $t("inspection.isAbnormal") }}
                  </view>
                  <view class="form-btns flex-row justify-center">
                    {{
                      stepItem.ifNormal === null
                        ? ""
                        : stepItem.ifNormal
                        ? $t("inspection.normal")
                        : $t("inspection.abnormal")
                    }}
                  </view>
                </view>

                <view class="form-remark flex-row justify-between align-center">
                  <view class="form-title">
                    {{ $t("inspection.abnormalDesc") }}
                  </view>
                  <uni-easyinput
                    style="text-align: right"
                    type="textarea"
                    :autoHeight="true"
                    :disabled="true"
                    :inputBorder="false"
                    :clearable="false"
                    :styles="{ disableColor: '#F2F4F8' }"
                    v-model="stepItem.description"
                    :placeholder="''"
                  />
                </view>
                <view
                  :class="
                    stepItem.picUrlList.length > 0
                      ? 'form-pic'
                      : 'form-remark flex-row justify-between align-center'
                  "
                  style="border: none"
                >
                  <view class="form-title">
                    {{ $t("general.picture") }}
                  </view>
                  <uni-file-picker
                    v-if="stepItem.picUrlList.length > 0"
                    class="pic"
                    file-mediatype="image"
                    mode="grid"
                    :auto-upload="false"
                    :limit="1"
                    :imageStyles="{ border: false }"
                    v-model="stepItem.picUrlList"
                    readonly
                  >
                  </uni-file-picker>
                </view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>
<script setup>
import {
  ref,
  reactive,
  onMounted,
  onUnmounted,
  computed,
  getCurrentInstance,
} from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {
  getInspectOrderGet,
  getInspectOrderGetDetails,
  inspectOrderWrite,
} from "@/api/inspection.js";

import dayjs from "dayjs";
import { useDataDictStore } from "@/store/modules/dataDict";
// 引用全局变量$t
const { appContext } = getCurrentInstance();
const t = appContext.config.globalProperties.$t;
const { getDataDictList } = useDataDictStore();
// 状态
const statusDict = reactive({});
getDataDictList("pms_failure_status").map((item) => {
  statusDict[item.value] = item.label;
});
console.log("statusDict", statusDict);

const workOrderId = ref("");
const tabs = ref([]);
const details = ref([]);
const getData = async () => {
  await getInspectOrderGet({
    id: workOrderId.value,
  }).then((res) => {
    console.log("getInspectOrderGet", res);
    // 组成设备tab
    const data = res.data.details.map((item) => item.deviceName);
    tabs.value = data;
    // 遍历res.data数组中orderDetails数组
    res.data.details.map((item) => {
      item.allStepsList = [];
      // 默认当前步骤为0
      item.currentStep = 0;
      const ifNormalArr = [];
      item.orderDetails.map((detail) => {
        // 将picUrl和urls字段组成数组
        detail.picUrlList = [];
        detail.urlsList = [];
        if (detail.picUrl) {
          detail.picUrlList.push({
            url: detail.picUrl,
          });
        }
        if (detail.urls) {
          detail.urlsList.push({
            url: detail.urls,
          });
        }
      });
    });
    details.value = res.data;
    console.log("details.value", details.value);
  });
};

const currentTab = ref(0);
const onClickItem = (e) => {
  if (currentTab.value !== e.currentIndex) {
    currentTab.value = e.currentIndex;
  }
};
const onSwiperChanged = (e) => {
  currentTab.value = e.detail.current;
};
// 上传图片
const upload = async (event) => {
  for (const path of event.tempFilePaths) {
    currentStepInfo.value.picUrl = (await uploadFile(path)).data;
  }
};

const navigatorBack = () => {
  uni.navigateBack();
};
onLoad((option) => {
  workOrderId.value = option.id;
  getData();
});

// 页面挂载时计算，监听窗口变化
onMounted(() => {});

onUnmounted(() => {});
</script>
<style lang="scss" scoped>
@import "@/style/work-order-detail.scss";
$navbarHeight: 44px;
$tabsHeight: 56px;
$pageTopHeight: 164px;
$stepNumberHeight: 60px;

.page {
  padding: 0;
  position: relative;
  /* 1. 占满视口高度，确保页面不塌陷 */
  min-height: 100vh;
  /* 2. 垂直排列子元素（page-top + page-content） */
  display: flex;
  flex-direction: column;
  /* 3. 预留 navbar + 状态栏高度（避免内容被 fixed 的导航栏遮挡） */
  // padding-top: var(--status-bar-height);
  box-sizing: border-box; /* 确保 padding 不影响总高度 */
  background: #004098;
}

.page-top {
  position: relative;
  background: #004098;
  width: 100%;
  /* 1. 移除固定高度，由内容自适应 */
  // height: $pageTopHeight;
  padding: 10px 20px; // 仅用内边距控制间距
  padding-bottom: 30px;
  box-sizing: border-box;
}

.top-content {
  box-sizing: border-box;
  width: 100%;
  /* 1. 移除固定高度，避免限制内容 */
  // height: 100%;
  font-size: 16px;
  color: #ffffff;
  line-height: 28px;
}
$absoluteTop: -25px;
.page-content {
  position: relative;
  width: 100%;
  // height: calc(
  //   100% - $navbarHeight - $pageTopHeight - $absoluteTop - var(--status-bar-height)
  // );
  /* 1. 用 flex:1 填充 .page 剩余空间（自动适配 page-top 高度） */
  flex: 1;
  /* 2. 保留原有视觉效果（覆盖 page-top 顶部，显示圆角） */
  margin-top: $absoluteTop;
  background: #fff;
  border-radius: 20px 20px 0px 0px;
  /* 3. 防止内部元素溢出破坏样式 */
  overflow: hidden;
  box-sizing: border-box;
}

.tabs-container {
  position: relative;
  width: 100%;
  height: $tabsHeight;
  white-space: nowrap;
  padding: 10px 20px;
  box-sizing: border-box;
}

:deep(.segmented-control) {
  overflow: unset;
}

:deep(.segmented-control__item) {
  uni-view {
    width: max-content;
    padding: 10px;
  }
}

// swiper 容器：基于 page-content 高度（100%）减去 tabs 高度
.swiper-container {
  position: relative;
  width: 100%;
  height: calc(100% - #{$tabsHeight});
  padding: 0 20px;
  box-sizing: border-box;
  overflow-y: hidden;
  // border: 1px springgreen solid;
}
// 滚动区域：基于 swiper 高度减去 step-number 高度
.step-number {
  margin-bottom: 10px;
  background: #f2f4f8;
  box-sizing: border-box;
  padding: 10px;
}
.step-number-item {
  box-sizing: border-box;
  // padding: 10px;
  background: #f2f4f8;
  color: #333333;
  font-size: 28rpx;
  font-weight: 600;
}

.step-section {
  // font-weight: 600;
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - #{$stepNumberHeight} - 10px - 10px);
  margin-bottom: 10px;
  font-size: 14px;
  color: #333333;
  position: relative;
  // border: 1px saddlebrown solid;
}

.step-form {
  margin-bottom: 10px;
  // height: 100%;
  padding: 10px;
  background: #f2f4f8;
}

.step-all {
  font-weight: 600;
  font-size: 14px;
  color: #004098;
  position: relative;
  padding-left: 10px;
  margin-bottom: 10px;
}

.step-title {
  position: relative;
  font-weight: 600;
  margin-bottom: 10px;
}

.border {
  width: 2px;
  height: 14px;
  background-color: #004098;
  position: absolute;
  left: -10px;
  top: 15pzpx;
}

.step-standard {
  padding-bottom: 10px;
  line-height: 25px;
}

.file-media {
  margin: 10px 0;

  .pic,
  .video {
    width: 100px !important;
    height: 100px !important;
  }

  :deep(.file-picker__box) {
    width: 100px !important;
    height: 100px !important;
  }
}

.form-title {
  margin-right: 15px;
  font-weight: bold;
}

.form-remark {
  min-height: 50px;
  border-bottom: 1px dashed #cacccf;
}

.form-pic {
  min-height: 50px;
  margin-top: 10px;

  .pic {
    width: 100px !important;
    height: 100px !important;
  }

  :deep(.file-picker__box) {
    width: 100px !important;
    height: 100px !important;
  }
}

:deep(.uni-easyinput__content-textarea) {
  min-height: inherit;
  margin: 0px;
}

:deep(.uni-textarea-textarea:disabled) {
  color: #333333;
}

.step-btns {
  // margin: 10px;
  height: 50px;
  width: 100%;
  background: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2;

  uni-button {
    width: calc(33.3% - 20px);
    font-size: 14px;
    height: 32px;
    line-height: 32px;
  }
}

.popup-content {
  width: 100%;
  min-height: 300px;
  max-height: 500px;
  overflow-y: auto;
  position: relative;
  box-sizing: border-box;
  padding: 20px;
}

:deep(.uni-steps__column-text) {
  height: 38px;
  font-weight: 600;
  font-size: 14px;
  color: #666666;
  line-height: 30px;
  display: flex;
  // justify-content: center;
  border: none;
}

:deep(.uni-steps__column-title) {
  color: #666666;
}

:deep(.uni-steps__column-line-item) {
  color: #666666;
  height: 50px !important;
}

:deep(.uni-steps__column-circle) {
  color: #666666;
  height: 10px;
  width: 10px;
}
</style>
