<template>
  <div class="confirm-exchange-shipment">
    <el-card shadow="never" class="box-card box-card1">
      <div slot="header">
        <h3><span></span>售后单信息</h3>
      </div>
      <el-descriptions :column="2" labelClassName="all-class">
        <el-descriptions-item label="平台订单号"
          >{{ orderDetail.platformCode || "--"
          }}<i
            v-if="orderDetail.platformCode"
            class="el-icon-document-copy"
            @click="copyText(orderDetail.platformCode)"
          ></i
        ></el-descriptions-item>

        <el-descriptions-item label="店铺">
          {{ orderDetail.platformName || "--" }}</el-descriptions-item
        >
        <el-descriptions-item label="发货状态">{{
          orderDetail.deliveryStatus || "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="购买会员">{{
          orderDetail.vipName || "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="收货人手机">{{
          orderDetail.userMobile || "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="收货人">{{
          orderDetail.userName || "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="售后单编号"
          >{{ orderDetail.afterSalesNo || "--"
          }}<i
            v-if="orderDetail.afterSalesNo"
            class="el-icon-document-copy"
            @click="copyText(orderDetail.afterSalesNo)"
          ></i
        ></el-descriptions-item>
        <el-descriptions-item
          label="售后单状态"
          contentClassName="state-color1"
        >
          {{typefilter(orderDetail.afterSalesStatus, orderStateList) }}
        </el-descriptions-item>
        <el-descriptions-item
          label="售后单类型"
          contentClassName="state-color1"
        >
          {{typefilter(orderDetail.afterSalesType, orderTypeList)}}
        </el-descriptions-item>
        <el-descriptions-item label="售后原因">{{
          orderDetail.refundReason || "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="对接客服人员">{{
          orderDetail.customerService || "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="售后申请时间">{{
          orderDetail.auditTime || "--"
        }}</el-descriptions-item>
        <el-descriptions-item
          label="是否代发"
          contentClassName="state-color1"
          >{{
            orderDetail.hasSupplier == 0
              ? "否"
              : orderDetail.hasSupplier == 1
              ? "是"
              : "--"
          }}</el-descriptions-item
        >
        <el-descriptions-item label="代发供货商">{{
          orderDetail.supplierName || "--"
        }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card
      shadow="never"
      class="box-card"
      v-if="orderDetail.afterSalesType !== 'COMPENSATION_REFUND'"
    >
      <div slot="header">
        <h3><span></span>申请售后商品信息</h3>
      </div>
      <el-table :data="orderDetail.items" border stripe class="w100">
        <el-table-column prop="skuNo" min-width="160" label="商品信息">
          <template slot-scope="scope">
            {{ scope.row.skuNo }}/{{ scope.row.skuName }}
          </template>
        </el-table-column>
        <el-table-column prop="num" label="销售数量(件)" align="center" />
        <el-table-column prop="costPrice" label="成本价(元)" align="center">
          <template slot-scope="scope"> ￥{{ $numFormat(scope.row.costPrice) }} </template>
        </el-table-column>
        <el-table-column prop="salePrice" label="销售单价(元)" align="center">
          <template slot-scope="scope"> ￥{{ $numFormat(scope.row.salePrice) }} </template>
        </el-table-column>
        <el-table-column label="销售金额(元)" align="center" prop="totalAmount">
          <template slot-scope="scope"> ￥{{ $numFormat(scope.row.totalAmount) }} </template>
        </el-table-column>
        <el-table-column label="实付单价(元)" align="center" prop="actualPrice">
          <template slot-scope="scope"> ￥{{ $numFormat(scope.row.actualPrice) }} </template>
        </el-table-column>
        <el-table-column
          label="实付金额(元)"
          align="center"
          prop="actualAmount"
        >
          <template slot-scope="scope"> ￥{{ $numFormat(scope.row.actualAmount) }} </template>
        </el-table-column>
        <el-table-column
          label="已申请售后数量"
          align="center"
          prop="alreadyAfterSalesNum"
        >
        </el-table-column>
        <el-table-column
          label="已申请售后金额"
          align="center"
          prop="alreadyAfterSalesAmount"
        >
          <template slot-scope="scope">
            ￥{{ $numFormat(scope.row.alreadyAfterSalesAmount) }}
          </template>
        </el-table-column>
        <el-table-column
          label="申请售后数量(件)"
          align="center"
          prop="requestedRefundQuantity"
        >
        </el-table-column>
        <el-table-column
          label="申请售后金额(元)"
          align="center"
          prop="requestedRefundAmount"
        >
          <template slot-scope="scope">
            ￥{{ $numFormat(scope.row.requestedRefundAmount) }}
          </template>
        </el-table-column>
      </el-table>
      <div class="after-sales-products-total">
        <span style="margin-right: 10px">总售后数量：{{ total.num }}件</span>
        <span
          >总售后金额：<span class="state-color2">{{
            `￥${$numFormat(total.amount)}`
          }}</span
          >元</span
        >
      </div>
      <span>换货商品列表:</span>
      <el-table :data="orderDetail.changeItems" border stripe class="w100">
        <el-table-column prop="skuName" min-width="160" label="换货商品信息">
          <template slot-scope="scope">
              {{ scope.row.skuNo }}/{{ scope.row.skuName }}
            </template>
          </el-table-column>
        <el-table-column prop="costPrice" label="成本价(元)" align="center">
          <template slot-scope="scope"> ￥{{ $numFormat(scope.row.costPrice) }} </template>
        </el-table-column>
        <el-table-column prop="num" label="换货数量(件)" align="center" />
        <!-- <el-table-column
          prop="salePrice"
          label="换货销售单价(元)"
          align="center"
        >
          <template slot-scope="scope"> ￥{{ $numFormat(scope.row.salePrice) }} </template>
        </el-table-column>
        <el-table-column
          prop="saleAmount"
          label="换货销售金额(元)"
          align="center"
        >
          <template slot-scope="scope"> ￥{{ $numFormat(scope.row.saleAmount) }} </template>
        </el-table-column> -->
        <el-table-column
          prop="compensationPrice"
          label="补差价金额(元)"
          align="center"
        >
          <template slot-scope="scope"> ￥{{ $numFormat(scope.row.compensationPrice) }} </template>
        </el-table-column>
      </el-table>
      <div class="after-sales-products-total">
        <span
          >总补差价金额：<span class="state-color2">{{
            `￥${$numFormat(total.diffAmount)}`
          }}</span
          >元</span
        >
      </div>
    </el-card>

    <el-card shadow="never" class="box-card">
      <div slot="header">
        <h3><span></span>确认换货发货信息</h3>
      </div>
      <div class="notice-box">
        <div class="notice-left">
          <i class="el-icon-bell"></i>
          系统自动查询管易换货销售订单信息
        </div>
      </div>
      <el-form
        :model="form"
        ref="form"
        size="mini"
        :inline="true"
        label-width="160px"
        class="mini-form2"
        label-position="left"
        :rules="rules"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="换货订单管易订单号:" prop="saleOrderNo">
              <el-select
                filterable
                v-model="form.saleOrderNo"
                placeholder="请选择"
                clearable
                @change="getQueryOrderInfo"
                style="width: 245px"
              >
                <el-option
                  v-for="dict in orderDetail.saleOrderNos"
                  :key="dict"
                  :label="dict"
                  :value="dict"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="换货发货物流单号:"
              prop="expressNo"
              class="remarks-class"
            >
              <el-input
                v-model.trim="form.expressNo"
                clearable
                type="text"
                style="width: 245px"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="换货发货物流公司:" prop="expressComName">
              <el-select
                filterable
                v-model="form.expressComName"
                placeholder="请选择"
                clearable
                style="width: 245px"
              >
                <el-option
                  v-for="dict in returnLogisticsCompanyList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="margin: 20px 0">
            <span>换货订单商品列表:</span>
            <el-table :data="orderDetail.changeItems2" border stripe class="w100">
              <el-table-column
                prop="skuNo"
                min-width="160"
                label="售后商品信息"
              >
                <template slot-scope="scope">
                  {{ scope.row.skuNo }}/{{ scope.row.skuName }}
                </template>
              </el-table-column>
              <el-table-column prop="num" label="销售数量(件)" align="center">
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注:" label-width="70px" prop="remark" class="remarks-class">
              <el-input
                v-model.trim="form.remark"
                clearable
                type="textarea"
                maxlength="100"
                placeholder="填写备注，不超过100个字"
                resize="none"
                rows="3"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="btns-box">
      <el-button size="small" @click="confirmFnc">确认换货发货</el-button>
      <el-button size="small" @click="goBack">取消</el-button>
      <!-- @click="goBack" -->
    </div>
  </div>
</template>

<script>
import {
  afterSalesConfirmChange,
  afterSalesConfirmChangeQuery,
  afterSalesQueryOrderInfo,
  afterSalesChangeQuery,
} from "@/api/afterSalesOrder/index";
export default {
  props: {},
  components: {},
  name: "confirmExchange",
  data() {
    return {
      afterSalesNo: "",
      orderDetail: {
        goodsList: [],
        exchangeItems: [],
        afterSalesNo: "",
        afterSalesStatus: "",
        afterSalesType: "",
        auditTime: "",
        changeItems: [],
        changeItems2: [],
        customerService: "",
        deliveryStatus: "",
        erpCode: "",
        hasRefundUser: "",
        hasSupplier: "",
        items: [],
        platformCode: "",
        platformName: "",
        platformNo: "",
        refundAddressType: "",
        refundAmount: "",
        refundExpressComName: "",
        refundExpressNo: "",
        refundReason: "",
        refundType: "",
        remark: "",
        returnLogisticsExpressComName: "",
        returnLogisticsExpressNo: "",
        shopCode: "",
        shopName: "",
        supplierCode: "",
        supplierName: "",
        userMobile: "",
        userName: "",
        vipName: "",
        orderItems: [],
        saleOrderNos: []
      },
      form: {
        saleOrderNo: '',
        remark: '',
        expressNo: '',
        expressComName: '',
      },
      returnLogisticsCompanyList: [
        { label: "顺丰速运", value: "SF_EXPRESS" },
        { label: "圆通速递", value: "YTO_EXPRESS" },
        { label: "中通快递", value: "ZTO_EXPRESS" },
        { label: "申通快递", value: "STO_EXPRESS" },
      ],
      rules: {
        saleOrderNo: [
          {
            required: true,
            message: "请选择换货订单管易订单号",
            trigger: "blur",
          },
        ],
        expressNo: [
          {
            required: true,
            message: "请输入换货发货物流单号",
            trigger: "blur",
          },
        ],
        expressComName: [
          {
            required: true,
            message: "请选择换货发货物流公司",
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: true,
            message: "请输入备注",
            trigger: "blur",
          },
        ],
      },
      orderNumList: [],
      logisticsComList: [],
      total: {
        num: 0,
        amount: 0,
        diffAmount: 0,
      },
      orderStateList: [
        { label: "待客服主管复核", value: "AWAITING_SUPERVISOR_APPROVAL" },
        { label: "待接收退货包裹", value: "PENDING_RETURN_PACKAGES" },
        { label: "部分退货", value: "PART_SIGN" },
        { label: "待财务复核", value: "AWAITING_FINANCE_APPROVAL" },
        { label: "待换货", value: "PENDING_CHANGE" },
        { label: "已换货", value: "CONFIRM_SEND_CALLBACK" },
        { label: "待回传发货信息", value: "CONFIRM_SEND" },
        { label: "待退款", value: "PENDING_REFUNDS" },
        { label: "已退款/已处理", value: "REFUNDED" },
        { label: "打回退货包裹", value: "REJECT_PACKAGE" },
        { label: "取消", value: "CANCEL" },
      ],
      orderTypeList: [
        { label: "极速退款", value: "FIRST_REFUND" },
        { label: "仅退款", value: "ONLY_REFUND" },
        { label: "退货退款", value: "REFUND_MONEY_GOODS" },
        { label: "换货", value: "EXCHANGE_GOOD" },
        { label: "补偿退款", value: "COMPENSATION_REFUND" },
      ],
    };
  },

  created() {},

  activated() {
    if (this.afterSalesNo != this.$route.query.afterSalesNo) {
      this.total = {
        num: 0,
        amount: 0,
        diffAmount: 0,
      };
      this.orderDetail = {
        goodsList: [],
        exchangeItems: [],
        afterSalesNo: "",
        afterSalesStatus: "",
        afterSalesType: "",
        auditTime: "",
        changeItems: [],
        changeItems2: [],
        customerService: "",
        deliveryStatus: "",
        erpCode: "",
        hasRefundUser: "",
        hasSupplier: "",
        items: [],
        platformCode: "",
        platformName: "",
        platformNo: "",
        refundAddressType: "",
        refundAmount: "",
        refundExpressComName: "",
        refundExpressNo: "",
        refundReason: "",
        refundType: "",
        remark: "",
        returnLogisticsExpressComName: "",
        returnLogisticsExpressNo: "",
        shopCode: "",
        shopName: "",
        supplierCode: "",
        supplierName: "",
        userMobile: "",
        userName: "",
        vipName: "",
        orderItems: [],
        saleOrderNos: []
      }
      this.form = {
        saleOrderNo: '',
        remark: '',
        expressNo: '',
        expressComName: '',
      }
      this.afterSalesNo = this.$route.query.afterSalesNo;
      this.getDetails();
    }
  },

  methods: {
    copyText(text) {
      window.navigator.clipboard
        .writeText(text)
        .then(() => {
          // this.$message.success("复制成功");
          this.$message({
            message: "复制成功",
            type: "success",
            customClass: "phone-message",
            center: true,
          });
        })
        .catch((error) => {
          // this.$message.warning("复制失败");
          this.$message({
            message: "复制失败",
            type: "warning",
            customClass: "phone-message",
            center: true,
          });
        });
    },
    confirmFnc() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "执行中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          const data = {
            afterSalesPlatformCode: this.afterSalesNo,
            expressComName: this.form.logisticsCom,
            // expressComName: "",
            expressNo: this.form.logisticsNum,
            // expressNo: "",
            remark: this.form.remark,
            // remark: "",
            saleOrderNo: this.form.saleOrderNo,
            // saleOrderNo: "",
          };
          afterSalesConfirmChange(data)
            .then((response) => {
              loading.close();
              if (response.status == 200) {
                this.$message.success("操作成功");
                this.$tab.closeOpenPage('/afterSaleOrder/index');
              }
            })
            .catch((err) => {
              loading.close();
            });
        }
      });
    },
    getDetails() {
      const data = {
        afterSalesPlatformCode: this.afterSalesNo,
      };
      // 换货信息查询
      afterSalesConfirmChangeQuery(data).then((response) => {
        console.log(response);
        if (response.status == 200) {
          this.orderDetail = response.data;
          this.orderDetail.items.forEach((item) => {
            this.total.num += item.requestedRefundQuantity;
            this.total.amount += item.requestedRefundAmount;
          });
          this.orderDetail.changeItems.forEach((item) => {
            this.total.diffAmount += item.compensationPrice;
          });
          this.total.amount = this.total.amount.toFixed(2);
          this.total.diffAmount = this.total.diffAmount.toFixed(2);

          if(this.orderDetail.saleOrderNos&&this.orderDetail.saleOrderNos.length>0){
            this.form.saleOrderNo = this.orderDetail.saleOrderNos[0];
            this.getQueryOrderInfo(this.orderDetail.saleOrderNos[0]);
          }
          
        }
      });
      // 换货信息查询
      // afterSalesChangeQuery(data)
      //   .then((response) => {
      //     if (response.status == 200) {
      //       console.log(response);
      //       this.orderDetail.goodsList = response.data.goodsList;
      //       this.orderDetail.goodsList.forEach((item) => {
      //         this.total.diffAmount += item.diffAmount;
      //       });
      //     }
      //   })
      //   .catch((err) => {
      //     // this.$message.error(err);
      //   });
    },
    getQueryOrderInfo(value) {
      if (value) {
        afterSalesQueryOrderInfo({
          saleOrderNo: this.form.saleOrderNo,
        }).then((response) => {
          if (response.status == 200) {
            this.form.expressNo = response.data.expressNo;
            this.form.expressComName = response.data.expressName;
            this.orderDetail.changeItems2 = response.data.goodsDTOS;
          }
        });
      }else{
        this.orderDetail.changeItems = [];
        this.total.diffAmount = 0;
      }
    },
    typefilter(value, list) {
      const data = list.find((item) => {
        return item.value == value;
      });
      return data ? data.label : "";
    },
  },

  computed: {},

  mounted() {
    this.afterSalesNo = this.$route.query.afterSalesNo;
    this.getDetails();
  },

  watch: {},
};
</script>
<style lang='scss' scoped>
.confirm-exchange-shipment {
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 16px;
}
.box-card {
  margin-bottom: 16px;
}
.box-card1 {
  margin-top: 16px;
}
.main-container {
  .minHeight {
    // min-height: 330px;
    flex: 1;
  }
  .box-card2 {
    height: 95%;
  }
  .price-container {
    width: 20%;
    float: right;
    margin-top: 10px;
    div {
      margin-bottom: 8px;
      span {
        color: #f56c6c;
      }
    }
  }
}
h3 {
  font-weight: bold;
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 14px;
  span {
    display: block;
    width: 2px;
    height: 14px;
    background: #f56c6c;
    margin-right: 6px;
  }
}
.color-r {
  color: #f56c6c;
}
.color-y {
  color: #fbc576;
}
.after-sales-products-total {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0 16px 0;
}
.notice-box {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
  .notice-left {
    color: #ffba00;
  }
}
.remarks-class {
  width: 100%;
  display: flex;
  ::v-deep .el-form-item__content {
    flex: 1;
  }
}
.btns-box {
  text-align: center;
  margin: 16px 0;
}
</style>
<style lang="scss">
.confirm-exchange-shipment {
  .el-timeline-item__content {
    .el-card__body {
      padding: 0 16px;
    }
  }
  .el-descriptions-item__label {
    display: flex;
    align-items: center;
  }
  .all-class {
    width: 120px;
    padding-right: 12px;
  }
  .state-color1 {
    color: #67c23a;
    font-weight: bold;
  }
  .el-descriptions--medium:not(.is-bordered) .el-descriptions-item__cell {
    padding-bottom: 18px;
  }
}
</style>