<template>
  <view class="details-xiangqing">
    <view class="details-xiangqing-top">
      <view class="details-xiangqing-top-let" v-if="storeRefundItem.mer">
        <image :src="storeRefundItem.mer_avatar" v-if="storeRefundItem.mer.mer_avatar" mode="widthFix"></image>
      </view>
      <view class="details-xiangqing-top-in" v-if="storeRefundItem.mer"> 
        {{ storeRefundItem.mer.yhc_about_name}}
      </view>
      <!-- <view class="details-xiangqing-top-rigt">
    
      </view> -->
      <view class="details-xiangqingt-yi-top-right">
        {{ formatDataValue("status") }}
      </view>
    </view>
    <view class="details-xiangqing-niri">
      <view
        class="order-list-yi-in-neibu"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="order-list-yi-in-neibu-left">
          <view class="order-list-yi-in-neibu-left-img" v-if="item.product">
            <image :src="item.product.cart_info.product.image" mode="widthFix" v-if="item.product.cart_info"></image>
          </view>
          <view class="order-list-yi-in-neibu-left-url">
            <view class="order-list-yi-in-neibu-left-url-top" v-if="item.product.cart_info">
              {{ item.product.cart_info.product.store_name || '' }}
            </view>
            <view class="order-list-yi-in-neibu-left-url-bottom" v-if="item.product.cart_info" >
              {{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 }}
          </view>
          <view class="order-list-yi-in-neibu-right-in">
            共{{ item.product.product_num || 0 }}件
          </view>
        </view>
      </view>
      <view class="details-xiangqing-shujussss">
        <template v-for="(orItem, idex) in cardListData">
          <view
            class="details-xiangqing-shujussss-yis"
            :key="orItem.props + idex"
          >
            <view class="label-box"> {{ orItem.name }} </view>
            <view class="value-box">
              {{ formatDataValue(orItem.props) || "--" }}
            </view>
          </view>
          <view class="tips-mdex" v-if="orItem.isTips"
            >含邮费 ¥{{ items.total_postage || "0.00" }}，买家实收退款 ¥{{
              items.total_price - items.total_postage || "0.00"
            }}</view
          >
        </template>
        
      </view>
    </view>
  </view>
</template>

<script>
//订单详情 卡片详细信息
import { copy } from "@/utils/index.js";
import {
  orderRefundFilterText,
  orderRefundText,
  orderRefundFilter,
} from "../commodity/orderUtil.js";
import { getAfterSaleList,refundorderDetailApi } from "@/commit/order.js";
export default {
  props: {
    items: {
      type: Object,
      default: () => ({}),
    },
    storeRefundItem: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      cardListData: [
        {
          name: "售后类型",
          props: "refund_type",
          isTips: false,
        },
        {
          name: "售后原因",
          props: "mark",
          isTips: false,
        },
        {
          name: "售后件数",
          props: "refund_num",
          isTips: false,
        },
        {
          name: "退款金额",
          props: "refund_price",
          isTips: false,
        },
        {
          name: "退款商品总额",
          props: "price",
          isTips: true,
        },
        {
          name: "售后地址",
          props: "user_address",
          isTips: false,
        },
        {
          name: "申请时间",
          props: "create_time",
          isTips: false,
        },
        {
          name: "订单编号",
          props: "order_sn",
          isTips: false,
        },
        {
          name: "售后编号",
          props: "refund_order_sn",
          isTips: false,
        },
      ],

      detaulData: {},
      orderProduct: {},
      status: "",
      refund_order_id: "", //售后编号
      list: [],
    };
  },
  mounted() {
    console.log(this.$route.query.indexs, "f4gsdfgsd3fgdsfgsrdf");
    // 0全部  1审核中  2处理中  3已完成
    let currentActive = this.$route.query["indexs"];
    this.refund_order_id = this.$route.query["refund_order_id"]; //售后编号
//  console.log(this.refund_order_sn,"refund_order_sn",currentActive)
    if (currentActive == 0) {
      //全部
      this.status = "";
    } else if (currentActive == 1) {
      //审核中 0
      this.status = 0;
    } else if (currentActive == 2) {
      //2处理中 2
      this.status = 2;
    } else if (currentActive == 3) {
      //3已完成
      this.status = 3;
    } else {
      this.status = "";
    }
   
    if (this.refund_order_id) {
      this.getAfterSaleListData(this.refund_order_id);
    }
  },
  methods: {
    formatDataValue(type) {
      if (type == "status") {
        return orderRefundFilter(this.storeRefundItem[type]) || "";
      } else if (type == "refund_type") {
        return this.storeRefundItem["refund_type"] == 1
          ? "仅退款"
          : this.storeRefundItem["refund_type"] == 2
          ? "退货退款"
          : "";
      } else if (type === "price") {
         return this.getTotal() || "0.00"
      } else if (type === "refund_order_sn") {
        return this.storeRefundItem["refund_order_sn"] || "--";
      } else if (type === "user_address") {
        return this.items["user_address"] || "--";
      } else if (type === "order_sn") {
        return this.items["order_sn"] || "--";
      } else if (type === "refund_num") {
        return this.storeRefundItem["refund_num"] || "--";
      } else if (type === "mark") {
        return this.storeRefundItem["mark"] || "--";
      } else if (type === "nickname") {
        return (
          (this.items && this.items.user && this.items.user["nickname"]) || "--"
        );
      } else if (type === "create_time") {
        return this.storeRefundItem["create_time"] || "--";
      } else if (type === "refund_price") {
        return this.storeRefundItem["refund_price"] || "--";
      }
    },
    getTotal() {
      let sum = 0;
      let row = this.list || []
      for (let i = 0; i < row.length; i++) {
        sum += row[i].product.cart_info.productAttr.price * row[i].refund_num;
      }
      return sum.toFixed(2);
    },

    async getAfterSaleListData(refund_order_sn, order_sn) {
      const params = {
        refund_order_sn: refund_order_sn,
        status: this.status,
        date: "",
        page: 1,
        limit: 20,
        order_sn: order_sn,
        refund_type: "",
      };
    // console.log(params,"getAfterSaleListData")
      try {
        // const res = await getAfterSaleList(params);
        const res = await refundorderDetailApi(refund_order_sn);
        if (res.data.status == 200) {
          // console.log(res.data.data.list, "res.data.data.list");
          const productData= res.data.data&&res.data.data.refundProduct || []
          this.list = productData;
        }
      } catch (error) {
      } finally {
        uni.hideLoading();
      }
    },
    handleCopy(val) {
      copy(val);
    },
    sendGoods() {},
  },
};
</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 {
      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;
    }
    .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;
          padding: 0 20rpx;
          .order-list-yi-in-neibu-left-url-bottom {
            width: 100%;
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            justify-content: space-between;
            padding-top: 10rpx;
          }
          .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;
      padding-bottom: 15rpx;
      .label-box {
        flex-shrink: 0;
        width: 50%;
      }
      .value-box {
        text-align: right;
      }
      .tips-mdex {
        // padding-top: 5rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
      }
      .details-xiangqing-shujussss-yis {
        width: 100%;
        padding: 20rpx 20rpx 20rpx 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        font-weight: 400;
        color: #333333;
      }
    }
  }
}
</style>
