<template>
  <view class="">
    <view class="cu-list menu-avatar">
      <view class="cu-item" :class="modalName == 'move-box-' + index ? 'move-cur' : ''" v-for="(item, index) in getData" :key="index" :data-target="'move-box-' + index" @tap="goDetail(item)">
        <view class="content" style="left: 0; width: 80%">
          <view class="pro-title">
            <view class="cut">计划：{{ item.plan_name }}</view>
          </view>
          <view class="pro-des">
            <view class="text-cut"> 点位：{{ item.spot_name }} </view>
          </view>
          <view class="pro-date">{{ item.wc_time }}</view>
        </view>
        <view class="nav-right num mr10">
          <view class="text-grey">
            <button class="cu-btn radius bg-green sm" v-if="item.spot_abnormal == 0">正常</button>
            <button class="cu-btn radius bg-orange sm" v-if="item.spot_abnormal == 1">异常</button>
            <button class="cu-btn radius bg-red sm" v-if="item.spot_abnormal == 2">故障</button>
            <button class="cu-btn radius bg-orange sm" v-if="item.spot_abnormal == 3">其他</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, reactive, computed, getCurrentInstance, toRefs, inject, shallowRef } from "vue";
import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";

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

const modalName = ref(null);
const getData = ref([]);

const { proxy } = getCurrentInstance();

// 巡检记录列表数据请求
function goRecordList(params = {}) {
  getInspectionRecordList(params).then((res) => {
    getData.value = res.data;
  });
}

function goDetail(item) {
  uni.navigateTo({
    url: "/pages/business/zhaf/xunJian/record/recordDetail/index?id=" + item.id,
  });
}

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

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

<style lang="scss">
.cu-item {
  height: 180rpx !important;
}
</style>
