<template>
	<view class="ctr">
    <view class="fixed-top">
      <me-top title="接单大厅"></me-top>
    </view>

    <me-empty-space :height="listMarginTop"></me-empty-space>
    <view class="list">
      <view class="item">
        <view class="top flex-sb">
          <view class="type flex-l">日常保洁</view>
          <view class="price flex-r">平台已收款</view>
        </view>
        <view class="content flex-sb">
          <view class="left">
            <view class="address-name flex-l">
              金城花园(天府二街)
            </view>
            <view class="address">
              广东省茂名市茂南区金城路26号大院附近
            </view>
            <view class="time-ctr flex-l">
              <me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
              <text class="time">周日 10月08日 12:30</text>
            </view>
          </view>
          <view class="right">
            <view class="icon-ctr flex-c">
              <me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
            </view>
            <view class="distance flex-c">8.34公里</view>
          </view>
        </view>
        <view class="btn-ctr flex-sb">
          <me-button @click="" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
          <me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="166rpx" text-color="var(--titleColor)"></me-button>
        </view>

      </view>
      <view class="item">
        <view class="top flex-sb">
          <view class="type flex-l">日常保洁</view>
          <view class="price flex-r important-color">上门报价</view>
        </view>
        <view class="content flex-sb">
          <view class="left">
            <view class="address-name flex-l">
              金城花园(天府二街)
            </view>
            <view class="address">
              广东省茂名市茂南区金城路26号大院附近
            </view>
            <view class="time-ctr flex-l">
              <me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
              <text class="time">周日 10月08日 12:30</text>
            </view>
          </view>
          <view class="right">
            <view class="icon-ctr flex-c">
              <me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
            </view>
            <view class="distance flex-c">8.34公里</view>
          </view>
        </view>
        <view class="discount flex-l">已支付订金：30元抵扣50元</view>
        <view class="btn-ctr flex-sb">
          <me-button @click="" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
          <me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="166rpx" text-color="var(--titleColor)"></me-button>
        </view>

      </view>
      <view class="item">
        <view class="top flex-sb">
          <view class="type flex-l">日常保洁</view>
          <view class="price flex-r important-color">上门报价</view>
        </view>
        <view class="content flex-sb">
          <view class="left">
            <view class="address-name flex-l">
              金城花园(天府二街)
            </view>
            <view class="address">
              广东省茂名市茂南区金城路26号大院附近
            </view>
            <view class="time-ctr flex-l">
              <me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
              <text class="time">周日 10月08日 12:30</text>
            </view>
          </view>
          <view class="right">
            <view class="icon-ctr flex-c">
              <me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
            </view>
            <view class="distance flex-c">8.34公里</view>
          </view>
        </view>
        <view class="discount flex-l">已支付订金：30元抵扣50元</view>
        <view class="btn-ctr flex-sb">
          <me-button @click="" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
          <me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="166rpx" text-color="var(--titleColor)"></me-button>
        </view>
      </view>
    </view>
    <me-empty-space height="100"></me-empty-space>
	</view>
</template>

<script setup>
import {onLoad, onShow} from '@dcloudio/uni-app'
import {ref, reactive, computed, watch, inject} from 'vue'
import MeIcon from "../../components/me-icon/me-icon";
import MeButton from "../../components/me-button/me-button";
import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
import MeTop from "../../components/me-top/me-top.vue";
const data = reactive({
  globalData: {},
})
onLoad(() => {
  data.globalData = inject('globalData')
})

const listMarginTop = computed(() => {
  return (data.globalData.statusBarH + (data.globalData.customBarH - data.globalData.statusBarH)) * 2
})
</script>

<style lang="scss" scoped>
.ctr {
  padding: 0 32rpx;
  box-sizing: border-box;
  .fixed-top {
    position: fixed;
    top: 0;
    background-color: var(--pageBgColor);
    width: 100%;
  }
  .list {
    .item {
      width: 100%;
      background: var(--containerBgColor);
      border-radius: 16rpx;
      padding: 20rpx;
      box-sizing: border-box;
      margin-top: 32rpx;
      .top {
        height: 60rpx;
        .type,.price {
          width: 323rpx;
          height: 100%;
        }
        .type {
          font-weight: 500;
          font-size: 34rpx;
          color: var(--titleColor);
        }
        .price {
          font-size: 30rpx;
          color: var(--summaryColor);
        }
        .important-color {
          color: var(--importantColor) !important;
        }
      }
      .content {
        width: 100%;
        .left {
          width: 466rpx;
          .address-name {
            width: 100%;
            min-height: 60rpx;
            font-size: 30rpx;
            color: var(--titleColor);
            line-height: 44rpx;
          }
          .address {
            width: 100%;
            min-height: 60rpx;
            font-size: 28rpx;
            color: var(--summaryColor);
            line-height: 44rpx;
          }
          .time-ctr {
            width: 100%;
            min-height: 80rpx;
            font-size: 28rpx;
            color: var(--themeColor);
            line-height: 44rpx;
            .time {
              margin-left: 8rpx;
            }
          }
        }
        .right {
          width: 180rpx;
          .icon-ctr {
            width: 100%;
            height: 60rpx;
          }
          .distance {
            width: 100%;
            height: 44rpx;
            font-size: 28rpx;
            color: var(--titleColor);
            line-height: 44rpx;
            margin-top: 32rpx;
          }
        }
      }
      .discount {
        width: 100%;
        height: 64rpx;
        background: rgba(230,82,31,0.1);
        border-radius: 16rpx;
        font-size: 28rpx;
        color: var(--importantColor);
        padding: 0 16rpx;
        box-sizing: border-box;
      }
      .btn-ctr {
        width: 100%;
        height: 126rpx;
        box-sizing: border-box;
        margin-top: 10rpx;
      }
    }
  }
}
</style>
