<template>
  <uni-card spacing="0">
    <view class="detail-content">
      <up-row align="top">
        <template v-for="item in deviceSchema">
          <up-col :span="item.span ? item.span : 4">
            <view class="x-f detail-item" :style="item.itemStyle">
              <view class="detail-label" :style="item.labelStyle">{{ item.label }}：</view>
              <template v-if="item.field == 'photo'">
                <view style="height: 50px">
                  <up-album multipleSize="50" singleSize="50" maxCount="2" :urls="imgs"></up-album>
                </view>
              </template>
              <text v-else class="detail-value" :style="item.valueStyle">{{ detailInfo[item.field] }}</text>
            </view>
          </up-col>
        </template>
      </up-row>
    </view>
  </uni-card>
  <up-loading-page :loading="pageLoading"></up-loading-page>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import nx from '@/nx'
import { getDeviceBusInfoById } from '@/nx/api/deviceInfo'
import { getImgBaseUrl } from '@/defaultBaseUrl'
import { deviceSchema } from './deviceBusInfo.data'
const detailId = ref('')
const pageLoading = ref(false)
const emit = defineEmits(['getDeviceInfo'])
onMounted(() => {
  const { id } = nx.$store('biz').deviceInfo
  detailId.value = id
  getDeviceInfo()
})
let detailInfo = ref({})
let imgs = ref([])
// 获取设备详情
async function getDeviceInfo() {
  pageLoading.value = true
  const res = await getDeviceBusInfoById(detailId.value).finally(() => {
    pageLoading.value = false
  })
  detailInfo.value = (data => {
    const statuses = [
      data.repairFlag == 1 && '维修',
      data.demoteFlag == 1 && '降级',
      data.scrapFlag == 1 && '报废',
      data.disableFlag == 1 && '停用',
      data.lendFlag == 1 && '外借'
    ].filter(Boolean) // 去掉 false 值

    if (data.acceptFlag != 'finished') {
      data.deviceStatus = '--'
      data.inUseFlag = '--'
    } else {
      data.deviceStatus = statuses.length > 0 ? statuses.join('、') : '正常'
      if (data.inUseFlag == '1') {
        data.inUseFlag = '是'
      } else {
        data.inUseFlag = '否'
      }
    }
    switch (data.acceptFlag) {
      case '0':
        data.acceptFlag = '待验收'
        break
      case 'running':
        data.acceptFlag = '验收审批中'
        break
      case 'finished':
        data.acceptFlag = '已验收'
        break
      default:
        data.acceptFlag = '--'
    }
    return data
  })(res)
  imgs.value = getFileList(res.photo)
  emit('getDeviceInfo', detailInfo.value)
}
function getFileList(photo) {
  if (photo) {
    let fileIds = photo.split(',').map(item => getImgBaseUrl() + item)
    return fileIds
  } else {
    return []
  }
}
</script>

<style scoped>
.detail-content {
  border: 0.5px solid #f0f0f0;
  width: 100%;
  .detail-item {
    display: flex;
    align-items: center;
    padding: 10px 6px;
    box-sizing: border-box;
    font-size: 16px;
    border: 0.5px solid #f0f0f0;
    .detail-label {
      color: #000;
    }
    .detail-value {
      font-size: 14px;
      width: 72%;
      overflow: auto;
    }
  }
}
:deep(.u-row) {
  flex-wrap: wrap;
  width: 100%;
}
</style>
