<template>
  <view>
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="订单详情"></uni-nav-bar>
    <view style="padding: 0rpx 24rpx;background-color: white;" v-if="orderInfo">
      <view class="list-item flex-col">
        <view class="flex-row-center-space" style="height: 72rpx;font-size: 28rpx;">
    		<view class="flex-row-center-center">
    		  <image src="/static/imgs/tabbar/mine-gray.png" style="width: 48rpx;height: 48rpx;"/>
    		  <view style="margin-left: 8rpx;font-size: 28rpx;">{{orderInfo.customerEnterpriseName}}</view>
    		</view>
    		<view :style="{ color: statusColor(orderInfo.status) }">{{orderStatusMap[orderInfo.status]}}</view>
    	</view>
    	<view class="flex-row" style="padding: 16rpx 0rpx;border-top: 1rpx solid #f3f3f3;">
            <image style="height: 160rpx;width: 160rpx;" :src="orderInfo.purchasingOrderItems[0].imgUrlList[0]"></image>
    		<view class="flex-col" style="margin-left: 16rpx;flex: 1;">
    			<view class="flex-row-center-space">
    				<view style="font-size: 30rpx;">{{orderInfo.purchasingOrderItems[0].productName}}</view>
    				<view style="font-size: 28rpx;">{{orderInfo.purchasingOrderItems[0].quantity}} {{orderInfo.purchasingOrderItems[0].unit || '个'}}</view>
    			</view>
    			<view style="font-size: 24rpx;color: #cccccc;margin-top: 16rpx;">尺寸：{{orderInfo.purchasingOrderItems[0].trimmedSize}}</view>
    			<view style="font-size: 24rpx;color: #cccccc;margin-top: 4rpx;">材质：{{orderInfo.purchasingOrderItems[0].materialsRequirement}}</view>
    			<view class="flex-row-center-start" style="margin-top: 24rpx;">
    				<image src="/static/imgs/cart/icon-time.png" style="width: 40rpx;height: 40rpx;"/>
    				<view style="font-size: 28rpx;color: #cccccc;">交付日期：{{orderInfo.deliveryDate}}</view>
    			</view>
    		</view>
    	</view>
      </view>
    </view>
	<view style="margin-top: 16rpx;display: flex;align-items: center;justify-content: center;" v-if="diff">
	    <text style="margin-right: 12px;font-size: 16px;">还剩</text>
	 	<countdown :day="diff.day" :hour="diff.hours" :minute="diff.minutes" :second="diff.seconds" color="#007AFF" font-size="18"/>
	</view>
	<view style="display: flex;align-items: center;padding: 24rpx 48rpx 12rpx 48rpx;" v-if="orderInfo">
		<view style="background-color: #cccccc;flex: 1;height: 1px;"></view>
		<view style="font-size: 28rpx;margin: 0 24rpx;color: #cccccc;">工艺进度</view>
        <view style="background-color: #cccccc;flex: 1;height: 1px;"></view>
	</view>
	<view style="margin-top: 16rpx;background-color: white;padding: 24rpx;" v-if="orderInfo && orderInfo.purchasingOrderItems[0].processRequirement">
		<text>{{orderInfo.purchasingOrderItems[0].processRequirement}}</text>
	</view>
	<view style="padding: 12rpx 24rpx 24rpx 24rpx;" v-if="orderInfo">
		<uni-steps :options="stepList" active-color="#007AFF" :active="active" direction="column" />
	</view>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { difTime } from '@/utils/index.js'
import { getProdOrderInfo } from '@/apis/orderApi.js'
import { StatusMap } from '@/enums/index'

export default {
  data() {
    return {
      orderId: null,
      orderInfo: null,
	  orderStatusMap: Object.freeze(StatusMap),
	  active: 1,
	  stepList: []
    }
  },
  onLoad(option) {
    if (option.orderId) {
      this.orderId = option.orderId
	  this.init(this.orderId)
    } else {
      uni.showToast({
        title: '订单信息错误',
        icon: 'error',
        success: () => {
          setTimeout(() => {
            back()
          }, 2000)
        }
      })
    }
  },
  onPullDownRefresh() {
    uni.stopPullDownRefresh()
  },
  methods: {
    go2,
    back,
    init(orderId) {
      getProdOrderInfo(orderId).then((res) => {
        if (res) {
          this.orderInfo = res
		  if(this.orderInfo.deliveryDate){
			this.diff = difTime(this.orderInfo.deliveryDate, new Date().getTime())
		  }
		  var steps = []
		  var act = 0
		  const nodeList = this.orderInfo.purchasingOrderItems[0].processNodeList
		  for (var i = 0; i < nodeList.length; i++) {
		  	const item = nodeList[i]
			if(item.completedQuantity >= item.planQuantity){
				act++
			}
			var desc = item.completedTime || ''
			if(item.completedQuantity > 0){
				desc += '  完成' + item.completedQuantity + (item.nodeUnit || '张') + '/'
			}
			desc += '计划' + item.planQuantity + (item.nodeUnit || '张')
			steps.push({title: item.nodeTypeName, desc })
		  }
		  this.stepList = steps
		  this.active = act
        }
      })
    },
	statusColor(status){
		if(status == 3){
			return '#028A00'
		}
		if(status == 4){
			return '#007AFF'
		}
		return '#999999'
	},
  }
}
</script>

<style lang="scss" scoped>

</style>
