<template>
	<view class="ctr">
    <view class="price-ctr">
      <view class="price flex-c">平台已收款</view>
      <view class="desc flex-c">服务价格</view>
    </view>
    <view class="info">
      <view class="item-row flex-sb line-after">
        <view class="title flex-l">当前状态</view>
        <view class="value flex-r order-status">
          <text>待接单</text>
        </view>
      </view>
      <view class="item-row flex-sb line-after">
        <view class="title flex-l">服务类型</view>
        <view class="value flex-r">
          <text>日常保洁</text>
        </view>
      </view>
      <view class="item-row flex-sb line-after">
        <view class="title flex-l">客户姓名</view>
        <view class="value flex-r">
          <text>倪运昊</text>
        </view>
      </view>
      <view class="item-row flex-sb">
        <view class="title flex-l">客户电话</view>
        <view class="value flex-r value-theme">
          <me-icon class="icon" type="icon-call" color="var(--themeColor)" size="40rpx"></me-icon>
          <text>18628195903</text>
        </view>
      </view>
      <view class="item-row flex-sb line-after">
        <view class="title flex-l">预约上门时间</view>
        <view class="value flex-r">
          <text>2025年03月22日21:01</text>
        </view>
      </view>
      <view class="item-multi-line line-after">
        <view class="title flex-l">客户地址</view>
        <view class="value flex-l">浙江省瑞安市迎宾路58号海洋家属楼506号517房</view>
      </view>
      <view class="item-multi-line">
        <view class="title flex-l">客户备注</view>
        <view class="value flex-l">千古江山，英雄无觅孙仲谋处。舞榭歌台，风流总被雨打风吹去。斜阳草树，寻常巷陌，人道寄奴曾住。想当年，金戈铁马，气吞万里如虎。</view>
      </view>
    </view>
    <me-empty-space height="376"></me-empty-space>
    <view class="bottom">
      <me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="686rpx" text-color="var(--titleColor)"></me-button>

      <me-button @click="submit()" text="确认接单" width="686rpx" icon-type="icon-flashlight" margin-top="32rpx"></me-button>
    </view>
	</view>
</template>

<script setup>

import MeIcon from "../../components/me-icon/me-icon.vue";
import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
import MeButton from "../../components/me-button/me-button.vue";
import helpers from "../../utils/helpers";

const submit = () => {
  helpers.jumpToPage('order-submit')
}
</script>

<style lang="scss" scoped>
.ctr {
  padding: 0 32rpx;
  box-sizing: border-box;
  height: 100vh;
  .price-ctr {
    height: 200rpx;
    width: 100%;
    padding: 32rpx 20rpx;
    box-sizing: border-box;
    .price {
      width: 100%;
      height: 80rpx;
      font-weight: 500;
      font-size: 36rpx;
      color: var(--titleColor);
    }
    .desc {
      width: 100%;
      height: 56rpx;
      font-size: 28rpx;
      color: var(--summaryColor);
    }
  }
  .info {
    width: 100%;
    background: var(--containerBgColor);
    border-radius: 16rpx;
    padding: 20rpx;
    box-sizing: border-box;
    .item-row {
      width: 100%;
      height: 80rpx;
      position: relative;
      .title {
        width: 200rpx;
        height: 100%;
        font-size: 30rpx;
        color: var(--summaryColor);
      }
      .value {
        width: 446rpx;
        height: 100%;
        font-size: 30rpx;
        color: var(--titleColor);
        .icon {
          margin-right: 8rpx;
        }
      }
      .order-status {
        color: #E18F00 !important;
      }
      .value-theme {
        color: var(--themeColor) !important;
      }
    }
    .item-multi-line {
      width: 100%;
      position: relative;
      padding-bottom: 8rpx;
      box-sizing: border-box;
      .title {
        width: 100%;
        height: 80rpx;
        font-size: 30rpx;
        color: var(--summaryColor);
      }
      .value {
        width: 100%;
        font-size: 30rpx;
        color: var(--titleColor);
        line-height: 48rpx;
      }
    }
  }
  .bottom {
    width: 100%;
    padding-top: 20rpx;
    padding-bottom: 68rpx;
    background: var(--pageBgColor);
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
  }
}
</style>
