<template>
  <div>
    <div v-if="isShopId" 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-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="商品名称或id"
              ></el-input>
            </el-form-item>
            <el-form-item label="下单时间">
              <el-date-picker
                v-model="value1"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </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>
      <!-- 添加或编辑 -->
      <!-- <add-or-update
        :marketId="formInline.marketId"
        :shopId="formInline.shopId"
        @queryList="$refs.oTable.reload()"
        ref="addOrUpdate"
      ></add-or-update> -->
    </div>
    <div style="height: calc(100vh - 200px)" v-else>
      <el-empty :image-size="200" description="您不是摊主哦"></el-empty>
    </div>
  </div>
</template>

<script>
// import AddDiscount from "./popup/add-discount.vue";
// import AddPrice from "./popup/add-price.vue";
// import AddOrUpdate from "./popup/add-or-update.vue";
// import earlyWarning from "./popup/early-warning.vue";
export default {
  // components: { earlyWarning, AddOrUpdate },
  data() {
    return {
      activeName: "5",
      value1: "1",
      advanceSellStatus: "",
      dataList: [],
      formInline: {
        name: "",
        marketId: "",
        shopId: "",
      },
      marketList: [],
      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: "3",
        },
        {
          label: "已完成",
          value: "3",
        },
      ],
      productFilterType: "SALE",
      selectList: [],
      isShopId: "",
      storeList: [],
    };
  },
  created() {
    if (JSON.parse(sessionStorage.getItem("userInfo")).markets?.length > 0) {
      this.isShopId = true;
      this.formInline.marketId = JSON.parse(
        sessionStorage.getItem("userInfo")
      ).markets[0].marketId;
      this.marketList = JSON.parse(sessionStorage.getItem("userInfo")).markets;
      console.log(this.marketList);
      this.getData();
    } else if (JSON.parse(sessionStorage.getItem("userInfo")).shopId) {
      (this.formInline.shopId = JSON.parse(
        sessionStorage.getItem("userInfo")
      ).shopId),
        (this.isShopId = true);
      this.$nextTick(() => {
        this.$refs.oTable.reload();
      });
    } else {
      this.isShopId = false;
    }
  },
  methods: {
    getData() {
      this.$api.mer_admin
        .storeList({ marketId: this.formInline.marketId })
        .then((res) => {
          this.storeList = res.data.data;
          this.formInline.shopId = res.data.data[0].shopId;
          this.$nextTick(() => {
            this.$refs.oTable.reload();
          });
        });
    },
    addProduct() {
      this.$refs.addOrUpdate.toggle().add();
    },
    deleteProduct() {
      console.log(this.selectList);
      let integers = this.selectList.map((item) => {
        return item.id;
      });
      this.$confirm("此操作将删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("111");
          this.$api.mer_admin.BatchDeleteProducts(integers).then((res) => {
            this.$refs.oTable.reload();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    queryList(pageNo, pageSize) {
      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: JSON.parse(sessionStorage.getItem("userInfo")).markets[0]
          .marketId,
      };
      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();
    },
    addEarlyWarning() {
      this.$refs.earlyWarning.toggle().add();
    },
  },
  computed: {
    tableCols() {
      return [
        { type: "checkbox", width: "60px", fixed: "left" },
        // { type: "seq", 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: "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: "presalePrice",
          type: "jsx",
          render: ({ row }) => {
            if (
              Math.min.apply(
                Math,
                row.productSpecificationList.map((item) => item.presalePrice)
              ) ==
              Math.max.apply(
                Math,
                row.productSpecificationList.map((item) => item.presalePrice)
              )
            ) {
              return (
                <span>
                  {Math.min.apply(
                    Math,
                    row.productSpecificationList.map(
                      (item) => item.presalePrice
                    )
                  )}
                </span>
              );
            } else {
              return (
                <span>
                  {Math.min.apply(
                    Math,
                    row.productSpecificationList.map(
                      (item) => item.presalePrice
                    )
                  )}
                  至
                  {Math.max.apply(
                    Math,
                    row.productSpecificationList.map(
                      (item) => item.presalePrice
                    )
                  )}
                </span>
              );
            }
          },
        },
        {
          title: "操作",
          fixed: "right",
          type: "jsx",
          align: "center",
          width: "100px",
          render: ({ row }) => {
            let changeInventory = () => {
              this.$refs.addStock.toggle(row).update();
            };
            return (
              <div>
                <el-button size="mini" type="primary" onClick={changeInventory}>
                  查看
                </el-button>
              </div>
            );
          },
        },
      ];
    },
    tableEvent() {
      return {
        "checkbox-all": ({ records, reserves }) => {
          this.selectList = [...records, ...reserves];
        },
        "checkbox-change": ({ records, reserves }) => {
          this.selectList = [...records, ...reserves];
        },
      };
    },
  },
};
</script>

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