<template>
  <div style="height: calc(100vh - 180px)">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="收货人姓名">
        <el-input v-model="form.name" placeholder="收货人姓名搜索"></el-input>
      </el-form-item>
      <el-form-item label="订单编号">
        <el-input v-model="form.orderNo" placeholder="订单编号"></el-input>
      </el-form-item>
      <el-form-item label="订单时间">
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="changeTime"
          v-model="time"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button type="primary" @click="Reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="stat-list">
      <div class="stat-item">
        <i
          class="el-icon-s-order"
          style="font-size: 22px; margin-right: 8px"
        ></i>
        <div class="stat-right">
          <div class="stat-title">订单数量（笔）</div>
          <div class="stat-value">
            <span style="font-size: 20px">{{ overviewList.totalCount }}</span>
          </div>
        </div>
      </div>
      <div class="stat-item">
        <i
          class="el-icon-s-goods"
          style="font-size: 22px; margin-right: 8px"
        ></i>
        <div class="stat-right">
          <div class="stat-title">订单金额（元）</div>
          <div class="stat-value">
            <span style="font-size: 20px">{{ overviewList.totalMoney }}</span>
          </div>
        </div>
      </div>
      <div class="stat-item">
        <i
          class="el-icon-s-marketing"
          style="font-size: 22px; margin-right: 8px"
        ></i>
        <div class="stat-right">
          <div class="stat-title">退款金额</div>
          <div class="stat-value">
            <span style="font-size: 20px">{{
              overviewList.totalRefundMoney
            }}</span>
          </div>
        </div>
      </div>
      <div class="stat-item">
        <i
          class="el-icon-s-order"
          style="font-size: 22px; margin-right: 8px"
        ></i>
        <div class="stat-right">
          <div class="stat-title">订单完成率</div>
          <div style="font-size: 20px" class="stat-value">
            {{ overviewList.completeRate }}%
          </div>
        </div>
      </div>
      <div v-if="!isBrand" class="stat-item">
        <i
          class="el-icon-s-order"
          style="font-size: 22px; margin-right: 8px"
        ></i>
        <div class="stat-right">
          <div class="stat-title">代理商抽成(元)</div>
          <div style="font-size: 20px" class="stat-value">
            {{
              overviewList.agentCommission ? overviewList.agentCommission : 0
            }}
          </div>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部订单" name="全部订单"></el-tab-pane>
      <el-tab-pane label="待支付" name="待支付"></el-tab-pane>
      <el-tab-pane label="待接单" name="待接单"></el-tab-pane>
      <el-tab-pane label="待备货" name="待备货"></el-tab-pane>
      <el-tab-pane label="待取货" name="待取货"></el-tab-pane>
      <el-tab-pane label="已取货" name="已取货"></el-tab-pane>
      <el-tab-pane label="配送中" name="配送中"></el-tab-pane>
      <el-tab-pane label="已配送" name="已配送"></el-tab-pane>
      <el-tab-pane label="完成" name="完成"></el-tab-pane>
      <el-tab-pane label="未支付订单取消" name="未支付订单取消"></el-tab-pane>
      <el-tab-pane label="用户申请退款中" name="用户申请退款中"></el-tab-pane>
      <el-tab-pane label="用户申请已退款" name="用户申请已退款"></el-tab-pane>
      <el-tab-pane label="商家取消订单" name="商家取消订单"></el-tab-pane>
      <el-tab-pane label="平台取消订单" name="平台取消订单"></el-tab-pane>
    </el-tabs>
    <el-table :data="tableData" height="70%" border style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <div style="padding-left: 20px" m="4">
            <el-table :data="props.row.shopOrderResults" :border="true">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <div style="padding-left: 20px" m="4">
                    <el-table
                      :data="props.row.productOrderResults"
                      :border="true"
                    >
                      <el-table-column type="index" width="50" label="序号">
                      </el-table-column>
                      <el-table-column label="商品名称" prop="productName" />
                      <el-table-column label="商品数量" prop="productCount" />
                      <el-table-column label="商品原价" prop="originPrice" />
                      <el-table-column label="商品终价" prop="finalPrice" />
                      <el-table-column
                        label="商品订单金额"
                        prop="productOrderMoney"
                      />
                      <el-table-column label="商品图片" prop="productImg">
                        <template #default="scope">
                          <el-image
                            style="width: 60px; height: 60px"
                            :src="scope.row.productImg"
                            :zoom-rate="1.2"
                            :max-scale="7"
                            :min-scale="0.2"
                            :preview-src-list="[scope.row.productImg]"
                            :initial-index="4"
                            :preview-teleported="true"
                            fit="cover"
                          />
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </template>
              </el-table-column>
              <el-table-column type="index" width="50" label="序号">
              </el-table-column>
              <el-table-column label="订单编号" prop="unitOrderNo" />
              <el-table-column label="店铺名称" prop="shopName" />
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column type="index" width="50" label="序号"> </el-table-column>
      <el-table-column label="总订单号" prop="orderNo" />
      <el-table-column label="下单时间" prop="createTime" />
      <el-table-column label="收货人姓名" prop="receiverName" />
      <el-table-column label="收货人电话" prop="receiverPhone" />
      <el-table-column label="收货人地址" prop="poi">
        <template #default="scope">
          {{ scope.row.poi }} {{ scope.row.detail }}
        </template>
      </el-table-column>
      <el-table-column label="市场订单金额" prop="unitOrderMoney" />
      <el-table-column label="市场订单商品金额" prop="productMoney" />
      <el-table-column label="市场订单配送费" prop="deliveryMoney" />
      <el-table-column label="调度费" prop="dispatchMoney" />
      <el-table-column label="包装费" prop="packageMoney" />
      <el-table-column label="订单支付状态" prop="payStatus">
        <template slot-scope="scope">
          {{ filterStatus(scope.row.payStatus) }}
        </template>
      </el-table-column>
      <el-table-column label="订单业务状态" prop="status">
        <template slot-scope="scope">
          {{ filterUnitStatus(scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column label="订单退款状态" prop="refundStatus">
        <template slot-scope="scope">
          {{ filterUnitRefundStatus(scope.row.refundStatus) }}
        </template>
      </el-table-column>
      <el-table-column label="订单结算状态" prop="settleStatus">
        <template slot-scope="scope">
          {{ scope.row.settleStatus == 0 ? "未结算" : "已结算" }}
        </template>
      </el-table-column>
      <el-table-column label="市场编号" prop="settleStatus" />
      <el-table-column label="市场名称" prop="marketName" />
      <el-table-column label="申请退款原因" prop="refundReason" />
    </el-table>
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        :current-page="formInline.pageNumber"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="formInline.pageSize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "全部订单",
      formInline: {
        pageNumber: 1,
        pageSize: 10,
        brandId: "",
        agentId: "",
      },
      form: {
        name: "",
        orderNo: "",
        startTime: "",
        endTime: "",
      },
      total: 0,
      state: "",
      tableData: [],
      time: "",
      overviewList: {},
      isBrand: false,
    };
  },
  created() {
    if (
      JSON.parse(sessionStorage.getItem("userInfo")).role ===
      "ROLE_BRAND_MANAGER"
    ) {
      this.formInline.brandId = JSON.parse(
        sessionStorage.getItem("userInfo")
      ).brandId;
      this.isBrand = true;
    } else {
      this.formInline.brandId = JSON.parse(
        sessionStorage.getItem("userInfo")
      ).agentId;
      this.isBrand = false;
    }
    this.getList();
  },
  methods: {
    getList() {
      this.$api.mer_admin
        .distributorOrBrandOrderPage({
          ...this.formInline,
          state: this.state,
          ...this.form,
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data.data;
          this.total = Number(res.data.data.total);
        });
      this.$api.mer_admin
        .orderOverview({ ...this.formInline, ...this.form })
        .then()
        .then((res) => {
          this.overviewList = res.data.data;
          console.log(res);
        });
    },
    Reset() {
      this.form = {
        name: "",
        orderNo: "",
        startTime: "",
        endTime: "",
      };
      this.getList();
    },
    handleClick(activeName) {
      switch (activeName.label) {
        case "全部订单":
          this.state = "";
          break;
        case "待支付":
          this.state = 0;
          break;
        case "待接单":
          this.state = 1;
          break;
        case "待备货":
          this.state = 2;
          break;
        case "待取货":
          this.state = 3;
          break;
        case "已取货":
          this.state = 4;
          break;
        case "配送中":
          this.state = 5;
          break;
        case "已配送":
          this.state = 6;
          break;
        case "完成":
          this.state = 8;
          break;
        case "未支付订单取消":
          this.state = -1;
          break;
        case "用户申请退款中":
          this.state = -2;
          break;
        case "用户申请已退款":
          this.state = -3;
          break;
        case "商家取消订单":
          this.state = -4;
          break;
        case "平台取消订单":
          this.state = -5;
          break;
      }

      this.getList();
    },
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.formInline.pageNumber = val;
      this.getList();
    },
    filterStatus(val) {
      if (val === 0) {
        return "待支付";
      } else if (val == 1) {
        return "已支付";
      } else if (val == -1) {
        return "已取消";
      } else if (val == -2) {
        return "已退款";
      } else if (val == -3) {
        return "部分退款";
      }
    },
    filterUnitStatus(val) {
      if (val === 0) {
        return "待支付";
      } else if (val == 1) {
        return "待接单";
      } else if (val == 2) {
        return "待备货";
      } else if (val == 3) {
        return "待取货";
      } else if (val == 4) {
        return "已取货";
      } else if (val == 5) {
        return "配送中";
      } else if (val == 6) {
        return "已配送";
      } else if (val == 8) {
        return "完成";
      } else if (val == -1) {
        return "未支付订单取消";
      } else if (val == -2) {
        return "用户申请退款中";
      } else if (val == -3) {
        return "用户申请已退款";
      } else if (val == -4) {
        return "商家取消订单";
      } else if (val == -5) {
        return "平台取消订单";
      }
    },
    filterUnitRefundStatus(val) {
      if (val === 0) {
        return "正常";
      } else if (val == 1) {
        return "退款中";
      } else if (val == 2) {
        return "完全退款";
      } else if (val == 3) {
        return "部分退款";
      } else if (val == 4) {
        return "拒绝用户退款";
      } else if (val == -1) {
        return "退款失败";
      } else if (val == -2) {
        return "用户申请退款中";
      }
    },
    changeTime(e) {
      if (e) {
        this.form.startTime = e[0];
        this.form.endTime = e[1];
      } else {
        this.form.startTime = "";
        this.form.endTime = "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.stat-list {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  // flex-wrap: wrap;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}
.stat-item {
  width: 20%;
  margin: 20px 20px;
  display: flex;
  align-items: center;
}
.stat-right {
  font-size: 18px;
}
.stat-title {
  margin-bottom: 5px;
}
</style>