<template>
  <view
    class="order-list-card-wrapper"
  >
    <view class="order-list-yi-top">
      <view class="order-list-yi-top-left">
        订单编号：{{ itemProduct.order_sn }}
      </view>
      <view class="order-list-yi-top-right">
        {{ formatPropsValue(itemProduct,'status') }}
      </view>
    </view>
    <view class="order-list-address">
      <view class="order-list-address__container">
        <view class="order-list-address__remdk">
          <image
            src="https://cdn.bjtdba.com/vod/image/2022-08-13/20220813164638215.png"
            mode="widthFix"
          ></image>
          <view class="order-list-address__content">
            {{ item.user_address || "暂无地址信息" }}
          </view>
        </view>
        <view class="order-list-address__xadasrfe">
          <template >
            <view class="">
              {{ item.real_name }}
            </view>
            <text class="user_phone">
              {{
               formatPropsValue(item, "user_phone")	
              }}
            </text>
          </template>
        </view>
      </view>
    </view>
    <view class="order-list-product">
      <view class="order-list-product__wrapper">
        <view
          class="order-list-content"
          v-for="(items, indexs) in itemProduct.orderProduct"
          :key="indexs"
        >
          <view class="order-list-content-left">
            <view class="order-list-content-left-img">
              <template v-if="items.cart_info">
                <image
                  v-if="items.cart_info.product.image"
                  :src="items.cart_info.product.image"
                  mode="widthFix"
                ></image>
                <text v-else>暂无照片</text>
              </template>
              <template v-else>
                <text>暂无照片</text>
              </template>
            </view>
          </view>
          <view class="order-list-content-middle">
            <view class="order-list-content-middle-top" v-if="items.cart_info">
              {{ items.cart_info.product.store_name }}
            </view>
            <view
              class="order-list-content-middle-top-bot"
              v-if="items.cart_info"
            >
			<view v-if="items.cart_info.productAttr.sku"> {{ items.cart_info.productAttr.sku }}</view>
             <view class="isms" v-else style="height: 30rpx;"></view>
            </view>
          </view>
          <view class="order-list-content-right">
            <view class="order-list-yi-in-neibu-right-im">
              ¥{{ items.cart_info.productAttr.price || 0 }}
            </view>
            <view class="order-list-yi-in-neibu-right-in"> 共 {{items.product_num || 0}} 件 </view>
          </view>
        </view>
      </view>
    </view>
    <view class="order-list-btn">
      <view
        v-if="getBtnAuth(itemProduct,'sendGoods')"
        class="btn-list"
        @click="handleSendOutGoods(itemProduct, 'sendGoods')"
      >
        立即发货
      </view>
      <view
	   v-if="getBtnAuth(itemProduct,'delivered')"
        class="btn-list"
        @click="handleSendOutGoods(itemProduct, 'delivered')"
      >
        已送达
      </view>
      <view
        class="btn-list"
		 v-if="getBtnAuth(itemProduct,'logistics')"
        @click="handleSendOutGoods(itemProduct, 'logistics')"
      >
        查看物流
      </view>
      <view 
	  class="btn-list"
	   v-if="getBtnAuth(itemProduct,'pickup')"
	   @click="handleSendOutGoods(itemProduct, 'pickup')">
        立即自提
      </view>
      <view
	   class="btn-list"
	     v-if="getBtnAuth(itemProduct,'detail')"
	   @click="handleSendOutGoods(itemProduct, 'detail')">
        订单详情
      </view>
    </view>
  </view>
</template>

<script>
import {getOrderListStatus} from "../../orderUtil"
import {MaskRules} from "@/utils/index.js"
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    index: {
      type: Number,
      default: 0,
    },
  },

  data() {
    return {
      itemProduct: {},
    };
  },
  mounted() {
    this.itemProduct = this.item;
  },
  watch: {
    item: {
      handler(value) {
        this.$set(this, "itemProduct", value);
      },
      deep: true,
    },
  },
  methods: {
    getBtnAuth(item,btnType) {
		if(btnType === "sendGoods"){//发送货
		// @click="send(scope.row.order_id)"
		return (item.order_type ==0 && item.status == 0 && item.paid == 1 && item.distribution_mode == 1)
		}else if(btnType === "logistics"){//查看物流 已支付并不等于 待付款
         return item.paid == 1  && item.status != 5 && item.delivery_id
		}else if(btnType === "delivered"){//已送达
		  return false
		}else if(btnType === "pickup"){//自提
			// take(scope.row.order_id)
			return item.order_type == 0 && item.status == 0 && item.paid == 1 && item.distribution_mode == 2
		}else{
			return true
		}
    },
    handleSendOutGoods(item, type) {
      this.$emit("handleSendOutGoods", item, type);
    },
    formatPropsValue(data, type) {
		if(type=="user_phone"){
			if(!data[type]) return "暂无用户手机号码"
			return MaskRules.mobile(data[type])
		}else if(type == "status") {
			return getOrderListStatus(data[type])
		}else {
			return data[type] || "--"
		}
	},
  },
};
</script>

