<template>
<view style="padding: 0rpx 24rpx;">
  <view class="list-item flex-col" @click="emit">
    <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;">{{item.customerEnterpriseName}}</view>
		</view>
		<view :style="{ color: statusColor(item.status) }">{{orderStatusMap[item.status]}}</view>
	</view>
	<view class="flex-row" style="padding: 16rpx 0rpx;border-top: 1rpx solid #f3f3f3;" v-if="item.productInfoList && item.productInfoList.length">
        <image style="height: 160rpx;width: 160rpx;" :src="item.productInfoList[0].img"></image>
		<view class="flex-col" style="margin-left: 16rpx;flex: 1;">
			<view class="flex-row-center-space">
				<view style="font-size: 30rpx;">{{item.productInfoList[0].productName}}</view>
				<view style="font-size: 28rpx;">{{item.productInfoList[0].quantity}} {{item.productInfoList[0].unit || '个'}}</view>
			</view>
			<view style="font-size: 24rpx;color: #cccccc;margin-top: 16rpx;">尺寸：{{item.productInfoList[0].trimmedSize}}</view>
			<view style="font-size: 24rpx;color: #cccccc;margin-top: 4rpx;">材质：{{item.productInfoList[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;">交付日期：{{item.deliveryDate}}</view>
			</view>
		</view>
	</view>
  </view>
</view>
</template>
 #f3f3f3
<script>
import { StatusMap } from '@/enums/index'
export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      orderStatusMap: Object.freeze(StatusMap)
    }
  },
  methods: {
    emit() {
      this.$emit('click', this.item)
    },
	statusColor(status){
		if(status == 3){
			return '#028A00'
		}
		if(status == 4){
			return '#007AFF'
		}
		return '#999999'
	},
    translate(time) {
      if (!time) {
        return ''
      }
      time = time.replace(/-/g, '/')
      let date = new Date(time)
      let month = date.getMonth() + 1
      let day = date.getDate()
      let hour = date.getHours()
      let minute = date.getMinutes()
      if (minute < 10) {
        minute = '0' + minute
      }
      return `最近开机 ${month}月${day}日 ${hour}:${minute}`
    }
  },
  filters: {
    translateRate(rate) {
      if (!rate) {
        rate = 0
      } else {
        rate = rate.toFixed(2)
      }
      return rate
    }
  }
}
</script>

<style lang="scss" scoped>
.list-item {
  padding: 0rpx 20rpx;
  background-color: white;
  border-radius: 16rpx;
  &:last-of-type {
    margin-top: 20rpx;
  }
  .left-section_2 {
    color: rgb(255, 255, 255);
    font-size: 20rpx;
    font-weight: 500;
    line-height: 28rpx;
    white-space: nowrap;
    border-radius: 15rpx;
    width: 180rpx;
    height: 180rpx;
    position: relative;
    overflow: hidden;
    .text-wrapper_3 {
      position: absolute;
      top: 0;
      left: 0;
      padding-top: 4rpx;
      background-color: rgb(82, 196, 26);
      border-radius: 15rpx 0px 15rpx 0px;
      .text_21 {
        margin-left: 6rpx;
        margin-right: 7rpx;
      }
    }
	.text-wrapper_4 {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  padding: 4rpx;
	  background-color: #cccccc88;
	  border-radius: 0rpx 8px 0rpx 15rpx;
	  .text_21 {
	    margin-left: 6rpx;
	    margin-right: 7rpx;
	  }
	}

.text-wrapper_3 {
      position: absolute;
      top: 0;
      left: 0;
      padding-top: 4rpx;
      background-color: rgb(82, 196, 26);
      border-radius: 15rpx 0px 15rpx 0px;
      .text_21 {
        margin-left: 6rpx;
        margin-right: 7rpx;
      }
    }    .view_16 {
      padding-top: initial;
      background-color: rgb(255, 72, 73);
      padding: 3rpx 0 2rpx;
      width: 73rpx;
    }
    .avatar {
      width: 100%;
      height: 100%;
    }
  }
  .right-group {
    margin-left: 5rpx;
    flex: 1 1 auto;
    .top-group {
      padding: 0 0 0 26rpx;
      color: rgb(0, 0, 0);
      font-size: 30rpx;
      font-weight: 500;
      line-height: 42rpx;
      white-space: nowrap;
      align-items: center;
      .name {
        max-width: 360rpx;
      }
      .image_5 {
        margin-left: 8rpx;
        width: 24rpx;
        height: 24rpx;
      }
    }
    .equal-division {
      margin-left: 26rpx;
      .equal-division-item {
        padding: 10rpx 0;
        flex: 1 1 146rpx;
        .text_24 {
          color: rgb(24, 16, 89);
          font-size: 22rpx;
          line-height: 30rpx;
          white-space: nowrap;
        }
        .bottom-group_1 {
          margin-top: 4rpx;
          .text_26 {
            color: rgb(24, 16, 89);
            font-size: 32rpx;
            font-weight: 500;
            line-height: 45rpx;
            white-space: nowrap;
          }
          .text_28 {
            margin: 8rpx 0 6rpx 10rpx;
            color: rgb(24, 16, 89);
            font-size: 22rpx;
            line-height: 30rpx;
            white-space: nowrap;
          }
        }
      }
      .equal-division-item_1 {
        padding: 10rpx 23rpx 10rpx 36rpx;
        flex: 1 1 146rpx;
        .text_30 {
          color: rgb(24, 16, 89);
          font-size: 22rpx;
          line-height: 30rpx;
          white-space: nowrap;
        }
        .bottom-group_2 {
          margin-top: 4rpx;
          .text_32 {
            color: rgb(24, 16, 89);
            font-size: 32rpx;
            font-weight: 500;
            line-height: 45rpx;
            white-space: nowrap;
          }
          .text_34 {
            margin: 8rpx 0 6rpx 10rpx;
            color: rgb(24, 16, 89);
            font-size: 22rpx;
            line-height: 30rpx;
            white-space: nowrap;
          }
        }
      }
      .equal-division-item_2 {
        padding: 10rpx 24rpx 10rpx 26rpx;
        flex: 1 1 146rpx;
        .text_36 {
          color: rgb(24, 16, 89);
          font-size: 22rpx;
          line-height: 30rpx;
          white-space: nowrap;
        }
        .bottom-group_3 {
          margin-top: 4rpx;
          .text_38 {
            color: rgb(24, 16, 89);
            font-size: 32rpx;
            font-weight: 500;
            line-height: 45rpx;
            white-space: nowrap;
          }
          .text_40 {
            margin: 8rpx 0 6rpx 10rpx;
            color: rgb(24, 16, 89);
            font-size: 22rpx;
            line-height: 30rpx;
            white-space: nowrap;
          }
        }
      }
    }
    .bottom-group_4 {
      margin-top: 14rpx;
      padding: 0 26rpx;
      color: rgb(136, 136, 136);
      font-size: 20rpx;
      line-height: 28rpx;
      white-space: nowrap;
      .text_43 {
        margin-left: 11rpx;
      }
    }
  }
  .text_59 {
    margin-top: 23rpx;
    padding-left: 26rpx;
    color: rgb(24, 16, 89);
    font-size: 26rpx;
    font-weight: 500;
    line-height: 37rpx;
    white-space: nowrap;
  }
}
</style>
