<template>
  <uni-card style="height: 100%" spacing="0">
    <scroll-view scroll-y="true" class="content">
      <up-row>
        <up-col span="6"
          >报废类型：
          <text class="value">{{ scrapInfo.scrapType }}</text>
        </up-col>
        <up-col span="6"
          >报废日期：
          <text class="value">{{ scrapInfo.scrapDate }}</text>
        </up-col>
      </up-row>
      <up-row>
        <up-col span="12"
          >报废原因：
          <text class="value">{{ scrapInfo.scrapReason }}</text>
        </up-col>
      </up-row>
      <wf-comment :commentWf="commentWf" />
      <view class="p20"></view>
    </scroll-view>
  </uni-card>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeMount } from 'vue'
import { scrapDetailList } from '@/nx/api/deviceInfo'
import nx from '@/nx'

onMounted(() => {
  const { id, deviceName } = nx.$store('biz').deviceInfo
  getDetailInfo(id)
})
let scrapInfo = ref({})
let commentWf = ref([])
async function getDetailInfo(id) {
  const records = await scrapDetailList({
    deviceBusInfoId: id
  })
  if (records.length > 0) {
    scrapInfo.value = records[0]
    if (records[0].commentJson) {
      try {
        commentWf.value = JSON.parse(records[0].commentJson)
      } catch (error) {
        uni.showToast({
          title: '解析数据错误',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: 80vh;
  font-size: 18px;
  color: #000;
  padding: 10px;
  .u-row {
    border-bottom: 1px solid #eee;
  }

  .value {
    color: #666;
    font-size: 16px;
  }
}
</style>
