<template>
  <view>
    <view class="timeBox flex justify-between align-center plr10">
      <view class="time">{{ getData.plan_name }}</view>
      <button class="cu-btn radius bg-green sm" v-if="getData.spot_abnormal == 0">正常</button>
      <button class="cu-btn radius bg-orange sm" v-if="getData.spot_abnormal == 1">异常</button>
      <button class="cu-btn radius bg-red sm" v-if="getData.spot_abnormal == 2">故障</button>
      <button class="cu-btn radius bg-red sm" v-if="getData.spot_abnormal == 3">其他</button>
    </view>

    <view>
      <view class="basic-info">
        <view class="info-tit ml5">
          <text class="cuIcon-titles mr5"></text>
          基本信息
        </view>
        <view class="info-content">
          <view class="info-one-info">
            <text>所属单位：</text>
            <text>{{ getData.owner_name }}</text>
          </view>

          <view class="info-one-info">
            <text>单位地址：</text>
            <text>{{ getData.owner_address }}</text>
          </view>
          <view class="info-one-info">
            <text>巡检点位：</text>
            <text>{{ getData.spot_name }}</text>
          </view>
          <view class="info-one-info">
            <text>点位地址：</text>
            <text>{{ getData.spot_address }}</text>
          </view>
          <view class="info-one-info">
            <text>预期时间：</text>
            <text>{{ getData.ywc_time }}</text>
          </view>
          <view class="info-one-info">
            <text>完成时间：</text>
            <text>{{ getData.wc_time }}</text>
          </view>
        </view>
      </view>

      <!-- 巡检信息 -->
      <view class="basic-info">
        <view class="info-tit ml5">
          <text class="cuIcon-titles mr5"></text>
          巡检信息
        </view>
        <view class="info-content">
          <view class="info-one-info">
            <text>巡检人员：</text>
            <text>{{ getData.name }}</text>
          </view>

          <view class="info-one-info">
            <text>联系方式：</text>
            <text>{{ getData.phone }}</text>
          </view>
          <view class="info-one-info">
            <text>巡检描述：</text>
            <text>{{ getData.dwsb_remarks }}</text>
          </view>
        </view>
      </view>
      <!-- 处理状态start -->
      <view class="processStatus">
        <view class="info-tit ml5">
          <text class="cuIcon-titles mr5"></text>
          巡检图片
        </view>
        <view class="plr15 pb20 imgPic">
          <image v-if="!getData.report_photos && dataRes == 1" mode="widthFix" src="@/static/images/defaultImg.jpg" width="100%" />
          <image v-else mode="widthFix" :src="`${websiteUrl}${getData.report_photos}`" width="100%" />
        </view>
      </view>
      <!-- 处理状态end -->
    </view>
  </view>
</template>

<script setup>
import { onLoad, onShow, onLaunch } from "@dcloudio/uni-app";
import { ref, onMounted, reactive, computed, getCurrentInstance, toRefs, inject, shallowRef } from "vue";
import { useStores, commonStores, xunJianStores } from "@/store/modules/index";

import { getInspectionRecordDetails } from "@/api/business/zhaf/xunJian/record.js";

const { proxy } = getCurrentInstance();

const websiteUrl = inject("$websiteUrl");

const arrayList = reactive({
  radio: "A",
  radio: "B",
  modalName: null,
  reason: "",
  type: "0",
  detailMessage: {},
  detailMessage2: {},
  msg: "",
  msg2: "",
  flag: false,
  companyCode: 0,
  getData: {},
  dataRes: 0,
});

const { radio, modalName, reason, type, detailMessage, detailMessage2, msg, msg2, flag, companyCode, getData, dataRes } = toRefs(data);

// 巡检记录列详情数据请求
function goRecordDetail(params = {}) {
  getInspectionRecordDetails(params).then((res) => {
    getData.value = res.data[0];
    dataRes.value = 1;
  });
}

onLoad((option) => {
  goRecordDetail({
    company_code: uni.getStorageSync("selectedCode"),
    id: option.id,
  });
});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});
</script>

<style lang="scss"></style>
