<template>
  <div class="app-container">
    <div class="header" style="width: 100%">
      <el-row class="row" :gutter="12">
        <el-col :span="3">
          <div class="item">
            <div class="title">
              <span>今日新增订单</span>
            </div>
            <div class="count">
              {{ orderStatistics ? orderStatistics.AllOrder : 0 }} 个
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="item">
            <div class="title">
              <span>待接单</span>
            </div>
            <div class="count">
              {{ orderStatistics ? orderStatistics.waitOrderCount : 0 }}个
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="item">
            <div class="title">
              <span>待出单</span>
            </div>
            <div class="count">
              {{ orderStatistics ? orderStatistics.waitPendingOrders : 0 }}个
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="item">
            <div class="title">
              <span>进行中</span>
            </div>
            <div class="count">
              {{ orderStatistics ? orderStatistics.inProgress : 0 }}个
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="item">
            <div class="title">
              <span>待处理取消单</span>
            </div>
            <div class="count">
              {{ orderStatistics ? orderStatistics.waitCancelOrder : 0 }}个
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="item">
            <div class="title">
              <span>待处理售后</span>
            </div>
            <div class="count">
              {{ orderStatistics ? orderStatistics.afterSalesOrder : 0 }}个
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="item">
            <div class="title">
              <span>到账金额</span>
            </div>
            <div class="count">
              {{ orderStatistics ? orderStatistics.divideSuccessPrice : 0 }}个
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="item">
            <div class="title">
              <span>冻结金额</span>
            </div>
            <div class="count">
              {{ orderStatistics ? orderStatistics.divideWaitPrice : 0 }}元
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="radio">
      <el-radio-group
        v-model="queryParams.orderStatusKey"
        @change="handleQuery"
      >
        <el-radio-button size="medium" :label="0" :name="0">
          全部
        </el-radio-button>
        <el-radio-button
          size="medium"
          :label="item.value"
          :name="item.value"
          v-for="item in dict.type.sys_order_query_orderstatus_transmission"
          :key="item.value"
        >
          {{ item.label }}
        </el-radio-button>
      </el-radio-group>
    </div>

    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="100px"
    >
      <el-form-item label="关键字" prop="key" label-width="100px">
        <el-input
          v-model="queryParams.key"
          placeholder="请输入订单编号/商品ID/商品名称/买家手机号/买家ID搜索"
          clearable
          style="width: 420px"
        />
      </el-form-item>

      <el-form-item label="下单时间" prop="createTime">
        <el-date-picker
          v-model="createTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="dateChange"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="配送方式" prop="deliveryType">
        <el-select
          v-model="queryParams.deliveryType"
          placeholder="请选择配送方式"
          style="width: 180px"
        >
          <el-option label="全部" value=""> </el-option>
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in dict.type.sys_order_transmission_deliveryType"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="支付方式" prop="paymentType" label-width="100px">
        <el-select
          v-model="queryParams.paymentType"
          placeholder="请选择支付方式"
          style="width: 22 0px"
        >
          <el-option label="全部" value=""> </el-option>
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in dict.type.sys_order_paymentType"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="售后状态" prop="afterSaleStatus">
        <el-select
          v-model="queryParams.afterSaleStatus"
          placeholder="请选择售后状态"
          style="width: 180px"
        >
          <el-option label="全部" value=""> </el-option>
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in dict.type.sys_order_aftersalestatus"
          >
          </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
          plain
          size="mini"
          @click="printOrderBtn"
          :disabled="!selectList.length > 0"
          >批量接单</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          plain
          size="mini"
          @click="printOrderBtn"
          :disabled="!selectList.length > 0"
          >批量出单</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button plain size="mini" type="primary" @click="handleExport"
          >批量导出</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="printOrder"
          :disabled="!selectList.length > 0"
          >订单打印</el-button
        >
      </el-col>
    </el-row>
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :span-method="objectSpanMethod"
      :data="spuList"
      :border="true"
      @selection-change="handleSelectionChange"
      row-key="id"
    >
      <el-table-column type="selection" align="center" />
      <el-table-column
        label="订单编号"
        align="center"
        prop="carPayNo"
        width="220"
      />
      <el-table-column label="取货号" align="center" prop="pickupCode" />
      <el-table-column
        label="商品信息"
        align="center"
        prop="skuName"
        width="200"
      >
        <template slot-scope="scope">
          <div>
            <div>
              {{ scope.row.skuName }}
            </div>
            <div>{{ scope.row.specsName }} ： {{ scope.row.specsValue }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="单价/数量" align="center" prop="price">
        <template slot-scope="scope">
          <span>
            ￥{{ scope.row.amount }}
            <br />
            <span> {{ scope.row.quantity }}{{ scope.row.unit }}</span>
          </span>
        </template>
      </el-table-column>

      <el-table-column
        label="实付款(元)"
        align="center"
        prop="paymentAmount"
        width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.paymentAmount ? "￥" + scope.row.paymentAmount : "" }}
        </template>
      </el-table-column>

      <el-table-column label="订单状态" align="center" width="120">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.sys_order_query_orderstatus_transmission"
            :value="scope.row.orderStatusEnum"
          />
        </template>
      </el-table-column>

      <el-table-column label="售后状态" align="center">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.sys_order_aftersalestatus"
            :value="scope.row.afterSaleStatus"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="下单人ID"
        align="center"
        prop="userId"
        width="100"
      />
      <el-table-column
        label="收货人/提货人信息"
        align="center"
        prop="createTime"
        width="160"
      >
        <template slot-scope="scope">
          <div style="text-align: left">
            {{ scope.row.consignee_contact_mobile }}
            <br />
            {{ scope.row.consignee_address_detail }}
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="预计送达/提货时间"
        align="center"
        prop="exceptArriveTime"
      >
      </el-table-column>

      <el-table-column label="配送方式" align="center" width="120">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.sys_order_transmission_deliveryType"
            :value="scope.row.deliveryType"
          />
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="150" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleTaking(scope.row)"
            v-if="scope.row.orderStatusEnum == 'WAIT_DRIVER_ORDER'"
            >接单</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleIssue(scope.row)"
            v-if="scope.row.orderStatusEnum == 'WAIT_PENDING_ORDERS'"
            >确认出单</el-button
          >
          <el-button size="mini" type="text" @click="handledetail(scope.row)"
            >订单详情</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"
    />
    <dialogOrder
      ref="orderDialogRef"
      @orderDialogReturn="orderReturn"
    ></dialogOrder>
  </div>
