<template>
  <div style="height: calc(100vh - 200px)">
    <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 type="expand">
        <template slot-scope="props">
          <div style="padding-left: 20px" m="4">
            <el-table :data="props.row.shopOrders" :border="true">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <div style="padding-left: 20px" m="4">
                    <el-table :data="props.row.productOrders" :border="true">
                      <el-table-column type="index" width="50" label="序号">
                      </el-table-column>
                      <el-table-column
                        label="商品订单号"
                        prop="productOrderNo"
                      />
                      <el-table-column label="商品名称" prop="productName" />
                      <el-table-column label="商品原价" prop="originPrice" />
                      <el-table-column label="商品终价" prop="finalPrice" />
                      <el-table-column
                        label="商品订单金额"
                        prop="productOrderMoney"
                      />
                      <el-table-column label="商品数量" prop="productCount" />
                      <el-table-column
                        label="商品单价"
                        prop="productFinalPrice"
                      />
                      <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="shopName" />
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="总订单号" prop="orderNo"> </el-table-column>
      <el-table-column label="顾客支付" prop="totalMoney"> </el-table-column>
      <el-table-column label="配送费" prop="deliveryMoney"> </el-table-column>
      <el-table-column label="优惠券减免" prop="couponMoney"> </el-table-column>
      <el-table-column label="下单时间" prop="payTime"> </el-table-column>
      <el-table-column label="预计送达时间" prop="predictDeliveryTime">
      </el-table-column>
      <el-table-column label="预计收入" prop="predictIncome"> </el-table-column>
      <el-table-column label="距离" prop="distance"> </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>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  components: {},
  data() {
    return {
      formInline: {
        group: "",
        shopId: "",
        pageNumber: 1,
        pageSize: 10,
      },
      statusList: [
        {
          label: "全部订单",
          value: "0",
        },
        {
          label: "进行中",
          value: "1",
        },
        {
          label: "新订单",
          value: "2",
        },
        {
          label: "待备货",
          value: "3",
        },
        {
          label: "待配送",
          value: "4",
        },
      ],
      total: 0,
      tableData: [],
    };
  },
  created() {
    this.formInline = {
      group: "0",
      marketId: this.marketId,
    };
    this.getList();
  },
  methods: {
    getList() {
      this.$api.mer_admin
        .orderPage({
          ...this.formInline,
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data.data;
          this.total = Number(res.data.data.total);
        })
        .catch((err) => {});
    },
    handleClick(e) {
      this.formInline.group = e.name;
      this.getList();
    },
    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>