<template>
  <view>
    <view class="device-info-container">
      <view class="device-info-wrapper">
        <view class="info-title">基本信息</view>
        <view class="info-item">
          <view class="info-item-left">设备编号</view>
          <view class="info-item-value">{{ deviceInfo?.number }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-left">设备名称</view>
          <view class="info-item-value">{{ deviceInfo?.name }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-left">服务区</view>
          <view class="info-item-value">{{ deviceInfo?.parkName }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-left">设备分类</view>
          <view class="info-item-value">{{ deviceInfo?.categoryName }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-left">设备规格</view>
          <view class="info-item-value">{{ deviceInfo?.spec }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-left">负责人</view>
          <view class="info-item-value">{{ deviceInfo?.manageBy?.realname || deviceInfo?.manageBy?.username }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-left">负责人电话</view>
          <view class="info-item-value">{{ deviceInfo?.manageMobile }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-left">供应商名称</view>
          <view class="info-item-value">{{ selectedSupplierName }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-left">供应商联系人</view>
          <view class="info-item-value">{{ deviceInfo?.supplierContact }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-left">供应商电话</view>
          <view class="info-item-value">{{ deviceInfo?.supplierMobile }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-left">维保到期日</view>
          <view class="info-item-value">{{ deviceInfo.maintenanceAt ? deviceInfo.maintenanceAt.slice(0, 10) : '' }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-left">状态</view>
          <view class="info-item-value">{{ ['', '在用', '维修中', '处置', '处置审核', '维保'][deviceInfo?.status] }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-left">所在位置</view>
          <view class="info-item-value">{{ deviceInfo?.position }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getDeviceInfo, getDeviceSupplierAll } from '@/api/home'

const deviceInfo = ref<any>({})
const id = ref<string>('')
const supplierList = ref<any>([])

const selectedSupplierName = computed(() => {
  const foundSupplier = supplierList.value.find((supplier: any) => supplier.id === deviceInfo.value?.supplierId)
  return foundSupplier ? foundSupplier.name : ''
})

// 查询设备供应商列表
const getSupplierList = async () => {
  const res = await getDeviceSupplierAll()
  if (res.code === 200) {
    supplierList.value = res.data || []
  }
}

onLoad(async (options) => {
  id.value = options?.id || ''
  const res = await getDeviceInfo(id.value)
  if (res.code === 200) {
    deviceInfo.value = res.data
    // 查询供应商列表
    await getSupplierList()
  }
})
</script>

<style lang="scss" scoped>
.device-info-container {
  box-sizing: border-box;
  padding: 24rpx;
  .device-info-wrapper {
    background-color: #fff;
    padding: 30rpx;
    border-radius: 14rpx;
    margin-bottom: 24rpx;
    .info-title {
      font-size: 32rpx;
      color: #1d2129;
      font-weight: bold;
      margin-bottom: 24rpx;
    }
    .info-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #e5e8ed;
      padding: 24rpx 0;
      &:first-child {
        padding-top: 0;
      }
      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
      .info-item-left {
        font-size: 28rpx;
        color: #1d2129;
        width: 200rpx;
      }
      .info-item-value {
        flex: 1;
        font-size: 28rpx;
        color: #737880;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>
