<template>
  <uni-card :is-shadow="false" :border="false" style="width: 40vw" padding="10px">
    <template v-slot:title>
      <view class="text-center u-font-16 font-bold uni-mt-10 uni-mb-4">{{ currentCar?.carNo }}</view>
      <view class="text-center u-font-13">{{ CAR_STATUS[currentCar!.online] }}</view>
    </template>

    <view class="list flex">
      <view class="item flex-1">
        <image class="item-icon" src="@/static/images/angle.png" mode="scaleToFill" />
        <text>{{ currentCar?.sensorAngleV || '-' }}</text>
      </view>
      <view class="item">
        <image class="item-icon" src="@/static/images/vibrate.png" mode="scaleToFill" />
        <text>{{ currentCar?.sensorVibrate || '-' }}</text>
      </view>
      <view class="item">
        <image class="item-icon" src="@/static/images/weight.png" mode="scaleToFill" />
        <text>{{ currentCar?.sensorWeight || '-' }}</text>
      </view>
      <view class="item">
        <image class="item-icon" src="@/static/images/power.png" mode="scaleToFill" />
        <text>{{ currentCar?.sensorPower + '%' || '-' }}</text>
      </view>
    </view>

    <template v-slot:actions>
      <view class="flex justify-between uni-mb-16">
        <u-button size="medium" type="primary" shape="circle" class="bg-main" @click="onCancel">关闭</u-button>
      </view>
    </template>
  </uni-card>
</template>

<script lang="ts" setup>
import { useServiceStore } from '@/store/modules/service';
import { computed } from 'vue';
import { CAR_STATUS } from '@/config/service'

const emits = defineEmits(['on-cancel'])

const service = useServiceStore()

const currentCar = computed(() => service.currentCar)

// cancel
function onCancel() { emits('on-cancel') }

</script>

<style lang="scss" scoped>
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 1em;
  background-color: #f6f6f9;
  margin: 1em 0.5em;
  border-radius: 8px;

  .item-icon {
    width: 2em;
    height: 2em;
    margin-bottom: 0.5em;
  }
}
</style>
