<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" :size="ELsize" label-width="auto">
      <el-form-item label="维权单号" prop="rightsCode">
        <el-input v-model="queryParams.rightsCode" placeholder="请输入维权单号" clearable></el-input>
      </el-form-item>
      <el-form-item label="订单编号" prop="orderNo">
        <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable></el-input>
      </el-form-item>
      <el-form-item label="售后类型" prop="rightsType">
        <el-select v-model="queryParams.rightsType" clearable placeholder="请选择售后类型">
          <el-option v-for="item in rightsTypeOptions" :label="item.label" :value="item.value"
            :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户手机号" prop="receiverMobile">
        <el-input v-model="queryParams.receiverMobile" placeholder="请输入客户手机号" clearable></el-input>
      </el-form-item>
      <el-form-item label="售后操作" prop="rightsOperateStatus">
        <el-select v-model="queryParams.rightsOperateStatus" clearable placeholder="请选择售后操作">
          <el-option v-for="item in rightsOperateStatusOptions" :label="item.label" :value="item.value"
            :key="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="售后状态" prop="rightsRefundStatus">
        <el-select v-model="queryParams.rightsRefundStatus" clearable placeholder="请选择售后状态">
          <el-option v-for="item in rightsRefundStatusOptions" :label="item.label" :value="item.value"
            :key="item.value"></el-option>
          <!-- <el-option label="待退款" :value="0"></el-option>
          <el-option label="退款成功" :value="1"></el-option>
          <el-option label="退款失败" :value="2"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="订单时间">
        <el-date-picker value-format="yyyy-MM-dd" v-model="timer" @change="getTimer" type="daterange"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        <el-button type="primary" plain @click="handleExport">导出订单</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" row-key="id" :border="TableBorder" :size="ELTableSize">
      <el-table-column prop="rightsCode" align="center" label="维权单号" width="150">
      </el-table-column>
      <el-table-column prop="orderNo" align="center" label="订单编号" width="130">
      </el-table-column>
      <el-table-column prop="businessName" align="center" label="所属店铺" min-width="140">
      </el-table-column>
      <el-table-column prop="rightsType" align="center" label="售后类型" width="100">
        <template slot-scope="scope">
          <el-tag effect="plain" type="warning" v-if="scope.row.rightsType == 5">仅退款</el-tag>
          <el-tag effect="plain" type="success" v-if="scope.row.rightsType == 10">退货退款</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="practicalSales" align="center" label="客户信息">
        <template slot-scope="scope">
          <div>
            <div>{{ scope.row.receiver }}</div>
            <div>{{ scope.row.receiverMobile }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="refundMoney" align="center" label="退款金额">
      </el-table-column>
      <el-table-column prop="refundPoint" align="center" label="退款积分">
      </el-table-column>

      <el-table-column prop="price" label="证明图片" align="center" width="100">
        <template slot-scope="{row}">
          <template v-if="row.voucherImages && row.voucherImages.length">
            <el-image :src="row.voucherImages[0]" style="width: 80px; height: 80px"
              :preview-src-list="row.voucherImages">
            </el-image>
          </template>
          <template v-else>--</template>
        </template>
      </el-table-column>
      <el-table-column align="center" label="售后操作" width="152">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.rightsOperateStatus == 0">申请</el-tag>
          <el-tag type="success" v-if="scope.row.rightsOperateStatus == 1">同意</el-tag>
          <el-tag type="warning" v-if="scope.row.rightsOperateStatus == 2">买家已发货</el-tag>
          <el-tag type="success" v-if="scope.row.rightsOperateStatus == 3">商家已收到退货商品</el-tag>
          <el-tag type="warning" v-if="scope.row.rightsOperateStatus == 4">商家发起退款支付</el-tag>
          <el-tag type="success" v-if="scope.row.rightsOperateStatus == 5">已支付退款</el-tag>
          <el-tag type="danger" v-if="scope.row.rightsOperateStatus == 6">拒绝</el-tag>
          <el-tag type="info" v-if="scope.row.rightsOperateStatus == 7">自动关闭</el-tag>
          <el-tag type="info" v-if="scope.row.rightsOperateStatus == 8">主动撤消</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="售后状态">
        <template slot-scope="scope">
          <el-tag type="warning" v-if="scope.row.rightsRefundStatus == 0">待退款</el-tag>
          <el-tag type="success" v-if="scope.row.rightsRefundStatus == 1">退款成功</el-tag>
          <el-tag type="danger" v-if="scope.row.rightsRefundStatus == 2">退款失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" align="center" label="创建时间" width="160">
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <!-- <el-button type="text" :size="ELTableSize" @click="operation(scope.row, 'logistics')">查看物流cs</el-button> -->
          <el-button type="text" :size="ELTableSize" @click="operation(scope.row, 'view')">查看</el-button>
          <template v-if="scope.row.rightsType == 10">
            <!-- 退货 -->
            <el-button v-if="scope.row.rightsOperateStatus == 2" type="text" :size="ELTableSize"
              @click="operation(scope.row, 'logistics')">查看物流</el-button>
            <el-button v-if="scope.row.rightsOperateStatus == 2" type="text" :size="ELTableSize"
              @click="operation(scope.row, 'receive')">收货</el-button>
            <el-button v-if="
              scope.row.rightsOperateStatus == 3 ||
              scope.row.rightsOperateStatus == 4 ||
              scope.row.rightsRefundStatus == 2
            " type="text" :size="ELTableSize" @click="operation(scope.row, 'refund')">{{
              scope.row.rightsRefundStatus == 2 ? "重新退款" : "退款"
            }}</el-button>
          </template>
          <template v-if="scope.row.rightsType == 5">
            <el-button v-if="
              scope.row.rightsOperateStatus == 1 ||
              scope.row.rightsOperateStatus == 4 ||
              scope.row.rightsRefundStatus == 2
            " type="text" :size="ELTableSize" @click="operation(scope.row, 'refund')">{{
              scope.row.rightsRefundStatus == 2 ? "重新退款" : "退款"
            }}</el-button>
          </template>
          <el-button v-if="
            scope.row.rightsRefundStatus == 0 &&
            scope.row.rightsOperateStatus == 0
          " type="text" :size="ELTableSize" @click="operation(scope.row)">操作</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 弹窗, 新增 / 修改 -->
    <after-sale-details @result="getList" v-if="setShareBenefit" ref="afterSaleDetails"></after-sale-details>

    <el-dialog top="5vh" title="物流信息" width="30%" :visible.sync="visible">
      <div v-loading="logisticsLoading">
        <el-steps direction="vertical" finish-status="success" :active="tracesList.length" v-if="tracesList.length">
          <el-step v-for="(item, i) in tracesList" :key="i" :title="item.acceptTime"
            :description="item.acceptStation"></el-step>
        </el-steps>
        <div class="no-data" v-if="tracesList.length == 0">
          <!-- {{ info.reason }} -->
          暂无物流信息
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  shopOrderAfterSalePage,
  shopOrderAfterSaleAutoRefund,
  shopOrderAfterSaleRefund,
  shopOrderAfterSaleReceive,
  shopOrderAfterSaleLogisticsTrace,
} from "@/api/order";
import AfterSaleDetails from "./after-sale-details.vue";
import Status from "./status"
export default {
  name: "AfterSaleOrder",
  mixins: [Status],
  components: { AfterSaleDetails },
  data() {
    return {
      //按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 测试单表表格数据
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNo: undefined,
        rightsCode: undefined,
        rightsType: undefined,
        mobile: undefined,
        rightsOperateStatus: undefined,
        rightsRefundStatus: undefined,
        startTime: undefined,
        endTime: undefined,
      },
      timer: [],
      setShareBenefit: false,
      visible: false, // 物流弹窗
      tracesList: [], // 物流信息
      logisticsLoading: false, // 物流弹窗loading
      info: {},
    };
  },
  created() {
    this.handleQuery();
  },
  methods: {
    getTimer(e) {
      if (e && e.length > 1) {
        this.queryParams.startTime = e[0];
        this.queryParams.endTime = e[1];
      } else {
        this.queryParams.startTime = undefined;
        this.queryParams.endTime = undefined;
      }
    },
    getList() {
      this.loading = true;
      shopOrderAfterSalePage(this.queryParams).then((response) => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.timer = [];
      this.queryParams.startTime = undefined;
      this.queryParams.endTime = undefined;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //  导出订单
    handleExport() {
      this.download(
        "/rights/saleRightsOrder/export",
        {
          ...this.queryParams,
        },
        `售后订单_${new Date().getTime()}.xlsx`
      );
    },
    // 操作
    async operation(row, type) {
      if (type == "receive") {
        this.setShareBenefit = true;
        this.$nextTick(() => {
          this.$refs.afterSaleDetails.init(row.id, type);
        });
        return false;
        // 收货
        this.$confirm("确定收货?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            shopOrderAfterSaleReceive({
              rightsId: row.id,
              rightsInStockList: row.rightsChildOrders.mpa((item) => {
                num: item.refundNum;
                rightsChildOrderId: item.id;
              }),
            }).then((res) => {
              if (res.code == 200) {
                this.$message.success("收货成功！");
                this.loadList();
              }
            });
          })
          .catch(() => { });
      } else if (type == "logistics") {
        // 查看物流
        this.tracesList = [];
        this.logisticsLoading = true;
        this.visible = true;

        try {
          const { data } = await shopOrderAfterSaleLogisticsTrace(row.id)
          if (data) {
            this.info = data || {};
            this.tracesList = data.traces.reverse() || [];
          }
        } catch {
          this.tracesList = [];
        } finally {
          this.logisticsLoading = false;
        }



        // .then((res) => {
        //   if (res.code == 200) {
        //     if (res.data) {
        //       this.info = res.data;
        //       if (res.data.traces.length > 0) {
        //         this.tracesList = res.data.traces.reverse();
        //       }
        //     }
        //   }
        //   this.loading = false;
        // }).catch(() => {
        //   this.loading = false;
        // });
      } else if (type == "refund") {
        // 退款
        this.$confirm("确定退款?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            shopOrderAfterSaleRefund({
              id: row.id,
            }).then((res) => {
              if (res.code == 200) {
                // this.countdown()
                this.$message.success(res.msg);
                setTimeout(() => {
                  this.getList();
                }, 3000);
              }
            });
          })
          .catch(() => { });
      } else {
        this.setShareBenefit = true;
        this.$nextTick(() => {
          this.$refs.afterSaleDetails.init(row.id, type);
        });
      }
    },
    getOptionsLabel(options, value) {
      for (let item of options) {
        if (item.value == value) {
          return item.label;
        }
      }
    },
  },
};
</script>
