<template>
    <view class="content_wrapper">
      <view 
        class="box" 
        v-for="(item,index) of 10" 
        :key="index"
      >
        <!-- 车辆编号  -->
        <view class="row">
            <text class="label">车辆编号</text>
            <view class="value">
                <text style="margin-right: 30rpx;">100757</text>
                <uni-icons type="sound" size="25" style="position: relative;top: 6rpx;" color="blue"></uni-icons>
            </view>
        </view>
          <!-- 接单原因  -->
          <view class="row">
            <text class="label">接单原因</text>
            <text class="value">23123123123231231231232312312312323123123123231231231232312312312323123123123</text>
        </view>
         <!-- 中控品牌  -->
         <view class="row">
            <text class="label">中控品牌</text>
            <text class="value">-</text>
        </view>
         <!-- 设备位置  -->
         <view class="row">
            <text class="label">设备位置</text>
            <view>
                <view>查看地图</view>
                <view style="color: darkgrey;font-size: 28rpx;">110.41,123123.11</view>
            </view>
            <uni-icons type="right" size="20" class="arrows" color="grey"></uni-icons>
        </view>
        <!-- 设备位置  -->
        <view class="row">
            <text class="label">设备距离</text>
            <text class="value">100757m</text>
        </view>   
         <!-- 删除  -->
         <uni-icons type="trash" size="25" class="deleteBtn" color="orange"></uni-icons>
      </view>
     <view style="width: 100%;height: 100rpx;"></view>
        <!-- 确认接单按钮 -->
      <view class="btn_wrapper">
        <button class="btn_style">确认接单</button>
      </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import navigator from '@/utils/navigator.js';

onLoad((options) => {
    //TODO: 页面加载可能会获取参数
});

</script>

<style lang="scss" scoped>
.content_wrapper{
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100vh; 
  padding: 30rpx;
  background-color: rgb(226, 223, 223,.5);
  overflow-y: auto;

  .box{
    position: relative;
    width: 100%;
    padding: 35rpx 25rpx;
    background-color: white;
    border-radius: 12rpx;
    box-shadow: 0 2px 8px #0000000d; 
    margin-bottom: 30rpx;

    .row{
        position: relative;
        display: flex;
        font-size: 30rpx;
        align-items: baseline; 
        margin-bottom: 30rpx;
        :last-child{
            margin-bottom: 0;
        }

        .label{
            width: 150rpx;
            color: gray;
        }

        .value{
            width: calc(100% - 230rpx);
            word-wrap: break-word; 
            word-break: break-all; 
            white-space: pre-wrap; 
        }

        .arrows{
            position: absolute;
            right: 0;
            top:0;
        }
    }

    .deleteBtn{
     position: absolute;
     right: 20rpx;
     top: 25rpx;
     color: red;
     cursor: pointer;
   }
}

  .btn_wrapper{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 20rpx 40rpx 30rpx 40rpx;
    background-color: white;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); 

    .btn_style{
        color: white;
        background-color: #3875f6;
    }

  }

}

</style>