<template>
  <div class="app-container">
    <div class="header" style="width: 100%">
      <el-row class="row" :gutter="12">
        <el-col :span="4">
          <el-card shadow="always">
            <div class="item">
              <div style="padding: 10px">
                <span>今日售后订单</span>
              </div>
              <div class="count">
                {{ orderStatistics ? orderStatistics.afterSalesOrder : 0 }}个
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="always">
            <div class="item">
              <div style="padding: 10px">
                <span>今日退款处理金额</span>
              </div>
              <div class="count">
                {{ orderStatistics ? orderStatistics.ameDayRefund : 0 }}元
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="always">
            <div class="item">
              <div style="padding: 10px">
                <span>退款总金额</span>
              </div>
              <div class="count">
                {{ orderStatistics ? orderStatistics.allDayRefund : 0 }}元
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
    >
      <el-form-item label="商品名称" prop="spuName">
        <el-input
          v-model="queryParams.spuName"
          placeholder="请输入商品名称"
          clearable
          style="width: 180px"
        />
      </el-form-item>
      <el-form-item label="订单编号" prop="userOrderSn">
        <el-input
          v-model="queryParams.userOrderSn"
          placeholder="请输入订单编号"
          clearable
          style="width: 180px"
        />
      </el-form-item>
      <el-form-item label="买家手机号" prop="userPhone" label-width="140px">
        <el-input
          v-model="queryParams.userPhone"
          placeholder="请输入下单用户手机号"
          clearable
          style="width: 180px"
        />
      </el-form-item>
      <el-form-item label="下单时间" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          type="date"
          placeholder="请选择下单时间"
        >
        </el-date-picker>
      </el-form-item>
     
      <el-form-item label="售后状态" prop="orderStatusKey">
        <el-select
          v-model="queryParams.orderStatusKey"
          placeholder="请选择支付方式"
          style="width: 180px"
        >
          <el-option label="已完成" value="ALREADY"> </el-option>
          <el-option label="已拒绝" value="ALREADY_REFUSE"> </el-option>
          <el-option label="待审核" value="WAIT_AUDIT"> </el-option>
       
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="配送方式" prop="deliveryType ">
        <el-select
          v-model="queryParams.deliveryType "
          placeholder="请选择支付方式"
          style="width: 180px"
        >
          <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="支付方式" prop="paymentType">
        <el-select
          v-model="queryParams.paymentType"
          placeholder="请选择支付方式"
          style="width: 180px"
        >
          <el-option label="支付宝" value="alipay"> </el-option>
          <el-option label="微信支付" value="wechat"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="printOrderBtn"
          :disabled="!selectList.length > 0"
          >订单打印</el-button
        >
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="handleExport"
          :disabled="!selectList.length > 0"
          >导出</el-button
        >
      </el-col>
    </el-row>

    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="spuList"
      :span-method="objectSpanMethod"
      @selection-change="handleSelectionChange"
      row-key="id"
    >
      <el-table-column type="selection" width="55" align="center" />

      <el-table-column label="商品图片" align="center" prop="skuPic">
        <template slot-scope="scope">
          <el-image :src="scope.row.skuPic" style="width: 60px; height: 60px"> </el-image>
        </template>
      </el-table-column>

      <el-table-column label="商品分类" align="center" prop="categoryName">
      </el-table-column>
      <el-table-column label="单价/数量" align="center" prop="price">
        <template slot-scope="scope">
          <span>
            {{ scope.row.price }}元 <br />
            共{{ scope.row.quantity }}{{ scope.row.unit }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="包装方式" align="center" prop="packageType">
      </el-table-column>

      <el-table-column label="规格名称" align="center" prop="specsName" />
      <el-table-column label="规格值" align="center" prop="specsValue" />
      <el-table-column label="实付金额(元)" align="center" prop="goodsAmount">
        <template slot-scope="scope"> {{ scope.row.goodsAmount }}元 </template>
      </el-table-column>
      <el-table-column label="订单编号" align="center" prop="userOrderSn" width="220" />
      <el-table-column label="买家姓名" align="center" prop="userNick" />
      <el-table-column label="买家头像" align="center">
        <template slot-scope="scope">
          <el-avatar :size="40" :src="scope.row.userHeadUrl"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column label="买家手机号" align="center" prop="userPhone" />

      <el-table-column
        label="商品名称"
        align="center"
        prop="skuName"
        width="150"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <!-- <el-table-column label="配送方式" align="center" prop="paymentType" width="150">
            <template slot-scope="scope">
              {{
                scope.row.deliveryType == "0"
                  ? "自提"
                  : scope.row.deliveryType == "1"
                  ? "同城下单"
                  : scope.row.deliveryType == "2"
                  ? "异地下单"
                  : ""
              }}
            </template>
          </el-table-column> -->
      <el-table-column label="支付方式" align="center">
        <template slot-scope="scope">
          {{
            scope.row.paymentType == "alipay"
              ? "支付宝支付"
              : scope.row.paymentType == "wechat"
              ? "微信支付"
              : scope.row.paymentType == "card"
              ? "银行卡支付"
              : ""
          }}
        </template>
      </el-table-column>

      <el-table-column label="配送方式" align="center">
        <template slot-scope="scope">
          {{
            scope.row.deliveryMethod == -1
              ? "未选择"
              : scope.row.deliveryMethod == 0
              ? "线下发货"
              : scope.row.deliveryMethod == 1
              ? "平台找司机"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="售后状态" align="center" width="100">
        <template slot-scope="scope">
          {{
            scope.row.afterSaleStatus == 0
              ? "未申请"
              : scope.row.afterSaleStatus == 1
              ? "已申请"
              : scope.row.afterSaleStatus == 2
              ? "审核失败"
              : scope.row.afterSaleStatus == 3
              ? "审核成功（退款中）"
              : scope.row.afterSaleStatus == 4
              ? "退款成功"
              : scope.row.afterSaleStatus == 5
              ? "退款失败（联系客服解决)"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <!-- <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['manage:order:detail']"
            >我要发货</el-button
          > -->
          <el-button
            size="mini"
            type="text"
            @click="handleDetail(scope.row)"
            v-hasPermi="['manage:order:detail']"
            >订单详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-descriptions title="" column="3">
        <el-descriptions-item label="售后状态">
          <el-tag>
            {{
              detailInfo.dxAfterSaleVO
                ? detailInfo.dxAfterSaleVO.afterSaleStatus == 0
                  ? "未申请"
                  : detailInfo.dxAfterSaleVO.afterSaleStatus == 1
                  ? "已申请"
                  : detailInfo.dxAfterSaleVO.afterSaleStatus == 2
                  ? "审核失败"
                  : detailInfo.dxAfterSaleVO.afterSaleStatus == 3
                  ? "审核成功（退款中）"
                  : detailInfo.dxAfterSaleVO.afterSaleStatus == 4
                  ? "退款成功"
                  : detailInfo.dxAfterSaleVO.afterSaleStatus == 5
                  ? "退款失败（联系客服解决）"
                  : ""
                : ""
            }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="售后信息" column="3">
        <el-descriptions-item label="订单id">{{
          detailInfo.dxAfterSaleVO ? detailInfo.dxAfterSaleVO.orderId : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="申请原因">{{
          detailInfo.dxAfterSaleVO ? detailInfo.dxAfterSaleVO.reason : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="申请时间">
          {{
            detailInfo.dxAfterSaleVO ? parseTime(detailInfo.dxAfterSaleVO.createTime) : ""
          }}
        </el-descriptions-item>
        <el-descriptions-item label="问题描述">{{
          detailInfo.dxAfterSaleVO ? detailInfo.dxAfterSaleVO.problemDesc : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="实际退款金额(元)">{{
          detailInfo.dxAfterSaleVO ? detailInfo.dxAfterSaleVO.actualRefundAmount : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="退款时间">
          {{
            detailInfo.dxAfterSaleVO
              ? parseTime(detailInfo.dxAfterSaleVO.refundAuditTime)
              : ""
          }}
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions title="订单详情" column="3">
        <el-descriptions-item label="订单编号">{{
          detailInfo ? detailInfo.userOrderSn : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          {{
            detailInfo
              ? detailInfo.orderStatus == 0
                ? "待商家确认修改运费"
                : detailInfo.orderStatus == 10
                ? "等待买家支付"
                : detailInfo.orderStatus == 20
                ? "等待商家发布货运信息"
                : detailInfo.orderStatus == 90
                ? "等待司机接单"
                : detailInfo.orderStatus == 100
                ? "等待司机支付保证金"
                : detailInfo.orderStatus == 110
                ? "等待司机装货"
                : detailInfo.orderStatus == 120
                ? "已装货，运输中"
                : detailInfo.orderStatus == 30
                ? "司机已到达，等待买家签收"
                : detailInfo.orderStatus == 40
                ? "买家已收货"
                : detailInfo.orderStatus == 50
                ? "已取消"
                : detailInfo.orderStatus == 60
                ? "退款中"
                : detailInfo.orderStatus == 70
                ? "退款成功"
                : detailInfo.orderStatus == 80
                ? "退款失败"
                : detailInfo.orderStatus == 130
                ? "待处理售后"
                : detailInfo.orderStatus == 140
                ? "已处理售后"
                : ""
              : ""
          }}</el-descriptions-item
        >
        <el-descriptions-item label="配送方式">{{
          detailInfo
            ? detailInfo.deliveryMethod == -1
              ? "未选择"
              : detailInfo.deliveryMethod == 0
              ? "线下发货"
              : detailInfo.deliveryMethod == 1
              ? "平台找司机"
              : ""
            : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="支付方式">
          {{
            detailInfo
              ? detailInfo.paymentType == "alipay"
                ? "支付宝"
                : detailInfo.paymentType == "wechat"
                ? "微信支付"
                : detailInfo.paymentType == "card"
                ? "银行卡支付"
                : ""
              : ""
          }}</el-descriptions-item
        >
        <el-descriptions-item label="下单时间">
          {{ detailInfo ? parseTime(detailInfo.createTime) : "" }}
        </el-descriptions-item>
        <el-descriptions-item label="付款时间">
          {{ detailInfo ? parseTime(detailInfo.paymentTime) : "" }}
        </el-descriptions-item>
        <el-descriptions-item label="担保服务费(元)">
          {{ detailInfo ? detailInfo.serviceFee : "" }}
        </el-descriptions-item>
        <el-descriptions-item label="运费(元)">
          {{ detailInfo ? detailInfo.freightFee : "" }}</el-descriptions-item
        >
        <el-descriptions-item label="实付款(元)">
          {{ detailInfo ? detailInfo.paymentAmount : "" }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="物流信息" column="3">
        <el-descriptions-item label="运单号">
          {{ detailInfo ? detailInfo.orderSn : "" }}</el-descriptions-item
        >
        <el-descriptions-item label="司机">{{
          detailInfo ? detailInfo.driverUservalue : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="车型">{{
          detailInfo ? detailInfo.carType : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="车牌号"
          >{{ detailInfo ? detailInfo.plateNo : "" }}
        </el-descriptions-item>
        <el-descriptions-item label="司机电话">{{
          detailInfo ? detailInfo.driverPhone : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="装货时间">
          {{ detailInfo ? detailInfo.shipmentTime : "" }}</el-descriptions-item
        >
        <el-descriptions-item label="送达时间">
          {{ detailInfo ? detailInfo.arriveTime : "" }}</el-descriptions-item
        >
      </el-descriptions>
      <el-descriptions title="买家信息" column="3">
        <el-descriptions-item label="昵称">{{
          detailInfo ? detailInfo.userNick : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="头像">
          <el-avatar
            v-if="detailInfo.userHeadUrl"
            :size="30"
            :src="detailInfo.userHeadUrl"
          ></el-avatar
        ></el-descriptions-item>
        <el-descriptions-item label="收货人">{{
          detailInfo ? detailInfo.consigneeContactName : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号">
          {{ detailInfo ? detailInfo.userPhone : "" }}</el-descriptions-item
        >
        <el-descriptions-item label="备注">
          {{ detailInfo ? detailInfo.orderRemark : "" }}</el-descriptions-item
        >
        <el-descriptions-item label="收货地址"
          >{{ detailInfo ? detailInfo.consigneeAddressDetail : "" }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="商品信息" column="3"> </el-descriptions>
      <el-table :data="detailInfo.orderGoodInfoList" style="width: 100%">
        <el-table-column prop="skuName" label="商品名称"> </el-table-column>
        <el-table-column prop="skuName" label="商品图片">
          <template slot-scope="scope">
            <el-image :src="scope.row.skuPic" style="width: 50px; height: 50px">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="商品单价"> </el-table-column>
        <el-table-column prop="quantity" label="下单数量"> </el-table-column>
        <el-table-column prop="totalPrice" label="总金额(元)"> </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog
      title="打印订单"
      :visible.sync="equipmentOpen"
      width="500px"
      append-to-body
    >
      <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="选择打印机" prop="sn">
            <el-select v-model="printForm.sn" placeholder="请选择打印机">
              <el-option
                v-for="item in printList"
                :key="item.value"
                :label="item.name"
                :value="item.sn"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="printSubmitForm">确 定</el-button>
        <el-button @click="equipmentOpen = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryAfterSalePage, afterSaleOrderInfo } from "@/api/manage/order";
import { statisticsAfterSaleOrder } from "@/api/manage/order";
import { printOrder, equipmentList } from "@/api/manage/equipment";
import Utils from "@/utils/derive";
export default {
  name: "afterSaleOrder",
  data() {
    return {
      spuList: [],
      equipmentOpen: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 参数表格数据
      configList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        spuName: "",
        userOrderSn: "",
        userPhone: "",
        createTime: "",
        orderStatusKey: "",
        paymentType: "",
      },
      printForm: {
        sn: "",
      },
      column: [
        { header: "订单编号", key: "userOrderSn", width: 20 },
        { header: "买家姓名", key: "userNick", width: 20 },
        { header: "买家手机号", key: "userPhone", width: 20 },
        { header: "商品名称", key: "skuName", width: 20 },
        { header: "商品类型", key: "categoryName", width: 20 },
        { header: "商品价格", key: "price", width: 20 },
        { header: "包装方式", key: "packageType", width: 20 },
        { header: "规格名称", key: "specsName", width: 20 },
        { header: "规格值", key: "specsValue", width: 20 },
        { header: "实付金额(元)", key: "goodsAmount", width: 20 },
        { header: "售后状态", key: "afterSaleStatus", width: 20 },
      ],

      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      orderStatistics: {},
      mergeObj: {}, // 用来记录需要合并行的下标
      selectList: [],
      detailInfo: {},
      dialogLoding: false,
      printList: [],
    };
  },
  created() {
    this.getList();
    this.getstatisticsAfterSaleOrder();
    this.getEquipmentList();
  },
  methods: {
    getEquipmentList() {
      equipmentList().then((res) => {
        if (res.code == 200) {
          this.printList = res.data.records;
        }
      });
    },
    printSubmitForm() {
      this.printForm.id = this.selectList.toString();
      printOrder(this.printForm).then((res) => {
        if (res.code == 200) {
          this.equipmentOpen = false;
          this.$modal.msgSuccess("操作成功！");
        } else {
          this.equipmentOpen = false;
          this.$modal.msgError(res.msg);
        }
      });
    },
    printOrderBtn() {
      this.equipmentOpen = true;
    },
    getstatisticsAfterSaleOrder() {
      statisticsAfterSaleOrder().then((res) => {
        if (res.code == 200) {
          this.orderStatistics = res.data;
          console.log(this.orderStatistics);
        } else {
          this.$modal.msgError(res.msg);
        }
      });
    },
    /** 查询参数列表 */
    getList() {
      this.selectList = [];
      this.loading = true;
      queryAfterSalePage(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          let list = response.data.records;
          let totalList = [];
          for (let i = 0; i < list.length; i++) {
            if (list[i].goodsInfo) {
              var goods = JSON.parse(list[i].goodsInfo);
              for (let a = 0; a < goods.length; a++) {
                let bb = {};
                if (goods[a].specsValue.length > 0) {
                  for (let s = 0; s < goods[a].specsValue.length; s++) {
                    bb = {
                      ...list[i],
                      ...goods[a],
                      ...goods[a].specsValue[s],
                    };
                    totalList.push(bb);
                  }
                } else {
                  bb = {
                    ...list[i],
                    ...goods[a],
                  };
                  totalList.push(bb);
                }
              }
            }
          }
          this.spuList = totalList;
          this.total = response.data.total;
          this.loading = false;
          console.log("loading", this.loading);
        }
      );
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex === 0 ||
        columnIndex === 8 ||
        columnIndex === 9 ||
        columnIndex === 10 ||
        columnIndex === 11 ||
        columnIndex === 12 ||
        columnIndex === 16 ||
        columnIndex === 14 ||
        columnIndex === 13 ||
        columnIndex === 15
      ) {
        if (rowIndex === 0 || row.userOrderSn != this.spuList[rowIndex - 1].userOrderSn) {
          let rowspan = 0;
          this.spuList.forEach((element) => {
            if (element.userOrderSn === row.userOrderSn) {
              rowspan++;
            }
          });
          return [rowspan, 1];
        } else {
          return [0, 0];
        }
      }
    },
    handleDetail(record) {
      this.title = "商品详情";
      this.open = true;
      this.dialogLoding = true;
      afterSaleOrderInfo(record.id).then((res) => {
        if (res.code == 200) {
          this.detailInfo = res.data;
          this.dialogLoding = false;
        } else {
          this.dialogLoding = false;
        }
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectList = selection.map((item) => item.id);
      // this.ids = Array.from(new Set(this.selectList));
    },

    /** 导出按钮操作 */
    handleExport() {
      let lists = [];
      for (let index = 0; index < this.spuList.length; index++) {
        for (let a = 0; a < this.selectList.length; a++) {
          if (this.spuList[index].id == this.selectList[a]) {
            lists.push(this.spuList[index]);
          }
        }
      }
      console.log(lists);
      Utils.exportExcel(this.column, lists, "售后订单列表"); //导出方法
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>
<style scoped lang="scss">
.header {
  margin-bottom: 30px;
  .item {
    height: 100px;
  }
  .row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .count {
      padding: 10px;
      font-size: 23px;
      font-weight: 500;
    }
    .zz {
      font-size: 14px;
      color: red;
      padding: 0px 10px;
    }
  }
}
</style>