<style lang="scss" scoped>
.order-list-card-wrapper {
  width: 100%;
  min-height: 450rpx;
  background: #ffffff;
  border-radius: 16rpx;
  // border:2rpx solid #f00;
  .order-list-yi-top {
    width: 100%;
    padding: 32rpx 0 32rpx 0;
    border-bottom: 1rpx solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 26rpx;
    .order-list-yi-top-left {
      font-weight: 500;
      color: #333333;
      margin-left: 26rpx;
    }
    .order-list-yi-top-right {
      font-weight: 400;
      color: #1f7cff;
      margin-right: 26rpx;
    }
  }
  &.order-list-yi {
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .order-list-address {
    width: calc(100% - 54rpx);
    margin: 26rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    border-radius: 16rpx;
    &__container {
      width: 100%;
      padding: 20rpx 20rpx 9rpx 16rpx;
      .order-list-address__remdk {
        display: flex;
        align-items: center;
        image {
          width: 38rpx;
          height: 38rpx;
          flex-shrink: 0;
          margin-right: 10rpx;
        }
        .order-list-address__content {
          width: 100%;
          font-size: 26rpx;
          font-weight: 400;
          color: #333333;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
      .order-list-address__xadasrfe {
        width: 100%;
        padding: 10rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #999999;
        display: flex;
        align-items: center;
        word-break: break-all;
        box-sizing: border-box;
        min-height: 28rpx;
        gap: 32rpx;
        .user_phone {
          padding-top: 6rpx;
        }
      }
    }
  }
  .order-list-product {
    // border: 2rpx solid #F00;
    width: calc(100% - 54rpx);
    margin: 0 26rpx;
    &__wrapper {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      .order-list-content {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 10rpx 0 15rpx 0;
        gap: 20rpx;
        .order-list-content-left {
          height: 100%;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          &-img {
            width: 158rpx;
            height: 158rpx;
            background-color: #eee;
            overflow: hidden;
            border-radius: 10rpx;
            flex-shrink: 0;
            image {
              width: 100%;
              height: auto;
            }
          }
        }
      }
      .order-list-content-middle {
        height: 100%;
        flex: 1;

        &-top {
          // width:100%;

          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
          text-align: left;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          line-height: 80rpx;
        }
        &-top-bot {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #666666;
          text-align: left;
        }
      }
      .order-list-content-right {
        height: 73rpx;
        flex-shrink: 0;
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
      }
    }
    .osjdhujfhueihfg {
      // width: 634rpx;
      // height: 272rpx;

      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;

      .order-list-yi-in-neibu {
        width: 634rpx;
        // height: 158rpx;
        // background-color: #1F7CFF;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 10rpx 0 10rpx 0;

        .order-list-yi-in-neibu-left {
          width: 474rpx;
          height: 100%;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;

          .order-list-yi-in-neibu-left-img {
            width: 158rpx;
            height: 158rpx;
            // background-color: #1F7CFF;
            overflow: hidden;

            image {
              width: 100%;
              height: auto;
            }
          }

          .order-list-yi-in-neibu-left-url {
            width: 290rpx;
            height: 70rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .order-list-yi-in-neibu-left-url-top {
              width: 100%;
              font-weight: 400;
              color: #333333;
              font-size: 28rpx;
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .order-list-yi-in-neibu-left-url-top-bot {
              width: 100%;
              font-size: 24rpx;
              font-weight: 400;
              color: #666666;
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }

        .order-list-yi-in-neibu-right {
          height: 73rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-end;

          .order-list-yi-in-neibu-right-im {
            font-size: 28rpx;
            font-weight: 500;
            color: #333333;
          }

          .order-list-yi-in-neibu-right-in {
            font-size: 24rpx;
            font-weight: 400;
            color: #666666;
          }
        }
      }
    }
  }

  .order-list-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 10rpx 26rpx 26rpx;
    gap: 10rpx;
    .btn-list {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 142rpx;
      border-radius: 40rpx;
      border: 1rpx solid #999999;
      font-size: 24rpx;
      font-weight: 400;
      color: #333333;
      text-align: center;
      padding: 15rpx 10rpx;
      //
    }
  }
}
</style>
