<template>
  <view class="afterdetails">
    <headersVue headerTitle="售后详情" @headerJump="headerJump"></headersVue>
    <view class="after-contents">
      <!-- 退货信息卡片 -->
      <view class="afterdetails-tuihuo mb-26">
        <view class="afterdetails-tuihuo-top" @click="handleDetailInfo">
          <view class="tuihuo-title">{{ formatDataValue("status") }}</view>
          <!-- 退货审核中 退货中 -->
          <view
            class="tuihuo-tab"
            v-if="storeRefundOrder && storeRefundOrder.refund_type"
            >{{
              storeRefundOrder.refund_type == 1
                ? "仅退款"
                : storeRefundOrder.refund_type == 2
                ? "退货退款"
                : ""
            }}</view
          >
        </view>
        <view class="afterdetails-tuihuo-bottom">
          <!-- 退货退款成功 、退货退款失败 退货审核中 已发货仅退款成功 字体颜色 color: #1F7CFF; -->
          <!-- 退货中 退货审核中 字体颜色color: #999999; -->
          <!-- 文案：
			  1、退货审核中：48小时未审核，系统将自动通过该申请
			  2、已发货仅退款成功：已发货仅退款成功，查看具体退款金额
			  3、审核中：未发货仅退款已完成，查看具体退款金额
			  4、退货审核中：48小时未审核，系统将自动通过该申请
			  5、退货中：买家已寄出
			  6、退货退款失败：退货退款失败，请查看失败原因
			  7、退货退款成功：退货退款已完成，查看具体退款金额
			  -->
          <!-- {{
            refundorderDetail.refund_type == 1
              ? "仅退款"
              : refundorderDetail.refund_type == 2
              ? "退货退款"
              : ""
          }} -->
          <view
            class="no-cs-tuihuo"
            :class="[
              storeRefundOrder && storeRefundOrder.status == 2
                ? 'colorTav'
                : '',
            ]"
            >{{ formatDataValue1("status") }}</view
          >
          <!-- 退货退款成功 已发货仅退款成功-->
          <view
            class="content--tuihuo-icon"
            v-if="storeRefundOrder && storeRefundOrder.status != 0"
          >
            <uni-icons
              type="right"
              size="26"
              color="#999999"
              class="arrow_right_log"
            ></uni-icons>
          </view>
        </view>
      </view>
      <!-- 物流信息卡片  1、退货退款成功   2、退货退款失败 3、退货中 -->
      <view
        class="afterdetails-back mb-26"
        @click="handleWUliu(storeRefundOrder)"
        v-if="storeRefundOrder && storeRefundOrder.delivery_id"
      >
        <view class="back-tile">买家退货物流</view>
        <view class="back-bttom">
          <view class="image-box">
            <image src="/static/images/new_ui/kuaidi.png" mode="scaleToFill"
          /></view>
          <view class="content-back">
            <view class="content-back-title">{{
              storeRefundOrder && storeRefundOrder.delivery_type
            }}</view>
            <view class="content-back-text">
              <view class="no-cs">{{
                storeRefundOrder && storeRefundOrder.delivery_id
              }}</view>
              <view class="content-icon">
                <uni-icons
                  type="right"
                  size="26"
                  color="#999999"
                  class="arrow_right_log"
                ></uni-icons>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="afterdetails-card">
        <afterCardDetail
          class="mb-26"
          :items="refundorderDetail"
          :storeRefundItem="storeRefundOrder"
        ></afterCardDetail>
      </view>
      <!-- <view class="record-content">
        <view class="record-title">协商记录</view>
        <view class="record-icon">
          <uni-icons
            type="right"
            size="26"
            color="#999999"
            class="arrow_right_log"
          ></uni-icons>
        </view>
      </view> -->
    </view>
    <!-- 1、未发货仅退款  3、退货退款【退货中、退货审核中】 -->
    <!-- `status`  '状态 0:待审核 -1:审核未通过 1:待退货 2:待收货 3:已退款', -->
    <!-- {{
                scope.row.status == 3 ||
                scope.row.status == -1 ||
                scope.row.order.douhuomall == 1
                  ? "售后进度"
                  : "审核"
              }} -->
    <view class="btn-list" v-if="getBtnAuth">
      <view
        class="btn quxiao"
        @click="onHandleclick(storeRefundOrder, 'reject')"
      >
        拒绝退款
      </view>
      <view
        class="btn primary"
        @click="onHandleclick(storeRefundOrder, 'agree')"
      >
        同意退款
      </view>
      <view
        class="btn primary1"
        @click="onHandleclick(storeRefundOrder, 'partAgree')"
      >
        部分退款并完成售后
      </view>
    </view>
    <uni-popup
      ref="popup"
      type="center"
      :animation="true"
      :is-mask-click="false"
    >
      <view class="popup_data">
        <view class="popup_data__headers">
          <view class="popup_data__headers--title">{{ popUpTitle }}</view>
          <uni-icons
            type="closeempty"
            class="custom_icons"
            size="30"
            @click="handleClose"
          ></uni-icons>
        </view>
        <view class="popup_data__content">
          <!-- 1.同意 -1.拒绝 2.部分退款 -->
          <!-- 拒绝只用输入框  -1.拒绝-->
          <uni-section
            title="拒绝原因:"
            type="line"
            padding
            v-if="refundData.status == -1"
          >
            <uni-easyinput
              type="textarea"
              autoHeight
              :focus="true"
              :maxlength="500"
              placeholder="请输入拒绝原因,500字以内"
              v-model="refundData.fail_message"
            ></uni-easyinput>
          </uni-section>

          <!-- 1.同意 -->
          <!-- refundData.status == 1 &&storeRefundOrder.refund_type == 2 &&storeRefundOrder.status == 0  -->
          <template
            v-if="
              refundData.status == 1 &&
              storeRefundOrder.refund_type == 2 &&
              storeRefundOrder.status == 0
            "
          >
            <!-- 收货人姓名 -->
            <uni-section title="收货人姓名:" type="line" padding>
              <uni-easyinput
                v-model="refundData.mer_refund_user"
                placeholder="请输入收货人姓名"
              ></uni-easyinput>
            </uni-section>
            <!-- 收货人地址 -->
            <uni-section title="收货人地址:" type="line" padding>
              <uni-easyinput
                v-model="refundData.mer_refund_address"
                placeholder="请输入收货人地址"
              ></uni-easyinput>
            </uni-section>
            <!-- 收货人电话 -->
            <uni-section title="收货人电话:" type="line" padding>
              <uni-easyinput
                v-model="refundData.set_phone"
                placeholder="请输入收货人电话"
              ></uni-easyinput>
            </uni-section>
          </template>
          <!-- 2.部分退款 -->
          <!--退款金额 refundData.part_refund_price  refundData.status == 2   小于等于订单支付金额   tips:请确保已跟用户协商同意！-->
          <!-- 商家备注 refundData.status == 2  refundData.part_refund_message   -->
          <template v-if="refundData.status == 2">
            <uni-section
              title="退款金额:"
              type="line"
              padding
              subTitle="请确保已跟用户协商同意!"
            >
              <uni-easyinput
                errorMessage
                v-model="refundData.part_refund_price"
                focus
                placeholder="小于等于订单支付金额"
                type="digit"
              ></uni-easyinput>
            </uni-section>
            <uni-section title="商家备注:" type="line" padding>
              <uni-easyinput
                type="textarea"
                autoHeight
                :focus="true"
                :maxlength="500"
                placeholder="请输入备注,500字以内"
                v-model="refundData.part_refund_message"
              ></uni-easyinput>
            </uni-section>
          </template>
        </view>

        <view class="btn-lixt">
          <button
            v-if="storeRefundOrder.status == 0 && douhuomall != 1"
            type="primary"
            class="send-goods"
            @click="handleConfirm"
          >
            确 定
          </button>
          <button
            v-if="storeRefundOrder.status == 2 && douhuomall != 1"
            type="primary"
            class="send-goods"
            @click="handleconfirmReceipt(storeRefundOrder.refund_order_id)"
          >
            确 定
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import headersVue from "../components/headers/headers.vue";
import afterCardDetail from "./afterCardDetail.vue";
import { toQueryString } from "@/utils/index.js";
import {
  orderDetailApi,
  refundorderDetailApi,
  confirmRefundOrderApi,
  confirmReceiptApi,
} from "@/commit/order.js";
import {
  orderRefundFilterText,
  orderRefundText,
} from "../commodity/orderUtil.js";
export default {
  components: {
    headersVue,
    afterCardDetail,
  },
  data() {
    return {
      indexs: 0,
      order_id: "",
      refundorderDetail: {},
      storeRefundOrder: {},
      refund_order_id: "",
      auditType: "",
      refundData: {
        status: 1, // 1.同意 -1.拒绝 2.部分退款
        fail_message: "",
        part_refund_price: "",
        part_refund_message: "",
        mer_refund_user: "",
        mer_refund_address: "",
        set_phone: "",
      },
      douhuomall: "",
      popUpTitle: "拒绝退款",
    };
  },
  async onLoad(options) {
    this.indexs = options.indexs;
    this.order_id = options.order_id;
    this.refund_order_id = options.refund_order_id;
    await this.getRefundOrderDetails();
    if (this.refund_order_id) {
      await this.getAfterSaleListData(this.refund_order_id);
    }
  },
  methods: {
    async initData() {
      await this.getRefundOrderDetails();
      if (this.refund_order_id) {
        await this.getAfterSaleListData(this.refund_order_id);
      }
    },
    open(type = "bottom") {
      this.$refs.popup.open(type);
    },
    handleClose() {
      this.close();
    },
    close() {
      const data = this.storeRefundOrder.mer || {};
      this.refundData = {
        status: 1, // 1.同意 -1.拒绝 2.部分退款
        fail_message: "",
        part_refund_price: "",
        part_refund_message: "",
        mer_refund_user: data.mer_refund_user,
        mer_refund_address: data.mer_refund_address,
        set_phone: data.set_phone,
      };

      this.popUpTitle = "";
      this.$refs.popup.close();
    },
    //提交
    async handleConfirm() {
      const type = this.auditType;
      if (
        this.refundData.part_refund_price.length == 0 &&
        this.refundData.status == 2
      ) {
        uni.showToast({
          title: "请输入金额",
          icon: "none",
        });
        return;
      }

      if (
        this.refundData.part_refund_message.length == 0 &&
        this.refundData.status == 2
      ) {
        uni.showToast({
          title: "请输入备注",
          icon: "none",
        });
        return;
      }
      if (!this.refundData.fail_message && this.refundData.status == -1) {
        uni.showToast({
          title: "请输入拒绝原因",
          icon: "none",
        });
        return;
      }
      uni.showLoading({
        title: "提交中...",
        mask: true,
      });
      try {
        const res = await confirmRefundOrderApi(
          this.storeRefundOrder.refund_order_id,
          this.refundData
        );
        if (res.data.status == 200) {
          uni.showToast({
            title: res.message || res.data.message || "",
            icon: "none",
          });
          this.handleClose();
          await this.initData();
        } else {
          uni.showToast({
            title: res.message || res.data.message || "",
            icon: "none",
          });
        }
      } catch (error) {
        uni.showToast({
          title: error.message || error.data.message || "",
          icon: "none",
        });
      } finally {
        uni.hideLoading();
        uni.hideToast();
      }
    },
    handleconfirmReceipt(refund_order_id) {
      //确定
      if (
        this.refundData.part_refund_price.length == 0 &&
        this.refundData.status == 2
      ) {
        uni.showToast({
          title: "请输入金额",
          icon: "none",
        });
        return;
      }

      if (
        this.refundData.part_refund_message.length == 0 &&
        this.refundData.status == 2
      ) {
        uni.showToast({
          title: "请输入备注",
          icon: "none",
        });
        return;
      }
      if (!this.refundData.fail_message && this.refundData.status == -1) {
        uni.showToast({
          title: "请输入拒绝原因",
          icon: "none",
        });
        return;
      }
      const _this = this;
      console.log(this.refundData.part_refund_message);
      uni.showModal({
        title: "温馨提示",
        content: "是否确认收货?",
        success(res) {
          if (res.confirm) {
            _this.confirmReceiptData(refund_order_id);
          } else if (res.cancel) {
            uni.showToast({
              title: "用户已取消",
              icon: "none",
            });
          }
        },
      });
    },
    async confirmReceiptData(id) {
      uni.showLoading({
        title: "提交中...",
        mask: true,
      });
      try {
        const res = await confirmReceiptApi(id, this.refundData);
        uni.showToast({
          title: res.message || res.data.message || "",
          icon: "none",
        });
        this.handleClose();
        await this.initData();
      } catch (error) {
        uni.showToast({
          title: error.message || error.data.message || "",
          icon: "none",
        });
      } finally {
        uni.hideLoading();
      }
    },
    formatDataValue(type) {
      const data = this.storeRefundOrder || {};
      return orderRefundFilterText(data[type]) || "";
    },
    formatDataValue1(type) {
      const data = this.storeRefundOrder || {};
      return orderRefundText(data[type]) || "";
    },
    // 订单退单详情页面
    async getRefundOrderDetails() {
      uni.showLoading({
        title: "加载中...",
        mask: true,
      });
      try {
        const res = await orderDetailApi(this.order_id);
        if (res.data.status == 200) {
          this.refundorderDetail = {
            ...res.data.data,
          };
          // this.storeRefundOrder =
          //   (this.refundorderDetail &&
          //     this.refundorderDetail.StoreRefundOrder) ||
          //   {};
        }
      } catch (error) {
        if (error.message == "没有权限访问") {
          this.refundorderDetail = {};
        }
      } finally {
        uni.hideLoading();
        uni.hideToast();
      }
    },

    async getAfterSaleListData(refund_order_id) {
      try {
        const res = await refundorderDetailApi(refund_order_id);
        if (res.data.status == 200) {
          const productData = res.data.data || {};
          this.storeRefundOrder = productData;
          this.refundData = {
            status: 1, // 1.同意 -1.拒绝 2.部分退款
            fail_message: "",
            part_refund_price: "",
            part_refund_message: "",
            mer_refund_user: productData.mer.mer_refund_user,
            mer_refund_address: productData.mer.mer_refund_address,
            set_phone: productData.mer.set_phone,
          };
        }
      } catch (error) {
      } finally {
        uni.hideLoading();
        uni.hideToast();
      }
    },
    handleDetailInfo() {
      uni.showModal({
        content: "该功能正在升级中",

        title: "温馨提示",
        success: (result) => {},
        fail: (res) => {},
        complete: (res) => {},
      });
    },

    headerJump() {
      const params = {
        indexs: this.indexs,
      };
      const urlParams = toQueryString(params);
      uni.redirectTo({ url: "./index?" + urlParams });
    },
    handleWUliu(item) {
      const params = {
        status: 0,
        indexs: this.indexs,
        formType: "shouhouDetail",
        order_id: this.order_id,
        shouhou:0,
        refund_order_id: item.refund_order_id || this.storeRefundOrder.refund_order_id || "",
      };

      const urlParams = toQueryString(params);
      if (!this.refundorderDetail.delivery_id) return;
      uni.redirectTo({
        url: `../commodity/logisticsInformationDetail?${urlParams}`,
      });
    },
    onHandleclick(item, type) {
      this.auditType = type;
      console.log(this.refundorderDetail);
      this.douhuomall = this.refundorderDetail.douhuomall;
      // 1.同意 -1.拒绝 2.部分退款
      this.open();
      if (type == "reject") {
        //拒绝
        this.refundData.status = -1;
        this.popUpTitle = "拒绝退款";
      } else if (type == "agree") {
        //通过
        this.refundData.status = 1;
        this.popUpTitle = "同意退款";
      } else if (type == "partAgree") {
        //部分退款并完成售后
        this.refundData.status = 2;
        this.popUpTitle = "部分退款并完成售后";
      }
    },
  },
  computed: {
    getBtnAuth() {
      if (
        (this.storeRefundOrder.refund_type == 2 &&
          (this.storeRefundOrder.status == 1 ||
            this.storeRefundOrder.status == 2)) ||
        (this.storeRefundOrder.status == 0 &&
          this.storeRefundOrder.refund_type == 1)
      ) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>
<style>
page {
  background-color: #f7f8fc;
  /* height: 100%; */
}
</style>
<style lang="scss" scoped>
.afterdetails {
  padding: 26rpx 20rpx 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  .afterdetails-back {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 15rpx 26rpx 26rpx;
    .back-tile {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #333333;
      padding: 15rpx 0;
    }
    .back-bttom {
      display: flex;
      //   align-items: center;
      gap: 14rpx;
      //   height: 60rpx;
      .image-box {
        height: 66rpx;
        width: 66rpx;
        border-radius: 50%;
        flex-shrink: 0;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .content-back {
        flex: 1;
        .content-back-title,
        .content-back-text {
          display: flex;
          align-items: center;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #333333;
          word-break: break-all;
          padding-bottom: 6rpx;

          .no-cs {
            flex: 1;
          }
        }
      }
      .content-icon {
        width: 26rpx;
        height: 100%;
        flex-shrink: 0;
      }
    }
  }
  .afterdetails-tuihuo {
    // width: 100%;
    // height: 158rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx 26rpx 20rpx;
    .afterdetails-tuihuo-top {
      display: flex;
      gap: 26rpx;
      padding-bottom: 20rpx;
      .tuihuo-title {
        font-weight: 500;
        font-size: 36rpx;
        color: #333333;
      }
      .tuihuo-tab {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 24rpx;
        padding: 0 10rpx;
        color: #999999;
        border: 2rpx solid #999999;
        border-radius: 4rpx;
      }
    }
    .afterdetails-tuihuo-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .no-cs-tuihuo {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #1f7cff;
        &.colorTav {
          color: #999999;
        }
      }
      .content--tuihuo-icon {
        width: 30rpx;
        flex-shrink: 0;
      }
    }
  }
  .afterdetails-card {
    width: 100%;
    // margin-top: 220rpx;
    margin-bottom: 50rpx;
  }
}
.mb-26 {
  margin-bottom: 26rpx;
}
.after-contents {
  margin-top: 90rpx;
  overflow-y: auto;
  width: 100%;
  padding-bottom: 200rpx;
  //   border:2rpx solid #d00;
}
.btn-list {
  position: fixed;
  background-color: #fff;
  display: flex;
  gap: 26rpx;
  user-select: none;
  padding: 15rpx 26rpx;
  height: 110rpx;
  width: 100%;
  flex-shrink: 0;
  bottom: 0;
  .btn {
    flex-shrink: 0;
    height: 78rpx;
    border-radius: 8rpx;
    font-weight: 400;
    font-size: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .quxiao {
    border: 1rpx solid #999999;
    color: #333333;
    width: 25%;
    margin-left: 26rpx;
  }
  .primary {
    color: #ffffff;
    background: #1f7cff;
    width: 25%;
  }
  .primary1 {
    color: #ffffff;
    background: #1f7cff;
    width: 37%;
  }
}
.record-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 26rpx;
  //   margin-top: 26rpx;
  height: 92rpx;
  background: #ffffff;
  border-radius: 16rpx;
  .record-title {
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
  }
}
.popup_data {
  padding: 26rpx 30rpx;
  min-height: 850rpx;
  max-height: 900rpx;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(180deg, #e5edff 0%, #ffffff 100%);
  border-radius: 24rpx 24rpx 0 0;
  &__headers {
    // height: 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #e5e5e5;
    padding-bottom: 15rpx;
    &--title {
      flex: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      justify-content: space-between;
      padding-right: 60rpx;
      font-size: 32rpx;
      font-weight: 600;
    }
    .custom_icons {
      flex-shrink: 0;
    }
  }
  &__content {
    max-height: 500rpx;
    padding-bottom: 50rpx;
    overflow-y: auto;
    /deep/.uni-easyinput__placeholder-class {
      font-size: 20rpx;
    }
  }
  .btn-lixt {
    height: 120rpx;
  }
}
.send-goods {
  height: 78rpx;
  // margin: 0 32rpx;
  font-weight: 400;
  font-size: 30rpx;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
}
</style>
