<template>
  <view class="details-xiangqing">
    <view class="details-xiangqing-top">
      <view
        class="details-xiangqing-top-let"
        v-if="detailItem.order && detailItem.order.mer_avatar"
      >
        <image
          :src="detailItem.order.mer_avatar"
          mode="widthFix"
          v-if="detailItem.order.mer_avatar"
        ></image>
      </view>
      <view class="details-xiangqing-top-in" v-if="detailItem.order">
        {{ detailItem.refund_order_sn }}
      </view>
      <view class="details-xiangqing-top-rigt">
        <uni-icons
          type="right"
          size="26"
          color="#999999"
          class="arrow_right_log"
        ></uni-icons>
      </view>
      <view class="details-xiangqingt-yi-top-right">
        {{ formatDataValue(detailItem, "status") }}
      </view>
    </view>
    <view class="details-xiangqing-niri">
      <view
        class="order-list-yi-in-neibu"
        v-for="(item, index) in detailItem.refundProduct"
        :key="index + '_index' + item.order_product_id"
      >
        <!-- item.product.cart_info.product -->
        <view class="order-list-yi-in-neibu-left">
          <view class="order-list-yi-in-neibu-left-img" v-if="item.product">
            <template
              v-if="
                item.product.cart_info &&
                item.product.cart_info.product &&
                item.product.cart_info.product.image &&
                !isError
              "
            >
              <image
              class="cusotm"
                :src="item.product.cart_info.product.image"
                @error="handleError"
                mode="aspectFit"
              ></image>
            </template>
            <template v-else>
              <image src="/static/images/new_ui/wutu.png" mode="aspectFit" />
            </template>
          </view>
          <view class="order-list-yi-in-neibu-left-url">
            <view
              class="order-list-yi-in-neibu-left-url-top"
              v-if="item.product"
            >
              {{ item.product.cart_info.product.store_name || "" }}
            </view>
            <view
              class="order-list-yi-in-neibu-left-url-top"
              v-if="item.product"
            >
              {{ item.product.cart_info.productAttr.sku }}
            </view>
          </view>
        </view>
        <view class="order-list-yi-in-neibu-right">
          <view class="order-list-yi-in-neibu-right-im" v-if="item.product">
            ¥{{ item.product.cart_info.productAttr.price || "0.00" }}
          </view>
          <view class="order-list-yi-in-neibu-right-in">
            共{{ item.product.product_num || 0 }}件
          </view>
        </view>
      </view>

      <view class="brn-ligd">
        <view
          class="btn-cls"
          @click="viewWuLiu(detailItem)"
          v-if="detailItem && detailItem.delivery_id"
        >
          查看物流
        </view>
        <view class="btn-cls" @click="viewDetail(detailItem)"> 查看详情 </view>
      </view>
    </view>
  </view>
</template>

<script>
//订单详情 卡片详细信息
import { copy } from "@/utils/index.js";
import { orderRefundFilter } from "../commodity/orderUtil.js";
export default {
  props: {
    detailItem: {
      type: Object,
      default: () => {},
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      isError: false,
    };
  },

  methods: {
    handleError(e) {
      this.isError = true;
      // console.log(e,"e",this.isError)
    },
    formatDataValue(data, type) {
      if (type === "status") {
        return orderRefundFilter(data[type]) || "";
      }
    },
    handleCopy(val) {
      copy(val);
    },
    sendGoods() {},
    //查看物流
    viewWuLiu(val) {
      this.$emit("viewWuLiu", val);
    },
    viewDetail(val) {
      this.$emit("viewDetail", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.brn-ligd {
  display: flex;
  justify-content: flex-end;
  gap: 15rpx;
  padding-bottom: 15rpx;
}
.btn-cls {
  margin-top: 26rpx;
  width: 142rpx;
  height: 58rpx;
  border-radius: 30rpx;
  border: 1rpx solid #999999;
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
  text-align: center;
  line-height: 58rpx;
}
.details-xiangqing {
  // width: 686rpx;
  min-height: 220rpx;
  background: #ffffff;
  border-radius: 16px;
  padding: 0 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .details-xiangqing-top {
    width: 100%;
    // height: 90rpx;
    padding: 16rpx;
    border-bottom: 1rpx solid #e5e5e5;
    display: flex;
    align-items: center;
    color: #333333;

    .details-xiangqing-top-let {
      width: 32rpx;
      height: 32rpx;
      font-size: 11rpx;
      font-weight: 400;

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

    .details-xiangqing-top-in {
      max-width: 364rpx;
      font-size: 28rpx;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-left: 6rpx;
    }
    .details-xiangqingt-yi-top-right {
      text-align: right;
      flex: 1;
      font-weight: 400;
      color: #1f7cff;
      white-space: nowrap;
    }
    .details-xiangqing-top-rigt {
      //   width: 36rpx;
      //   height: 36rpx;
      margin-left: 8rpx;
      .arrow_right_log {
      }
    }
  }

  .details-xiangqing-niri {
    // width: 634rpx;
    // height: 548rpx;
    width: 100%;
    margin: 26rpx 0 0rpx 0;
    display: flex;
    flex-direction: column;

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

      .order-list-yi-in-neibu-left {
        // width: 474rpx;
        height: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        // gap:20rpx;
        .order-list-yi-in-neibu-left-img {
          width: 158rpx;
          height: 158rpx;
          overflow: hidden;
          flex-shrink: 0;
          image {
            width: 100%;
            height: 100%;
          }
        }

        .order-list-yi-in-neibu-left-url {
          // width: 290rpx;
          display: flex;
          flex-direction: column;
          padding: 0 20rpx;

          .order-list-yi-in-neibu-left-url-top {
            width: 100%;
            font-weight: 400;
            color: #333333;
            font-size: 28rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            justify-content: space-between;
          }

          .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;
        }
      }
    }

    .details-xiangqing-shujussss {
      // width: 634rpx;
      height: 340rpx;
      margin-top: 50rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .details-xiangqing-shujussss-yis {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        font-weight: 400;
        color: #333333;
      }
    }
  }
}
</style>