</template>

<script>
import {
  statisticsOrderNum,
  merchantSecondOrderList,
} from "@/api/manage/order";
import Utils from "@/utils/derive";
import dialogOrder from "../common/orderDialog.vue";
export default {
  name: "instantDelivery",
  components: {
    dialogOrder,
  },
  dicts: [
    "sys_order_transmission_deliveryType",
    "sys_order_orderStatusKey",
    "sys_order_paymentType",
    "sys_order_aftersalestatus",
    "sys_order_payStatus",
    "sys_order_query_orderstatus_transmission",
    "sys_order_audit",
  ],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      total: 0,
      // 参数表格数据
      spuList: [],
      // 查询参数
      createTime: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        orderStatusKey: 0,
        afterSaleStatus: "",
        paymentType: "",
        deliveryType: "",
        key: "",
        createStartTime: "",
        createEndTime: "",
      },
      printForm: {
        sn: "",
      },
      column: [
        { header: "订单编号", key: "carPayNo", width: 20 },
        { header: "取货号", key: "pickupCode", width: 20 },
        { header: "商品名称", key: "skuName", width: 20 },
        { header: "规格名称", key: "specsName", width: 20 },
        { header: "规格值", key: "specsValue", width: 20 },
        { header: "单价", key: "amount", width: 20 },
        { header: "数量", key: "quantity", width: 20 },
        { header: "实付款", key: "paymentAmount", width: 20 },
        { header: "订单状态", key: "orderStatusEnum", width: 20 },
        { header: "售后状态", key: "afterSaleStatus", width: 20 },
        { header: "下单人id", key: "userId", width: 20 },
        { header: "收货人手机号", key: "consignee_contact_mobile", width: 20 },
        {
          header: "收货人详细地址",
          key: "consignee_address_detail",
          width: 20,
        },
        { header: "预计送达/提货时间", key: "exceptArriveTime", width: 20 },
        { header: "配送方式", key: "deliveryType", width: 20 },
      ],
      // 表单参数
      form: {},
      // 表单校验
      orderStatistics: {},
      selectList: [],
      selectListDC: [],
    };
  },
  mounted() {
    this.getList();
    this.getstatisticsOrder();
  },
  methods: {
    dateChange(val) {
      this.queryParams.createStartTime = val[0];
      this.queryParams.createEndTime = val[1];
    },

    handledetail(record) {
      this.$router.push({
        path: "/order/order/detail/transmission",
        query: { carPayNo: record.carPayNo },
      });
    },
    handleIssue(record) {},

    handleTaking(record) {
      this.$refs.orderDialogRef.openDialog("taking", record);
    },

    orderReturn(type) {
      switch (type) {
        case "taking":
          this.getList();
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        if (
          rowIndex === 0 ||
          row.carPayNo != this.spuList[rowIndex - 1].carPayNo
        ) {
          let rowspan = 0;
          this.spuList.forEach((element) => {
            if (element.carPayNo === row.carPayNo) {
              rowspan++;
            }
          });
          return [rowspan, 1];
        } else {
          return [0, 0];
        }
      }
    },

    getstatisticsOrder() {
      statisticsOrderNum({ spuType: 1 }).then((res) => {
        if (res.code == 200) {
          this.orderStatistics = res.data;
        } else {
          this.$modal.msgError(res.msg);
        }
      });
    },

    /** 查询参数列表 */
    getList() {
      this.selectList = [];
      this.loading = true;
      merchantSecondOrderList(this.queryParams).then((response) => {
        if (response.code == 200) {
          let list = response.data.records;
          const newData = [];
          list.forEach((item) => {
            item.goodsInfoList.forEach((goods) => {
              if (goods.specsValue) {
                goods = { ...goods, ...goods.specsValue[0] };
              }
              newData.push({
                ...item,
                ...goods,
              });
            });
          });
          this.spuList = newData;
          this.total = response.data.total;
          this.loading = false;
        }
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.createTime = [];
      this.queryParams.createStartTime = "";
      this.queryParams.createEndTime = "";
      this.resetForm("queryForm");
      this.queryParams.pageNo = 1;
      this.getList();
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectList = selection.map((item) => item.carPayNo);
      this.selectListDC = selection.map((item) => item);
    },

    /** 导出按钮操作 */
    handleExport() {
      let lists = [];
      for (let index = 0; index < this.spuList.length; index++) {
        for (let a = 0; a < this.selectListDC.length; a++) {
          if (this.spuList[index].id == this.selectListDC[a].id) {
            lists.push(this.spuList[index]);
          }
        }
      }

      Utils.exportExcel(this.column, lists, "订单列表"); //导出方法
    },
  },
};
</script>
<style scoped lang="scss">
.header {
  .item {
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 40px;
  }
  .row {
    background: #f4f4f4;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .title {
      text-align: center;
    }
    .count {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      color: rgb(64, 158, 255);
    }
    .zz {
      font-size: 14px;
      color: red;
      padding: 0px 10px;
    }
  }
}
.radio {
  margin: 20px 0px;
}
</style>
<style>
.el-radio-button__inner {
  width: 150px;
}
</style>
