<template>
  <uni-card>
    <!-- 标题 -->
    <template v-slot:title>
      <view class="card-title-wrapeer">
        <!-- <text class="cardtitleri flex1">{{ item.bikeCode || "--" }}</text> -->
        <uni-icons
          @click="handleClick"
          type="right"
          size="20"
          class="flex1"
          style="text-align: right"
        ></uni-icons>
      </view>
    </template>
    <!-- 内容 -->
    <uni-forms label-width="80">
      <uni-forms-item label="车辆编号:">
        <view class="deepBlackBoldText">
          <span> {{ item.bikeCode || "--" }}</span>
        </view>
      </uni-forms-item>
      <!-- <uni-forms-item label="维修部位:">
        <view class="deepBlackBoldText">
          <span> {{ item.faultPart || "--" }} </span>
        </view>
      </uni-forms-item> -->
      <!-- <uni-forms-item label="上报时间:">
        <view class="deepBlackBoldText">
          <span> {{ item.reportAt || "--" }} </span>
        </view>
      </uni-forms-item> -->
    </uni-forms>
  </uni-card>
</template>

<script setup>
import { ref, onMounted } from "vue";

const props = defineProps({
  item: {
    type: Object,
    default: () => ({
      title: "默认标题",
      bikeCode: "123456",
      maintainPart: "前轮",
      bikeStatus: "待维修",
      createdAt: "2023-10-01 12:00:00",
    }),
  },
});
const emits = defineEmits(["click"]);

const handleClick = () => {
  emits("click", props.item);
};
</script>

<script>
export default {
  options: { styleIsolation: "shared" },
};
</script>
<style lang="scss" scoped>
.card-title-wrapeer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0px;
  border-bottom: solid 1px #f1f1f1;

  .flex1 {
    flex: 1;
  }

  .cardtitleri {
    font-size: 15px;
    color: #3a3a3a;
    padding: 5px;
    font-weight: bold;
  }
}

.deepBlackBoldText {
  font-weight: bold;
}

:deep(.uni-forms .uni-forms-item__content) {
  position: relative;
  font-size: 14px;
  flex: 1;
  box-sizing: border-box;
  line-height: 15px;
  vertical-align: middle;
  flex-direction: row;
  display: flex;
  align-items: center;
}

:deep(.uni-forms .uni-forms-item) {
  position: relative;
  display: flex;
  margin-bottom: 2px !important;
  flex-direction: row;
}
</style>
