<template>
  <view class="order-wrap">
    <u-navbar
      title-color="#FFFFFF"
      title-size="32"
      back-icon-color="#FFFFFF"
      :background="background"
      :border-bottom="false"
      :custom-back="goBack"
      title-bold
      title="服务质量"
    ></u-navbar>
    <view class="content">
      <!-- 订单详情 -->
      <view class="card">
        <Detail
          :order="order"
          :readMore.sync="readMore"
          :operate="true"
        ></Detail>
      </view>

      <view class="view-block u-flex u-row-between">
        <view class="u-flex-col l">
          <view>
            <u-image width="80rpx" height="80rpx" :src="imageUrl('quality-icon1.png')"></u-image>
          </view>
          <view class="name">系统接单时间</view>
          <view class="value">2021.04.21 12:00:00</view>
          <view class="name">实际接单时间</view>
          <view class="value">2021.04.21 10:00:00</view>
          <view class="result">
            <text class="blue">接单准时</text>
          </view>
        </view>
        <view class="r">
          <u-image width="200rpx" height="200rpx" :src="imageUrl('quality-pass.png')"></u-image>
        </view>
      </view>

      <view class="view-block u-flex u-row-between">
        <view class="u-flex-col l">
          <view>
            <u-image width="80rpx" height="80rpx" :src="imageUrl('quality-icon2.png')"></u-image>
          </view>
          <view class="name">预约上门时间</view>
          <view class="value">2021.04.21 12:00:00</view>
          <view class="name">实际接单时间</view>
          <view class="value">2021.04.21 10:00:00</view>
          <view class="result">
            <text>上门超时时长</text>
            <text class="red">16小时30分钟</text>
          </view>
        </view>
        <view class="r">
          <u-image width="200rpx" height="200rpx" :src="imageUrl('quality-reject.png')"></u-image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Detail from '@/components/order/detail.vue'

export default {
  components: {
    Detail
  },
  data() {
    return {
      type: '',
      readMore: true, // 是：显示的是'查看更多'按钮；否：显示的是'点击收起'按钮
      background: {
        backgroundColor: 'none',
      },
      orderId: 11918973, // 测试数据
      order: {}
    }
  },
  computed: {
    
  },
  onLoad(option) {
    if (option && option.id) {
      this.orderId = option.id
    }

    this.loadOrderDetail()
  },
  methods: {
    imageUrl(name) {
      return `${process.uniEnv.qn_base_url}${name}`
    },
    goBack() {
      uni.switchTab({
        url:'pages/index/order'
      })
    },
    loadOrderDetail() {
      // 获取工单详情
      this.$u.api.orderDetail({}, this.orderId).then(res => {
        if (res.code == 200) {
          this.order = res.data
        } else {
          console.log(res.message, '获取订单详情失败！')
        }
      })
    }
  },
}
</script>
<style lang="scss">
.order-wrap {
  .u-countdown-colon {
    margin-left: 6rpx;
    margin-right: 6rpx;
  }
  .u-mode-center-box {
    background-color: transparent !important;
    padding-top: 40rpx;
  }
}
</style>

<style lang="scss" scoped>
.order-wrap {
  width: 750rpx;
  height: 100vh;
  overflow: auto;
  background-color: #f4f5f7;
  background-image: linear-gradient(to top, #f4f5f7 0%, #2272ff 50%);
  background-size: 750rpx 600rpx;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;

  .content {
    height: 100%;
    border-radius: 12rpx;
    overflow: auto;
    margin: 0rpx 30rpx 30rpx 30rpx;
    .card {
      background-color: #ffffff;
      margin-bottom: 20rpx;
      padding: 30rpx 30rpx 0 30rpx;
      border-radius: 12rpx;
    }
    .view-block {
      background: #fff;
      padding: 30rpx;
      margin-bottom: 20rpx;
      border-radius: 12rpx;
      .l {
        .name {
          color: #999;
          font-size:40rpx;
          padding-top: 30rpx;
        }
        .value {
          color: #6A7D9E;
          font-size:32rpx;
          padding-top: 10rpx;
        }
        .result {
          color: #333;
          font-size: 28rpx;
          padding-top: 30rpx;
          .blue {
            color: #2272FF;
          }
          .red {
            color: #FA5A49;
            margin-left: 20rpx;
          }
        }
      }
    }
  }
}
</style>
