<template>
  <div>
    <div v-if="isMerchant" style="height: calc(100vh - 200px)">
      <obj-table-plus
        ref="oTable"
        style="height: 100%"
        :tableCols="tableCols"
        :tableProp="tableProp"
        @query="queryList"
        v-model="dataList"
        :tableEvent="tableEvent"
        :enableAutoQuery="false"
      >
        <template slot="tableTop">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-row v-if="storeList.length > 1">
              <el-col :span="24">
                <!-- <el-form-item label="菜市场">
                  <el-select
                    @change="getData"
                    v-model="formInline.marketId"
                    placeholder="请选择菜市场"
                  >
                    <el-option
                      v-for="item in marketList"
                      :key="item.marketId"
                      :label="item.marketName"
                      :value="item.marketId"
                    ></el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item label="店铺">
                  <el-select
                    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-col>
            </el-row>
            <el-form-item label="订单号">
              <el-input
                v-model="formInline.name"
                placeholder="订单号搜索"
              ></el-input>
            </el-form-item>
            <el-form-item label="订单商品">
              <el-input
                v-model="formInline.name"
                placeholder="订单名称搜索"
              ></el-input>
            </el-form-item>
            <el-form-item label="定金付款时间">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="value1"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="尾款付款时间">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="value1"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="配送方式">
              <el-select v-model="formInline.name" placeholder="请选择菜市场">
                <el-option
                  v-for="item in [
                    { label: '全部', value: '0' },
                    { label: '快递', value: '1' },
                    { label: '自提', value: '2' },
                  ]"
                  :key="item.marketId"
                  :label="item.marketName"
                  :value="item.marketId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="$refs.oTable.reload()"
                >查询</el-button
              >
              <el-button type="primary" @click="Reset">重置</el-button>
            </el-form-item>
          </el-form>
          <el-tabs v-model="activeName" @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>
          <div class="mb-2">
            <el-button type="primary" size="small" @click="addProduct"
              >批量导出</el-button
            >
          </div>
        </template>
      </obj-table-plus>
      <!-- 详情 -->
      <viewDetails ref="viewDetails"></viewDetails>
    </div>
    <div style="height: calc(100vh - 200px)" v-else>
      <el-empty :image-size="200" description="您不是摊主哦"></el-empty>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import viewDetails from "./popup/view-details.vue";
