<template>
  <div style="height: calc(100vh - 200px)">
    <el-form
      v-if="storeList.length > 1"
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item label="摊铺">
        <el-select
          class="filter-item"
          style="width: 200px"
          v-model="formInline.shopId"
          placeholder="请选择摊铺"
        >
          <el-option
            v-for="item in storeList"
            :key="item.shopId"
            :label="item.shopName"
            :value="item.shopId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input
          v-model="formInline.productName"
          placeholder="商品名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select
          v-model="formInline.orderStatus"
          placeholder="请选择订单状态"
          clearable
          style="width: 150px"
        >
          <el-option label="待备货" value="1"></el-option>
          <el-option label="待取货" value="2"></el-option>
          <el-option label="待收货" value="3"></el-option>
          <el-option label="已完成" value="4"></el-option>
        </el-select>
      </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>
    <!-- <el-tabs v-model="formInline.group" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in statusList"
        :key="item.value"
        :label="item.label"
        :name="item.value"
      ></el-tab-pane>
    </el-tabs> -->
    <el-table :data="tableData" height="70vh" border style="width: 100%">
      <el-table-column
        label="商品单号"
        prop="productOrderNo"
        width="150"
        align="center"
      />
      <el-table-column
        label="结算单位订单号"
        prop="unitOrderNo"
        width="150"
        align="center"
      />
      <el-table-column
        label="总订单号"
        prop="totalOrderNo"
        width="120"
        align="center"
      />
      <el-table-column
        label="总商品数量"
        prop="productCount"
        width="100"
        align="center"
      />
      <el-table-column
        label="商品原价"
        prop="originPrice"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          ¥{{ scope.row.originPrice || "0.00" }}
        </template>
      </el-table-column>
      <el-table-column
        label="商品终价"
        prop="finalPrice"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          ¥{{ scope.row.finalPrice || "0.00" }}
        </template>
      </el-table-column>
      <el-table-column
        label="商品数量"
        prop="productQuantity"
        width="100"
        align="center"
      />

      <el-table-column
        label="消耗积分"
        prop="pointsUsed"
        width="100"
        align="center"
      />
      <el-table-column
        label="订单状态"
        prop="orderStatus"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag :type="getStatusTagType(scope.row.orderStatus)">
            {{ getStatusText(scope.row.orderStatus) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="顾客实际支付"
        prop="totalPayMoney"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          ¥{{ scope.row.totalPayMoney || "0.00" }}
        </template>
      </el-table-column>
      <el-table-column
        label="商品总价"
        prop="productMoney"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          ¥{{ scope.row.productMoney || "0.00" }}
        </template>
      </el-table-column>
      <el-table-column
        label="配送费"
        prop="deliveryMoney"
        width="80"
        align="center"
      >
        <template slot-scope="scope">
          ¥{{ scope.row.deliveryMoney || "0.00" }}
        </template>
      </el-table-column>
      <el-table-column
        label="优惠券减免"
        prop="couponMoney"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          ¥{{ scope.row.couponMoney || "0.00" }}
        </template>
      </el-table-column>
      <el-table-column
        label="支付时间"
        prop="payTime"
        width="150"
        align="center"
      />
      <el-table-column
        label="预计收入"
        prop="predictIncome"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          ¥{{ scope.row.predictIncome || "0.00" }}
        </template>
      </el-table-column>
      <el-table-column label="关联总订单链接" width="120" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="viewTotalOrder(scope.row)"
          >
            查看总订单
          </el-button>
        </template>
      </el-table-column>
    </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>
    <!-- 订单详情 -->
    <viewDetails ref="viewDetails"></viewDetails>
  </div>
</template>

<script>
import viewDetails from "./popup/view-details.vue";
import { mapState } from "vuex";
export default {
  components: { viewDetails },
  data() {
    return {
      valueOne: [],
      formInline: {
        group: "",
        shopId: "",
        pageNumber: 1,
        pageSize: 10,
        productName: "",
        orderStatus: "",
        startTime: "",
        endTime: ""
      },
      statusList: [
        {
          label: "全部订单",
          value: "0"
        },
        {
          label: "待备货",
          value: "1"
        },
        {
          label: "待取货",
          value: "2"
        },
        {
          label: "待收货",
          value: "3"
        },
        {
          label: "已完成",
          value: "4"
        }
      ],
      tableData: [],
      total: 0
    };
  },
  created() {
    this.formInline = {
      group: "0",
      // marketId: this.marketId,
      shopId: this.shopId,
      productName: "",
      orderStatus: "",
      startTime: "",
      endTime: ""
    };
    this.valueOne = [];
    this.getList();
  },
  methods: {
    changeValueOne(e) {
      console.log(e);
      if (e) {
        this.formInline.startTime = e[0];
        this.formInline.endTime = e[1];
      } else {
        this.formInline.startTime = "";
        this.formInline.endTime = "";
      }
    },
    getList() {
      //根据店铺查询
      this.$api.mer_admin
        .shopOrderPage({
          ...this.formInline,
          orderCategory: 2
        })
        .then(res => {
          console.log(res);
          this.tableData = res.data.data.data;
          this.total = Number(res.data.data.total);
        });
    },
    Reset() {
      this.formInline = {
        group: "0",
        shopId: this.shopId,
        productName: "",
        orderStatus: "",
        startTime: "",
        endTime: ""
      };
      this.valueOne = [];
      this.getList();
    },
    handleClick(e) {
      this.advanceSellStatus = e.name;
      this.getList();
    },
    view(row) {
      this.$refs.viewDetails.toggle(row).update();
    },
    viewOrderDetail(row) {
      // 查看订单明细的逻辑
      this.$message.info("查看订单明细功能待实现");
    },
    viewTotalOrder(row) {
      // 查看总订单的逻辑
      this.$message.info("查看总订单功能待实现");
    },
    getStatusText(status) {
      const statusMap = {
        1: "待备货",
        2: "待取货",
        3: "待收货",
        4: "已完成"
      };
      return statusMap[status] || "未知状态";
    },
    getStatusTagType(status) {
      const typeMap = {
        1: "warning",
        2: "primary",
        3: "info",
        4: "success"
      };
      return typeMap[status] || "";
    },
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.formInline.pageNumber = val;
      this.getList();
    }
  },
  computed: {
    ...mapState("userData", [
      "isMerchant",
      "marketList",
      "storeList",
      "marketId",
      "shopId"
    ])
  }
};
</script>

<style lang="scss" scoped></style>
