<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" v-for="(item, index) in list" :key="index">
        <view class="u-flex-col l">
          <view>
            <u-image width="60rpx" height="60rpx" :src="imageUrl(`quality-icon${index + 1}.png`)"></u-image>
          </view>
          <view class="name">预计{{ item.name }}时间</view>
          <view class="value">{{ item.startTime }}</view>
          <view class="name">实际{{ item.name }}时间</view>
          <view class="value">{{ item.endTime }}</view>
          <view class="result" v-if="item.flag === 'N'">
            <text class="blue">{{ item.name }}准时</text>
          </view>
          <view class="result" v-if="item.flag === 'Y'">
            <text>{{ item.name }}超时时长</text>
            <text class="red">{{ item.outTime }}小时</text>
          </view>
        </view>
        <view class="r">
          <u-image width="200rpx" height="200rpx" :src="imageUrl(`quality-${item.flag === 'N' ? 'pass' : 'reject'}.png`)"></u-image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Detail from '@/components/order/detail.vue'
const typeName = {
  'take': '接单',
  'app': '预约',
  'checkTime': '上门',
  'finish': '完工'
}
export default {
  components: {
    Detail
  },
  data() {
    return {
      type: '',
      readMore: true, // 是：显示的是'查看更多'按钮；否：显示的是'点击收起'按钮
      background: {
        backgroundColor: 'none',
      },
      orderId: 11919156, // 测试数据
      order: {},
      list: []
    }
  },
  computed: {
    
  },
  onLoad(option) {
    if (option && option.id) {
      this.orderId = option.id
    }

    this.loadOrderDetail()
    this.getOrderTime()
  },
  methods: {
    imageUrl(name) {
      return `${process.uniEnv.qn_base_url}${name}`
    },
    goBack() {
      uni.reLaunch({
        url: '/pages/index/order?type=audit',
      })
    },
    loadOrderDetail() {
      // 获取工单详情
      this.$u.api.orderDetail({}, this.orderId).then(res => {
        if (res.code == 200) {
          this.order = res.data
        } else {
          console.log(res.message, '获取订单详情失败！')
        }
      })
    },
    getOrderTime() {
      this.$u.api.getOrderTime({id: this.orderId}).then(res => {
        const data = res.data
        if (data && data.length > 0) {
          this.list = data.map(v => {
            v.name = typeName[v.type]
            v.startTime = this.$u.timeFormat(v.startTime, 'yyyy-mm-dd hh:MM')
            v.endTime = this.$u.timeFormat(v.endTime, 'yyyy-mm-dd hh:MM')
            return v
          })
        }
      })
    }
  },
}
</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:36rpx;
          padding-top: 30rpx;
        }
        .value {
          color: #6A7D9E;
          font-size:30rpx;
          padding-top: 10rpx;
        }
        .result {
          color: #333;
          font-size: 28rpx;
          padding-top: 30rpx;
          .blue {
            color: #2272FF;
          }
          .red {
            color: #FA5A49;
            margin-left: 20rpx;
          }
        }
      }
    }
  }
}
</style>