export default {
  components: { viewDetails },
  data() {
    return {
      value1: "",
      activeName: "5",
      advanceSellStatus: "",
      dataList: [],
      formInline: {
        name: "",
        marketId: "",
        shopId: "",
      },
      tableProp: {
        "auto-resize": true,
        border: true,
        height: "auto",
        "row-id": "id",
        "show-overflow": false,
      },
      statusList: [
        {
          label: "全部",
          value: "5",
        },
        {
          label: "代付定金",
          value: "0",
        },
        {
          label: "代付尾款",
          value: "1",
        },
        {
          label: "待发货",
          value: "2",
        },
        {
          label: "待收货",
          value: "3",
        },
        {
          label: "待评价",
          value: "4",
        },
        {
          label: "已完成",
          value: "6",
        },
        {
          label: "已取消",
          value: "7",
        },
        {
          label: "交易关闭",
          value: "8",
        },
      ],
      productFilterType: "SALE",
      selectList: [],
    };
  },
  created() {
    this.formInline = {
      marketId: this.marketId,
      shopId: this.shopId,
    };
    this.$nextTick(() => {
      this.$refs.oTable.reload();
    });
  },
  methods: {
    addProduct() {
      this.$refs.addOrUpdate.toggle().add();
    },
    queryList(pageNo, pageSize) {
      let res = {
        data: [
          {
            advanceSellId: "1870015398464876544",
            advanceSellStatus: 1,
            balancePaymentEndTime: "2024-12-28 00:00:00",
            balancePaymentStartTime: "2024-12-25 00:00:00",
            brandId: null,
            collectionNum: null,
            description: "好吃的苹果",
            discountActivity: null,
            endTime: "2024-12-25 00:00:00",
            estimatedEndDeliveryTime: "2025-01-03 00:00:00",
            estimatedStartDeliveryTime: "2024-12-31 00:00:00",
            favoriteNum: null,
            id: "1869660245152923648",
            isAdvanceSell: 1,
            isDiscount: null,
            isRefundEarnestMoney: 1,
            keywords: null,
            marketId: "1844393110392221696",
            maxCostPrice: 10,
            maxMarketPrice: 20,
            maxSalePrice: 20,
            merchantId: "1844397348581253120",
            minCostPrice: 5,
            minMarketPrice: 10,
            minSalePrice: 10,
            name: "苹果",
            otherAttribute: "[]",
            productAttributeList: [
              {
                attributeName: "重量",
                attributeValue: "10斤,20斤",
                id: "1869660245454913536",
                productId: "1869660245152923648",
              },
            ],
            productCategoryId: "31",
            productIntroducePhoto: "",
            productPhotoList: [
              {
                id: "1869660245391998976",
                isMain: 1,
                productId: "1869660245152923648",
                sort: null,
                url: "https://dmjs.obs.cn-east-3.myhuaweicloud.com/hhsh/20241219/90cb416e636b4e1f99f47e458d0a0fc8.jpg",
              },
            ],
            productPlace: "山西省-太原市-小店区",
            productSpecificationList: [
              {
                advanceSellStockNum: 40,
                attributeJson:
                  '[{"attributeName":"重量","attributeValue":"10斤"}]',
                attributeList: [
                  {
                    attributeName: "重量",
                    attributeValue: "10斤",
                  },
                ],
                attributeValue: "10斤",
                balancePayment: 3,
                costPrice: 5,
                earnestMoney: 6,
                id: "1869660245517828096",
                isAdvanceSell: 1,
                isDiscount: null,
                isRecommend: 0,
                isRecommendIndex: null,
                limitCount: 2147483647,
                marketPrice: 10,
                presalePrice: 9,
                productId: "1869660245152923648",
                saleNum: 0,
                salePrice: 10,
                stockNum: 234,
                virtualSaleNum: null,
                volume: 2,
                warnAdvanceSellStockNum: null,
                warnStockNum: 50,
                weight: 5,
              },
              {
                advanceSellStockNum: 40,
                attributeJson:
                  '[{"attributeName":"重量","attributeValue":"20斤"}]',
                attributeList: [
                  {
                    attributeName: "重量",
                    attributeValue: "20斤",
                  },
                ],
                attributeValue: "20斤",
                balancePayment: 7,
                costPrice: 10,
                earnestMoney: 8,
                id: "1869660245517828097",
                isAdvanceSell: 1,
                isDiscount: null,
                isRecommend: 0,
                isRecommendIndex: null,
                limitCount: 2147483647,
                marketPrice: 20,
                presalePrice: 15,
                productId: "1869660245152923648",
                saleNum: 0,
                salePrice: 20,
                stockNum: 324,
                virtualSaleNum: null,
                volume: 4,
                warnAdvanceSellStockNum: null,
                warnStockNum: 50,
                weight: 10,
              },
            ],
            productUnit: "盒",
            productVideo: "",
            saleNum: 0,
            salePrice: 10,
            shelfLife: 60,
            shopId: "1844397348614807552",
            sort: 999,
            specType: 1,
            startTime: "2024-12-20 00:00:00",
            status: "UP",
            stockNum: 558,
            tags: null,
            volume: 3,
            weight: 7.5,
          },
        ],
        total: "1",
      };
      setTimeout(() => {
        this.$refs.oTable.complete(res.data, Number(res.total));
      }, 1000);
      // this.$api.preSale
      //   .preSaleProducts({
      //     pageNumber: pageNo,
      //     pageSize: pageSize,
      //     ...this.formInline,
      //     advanceSellStatus: this.advanceSellStatus,
      //     merchantId: JSON.parse(sessionStorage.getItem("userInfo")).merchantId,
      //     productQuerySortParam: [],
      //   })
      //   .then((res) => {
      //     console.log(res);
      //     this.$refs.oTable.complete(
      //       res.data.data.data,
      //       Number(res.data.data.total)
      //     );
      //   })
      //   .catch((err) => {
      //     this.$refs.oTable.complete(false);
      //   });
    },
    Reset() {
      this.formInline = {
        name: "",
        marketId: this.marketId,
        shopId: this.shopId,
      };
      this.$refs.oTable.reload();
    },
    handleClick(e) {
      console.log(e.name);
      if (e.name == "5") {
        this.advanceSellStatus = "";
      } else {
        this.advanceSellStatus = e.name;
      }
      this.$refs.oTable.reload();
    },
  },
  computed: {
    tableCols() {
      return [
        // { type: "checkbox", width: "60px", fixed: "left" },
        {
          type: "seq",
          fixed: "left",
          width: "60px",
          align: "center",
          title: "序号",
        },
        {
          title: "订单号",
          align: "center",
          field: "id",
        },
        {
          title: "订单商品",
          field: "productPhotoList",
          align: "center",
          width: "80px",
          type: "jsx",
          render: ({ row }) => {
            if (row.productPhotoList.length > 0) {
              return (
                <el-image
                  preview-src-list={row.productPhotoList.map((item) => {
                    return item.url;
                  })}
                  src={row.productPhotoList[0].url}
                ></el-image>
              );
            } else {
              return <span>暂无商品图</span>;
            }
          },
        },
        {
          title: "商品名称",
          align: "center",
          field: "name",
        },
        {
          title: "规格/数量",
          align: "center",
          field: "name",
        },
        {
          title: "定金支付时间",
          align: "center",
          field: "startTime",
          type: "jsx",
          render: ({ row }) => {
            return (
              <span>
                {row.startTime}至{row.endTime}
              </span>
            );
          },
        },
        {
          title: "尾款支付时间",
          align: "center",
          field: "minSalePrice",
          type: "jsx",
          render: ({ row }) => {
            return (
              <span>
                {row.balancePaymentStartTime}至{row.balancePaymentEndTime}
              </span>
            );
          },
        },
        {
          title: "状态",
          align: "center",
          field: "status",
          type: "jsx",
          render: ({ row }) => {
            if (row.advanceSellStatus == "0") {
              return <span>未开始</span>;
            } else if (row.advanceSellStatus == "1") {
              return <span>进行中</span>;
            } else if (row.advanceSellStatus == "2") {
              return <span>已结束</span>;
            } else if (row.advanceSellStatus == "3") {
              return <span>已关闭</span>;
            }
          },
        },
        {
          title: "操作",
          fixed: "right",
          type: "jsx",
          align: "center",
          width: "100px",
          render: ({ row }) => {
            let details = () => {
              this.$refs.viewDetails.toggle(row).update();
            };
            return (
              <div>
                <el-button size="mini" type="primary" onClick={details}>
                  查看
                </el-button>
              </div>
            );
          },
        },
      ];
    },
    tableEvent() {
      return {
        "checkbox-all": ({ records, reserves }) => {
          this.selectList = [...records, ...reserves];
        },
        "checkbox-change": ({ records, reserves }) => {
          this.selectList = [...records, ...reserves];
        },
      };
    },
    ...mapState("userData", [
      "isMerchant",
      "marketList",
      "storeList",
      "marketId",
      "shopId",
    ]),
  },
};
</script>

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