<template>
  <div class="order-item-con">
    <div class="header flex-default">
      <div class="shop flex-default" @click="goShop(data.merchantId)">
        <m-icon icon="icon-shop" :size="16" />
        <span class="name">{{ detail.enterpriseName }}</span>
        <m-icon icon="icon-more" :size="9" />
      </div>
      <div class="status" :style="{ color: detail.statusColor }">
        {{ detail.statusLabel }}
      </div>
    </div>
    <div class="content flex-default" @click="handleDetail">
      <div class="info flex-default" v-if="singleOrder">
        <img class="thumb" :src="detail.order1st.thumb" />
        <div class="spu">
          <div class="name">{{ detail.order1st.name }}</div>
          <div class="sku">{{ detail.order1st.propList | propFilter(detail.order1st) }}</div>
        </div>
      </div>
      <div class="info-list" scroll-x v-else>
        <img
          class="thumb"
          v-for="(item, index) of detail.orders"
          :key="`thumb-${detail.oid}-${index}`"
          :src="item.thumb"
        />
      </div>
      <div class="right-con flex-default">
        <div class="price">￥{{ data.amount }}</div>
        <div class="amt" v-show="detail.totalNum > 1">
          共{{ detail.totalNum }}件
        </div>
      </div>
    </div>
    <div class="opt flex-default">
      <van-button
        v-for="(item, index) of btnList"
        :key="`button-item-${index}`"
        class="opt-btn"
        :type="btnMap[item].type"
        size="small"
        :plain="btnMap[item].plain"
        round
        @click="btnMap[item].click"
      >
        {{ btnMap[item].label }}
      </van-button>
    </div>
  </div>
</template>

<script>
import { OrderStatus, OrderStatusObj, CommentStatus, OrderType } from "@/enums";
import { mapMutations } from "vuex";
import { OrderMixin } from "@/mixins";
import bus from "@/utils/bus"
export default {
  mixins: [OrderMixin],
  props: {
    isRefund: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    detail() {
      let totalNum = 0;
      this.data.orders.forEach((o) => {
        totalNum += o.number || 0;
      });
      return {
        ...this.data,
        order1st: this.data.orders[0],
        statusLabel: OrderStatusObj[this.data.orderState].label,
        statusColor: OrderStatusObj[this.data.orderState].color,
        totalNum,
      };
    },
    singleOrder() {
      return this.data.orders.length == 1;
    },
    commLabel() {
      if (!this.data.orders) {
        return "";
      }
      let yesNum = 0,
        noNum = 0;
      this.data.orders.forEach((item) => {
        if (item.buyerState == CommentStatus.YES) {
          yesNum++;
        } else if (item.buyerState == CommentStatus.NO) {
          noNum++;
        }
      });
      if (noNum > 0) {
        return "评价";
      }
      if (yesNum > 0) {
        return "追评";
      }
      return "";
    },
  },
  data() {
    return {
      OrderStatus,
      OrderStatusObj,
    };
  },
  methods: {
    ...mapMutations(["setUnCommentOrders"]),
    handleDetail() {
      let params = { oid: this.data.oid };
      this.$router.push({ name: "order-detail", params });
    },
  },
  filters: {
    propFilter(props,detail) {
      if(props){
        return props.map((item) => item.value).join("+");
      }else{
        if(detail.salesType===4){
          return '盲盒'
        }
        return ""
      }
      
    },
  },
  mounted(){
    bus.$on("changeState", (data) => {
      if(data.oid===this.data.oid){
        this.data.orderState=data.orderState
      }
    });
  },
};
</script>

<style lang="less">
.order-item-con {
  background: #ffffff;
  width: 100%;
  padding: 14px 16px 18px 16px;
  border-radius: 8px;
  margin-top: 10px;
  > .header {
    color: #140603;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    .shop {
      align-items: center;
      flex: 1;
    }
    .shop .name {
      font-size: 14px;
      margin-left: 6px;
      margin-right: 5px;
      font-weight: bold;
    }
    .status {
      font-size: 12px;
      color: #FA9F37;
    }
  }
  > .content {
    align-items: center;
    margin-bottom: 20px;
    justify-content: space-between;
    .thumb {
      height: 84px;
      width: 84px;
      border-radius: 3px;
      background-color: lightgray;
      margin-right: 4px;
      object-fit: cover;
    }
    > .info-list {
      overflow-x: auto;
      width: ~"calc(100% - 60px)";
      white-space: nowrap;
      .thumb {
        display: inline-block;
        object-fit: cover;
      }
    }
    > .info {
      align-items: center;
      flex: 1;
    }
    > .info .spu {
      flex: 1;
      margin-left: 10px;
      width: 73px;
    }
    > .info .spu .name {
      color: #140603;
      font-size: 13px;
      line-height: 15px;
      margin-bottom: 6px;
    }
    > .info .spu .sku {
      color: #72767d;
      font-size: 11px;
      line-height: 13px;
    }
    > .right-con {
      flex-direction: column;
      align-items: flex-end;
      margin-left: 5px;
    }
    > .right-con .price {
      color: #140603;
      font-size: 14px;
      font-weight: bold;
      line-height: 16px;
      margin-bottom: 5px;
    }
    > .right-con .amt {
      color: #aeaeae;
      font-size: 10px;
      line-height: 12px;
      font-weight: bold;
    }
  }
  > .opt {
    justify-content: flex-end;
    .opt-btn {
      margin-left: 8px;
      width: 70px;
      padding: 0;
      height: 25px;
    }
    .van-button--black {
      border: 1px solid #aeaeae;
      color: #140603;
    }
  }
}
</style>