<template>
  <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-form-item label="优惠卷名称">
            <el-input
              v-model="formInline.name"
              placeholder="优惠卷名称搜索"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              v-model="formInline.queryStatus"
              placeholder="请选择状态"
            >
              <el-option
                v-for="item in [
                  { label: '已失效', value: '0' },
                  {
                    label: '生效中',
                    value: '1',
                  },
                  {
                    label: '待生效',
                    value: '2',
                  },
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="storeList.length > 1" 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-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>
        <div class="mb-2">
          <el-popover placement="bottom" trigger="click">
            <el-button
              type="warning"
              size="mini"
              v-for="item in [
                { label: '无门槛商品优惠卷', value: '1' },
                { label: '满减卷', value: '2' },
                { label: '新粉优惠卷', value: '3' },
              ]"
              :key="item.value"
              @click="addProduct({ label: item.label })"
              >{{ item.label }}
            </el-button>
            <el-button
              size="small"
              slot="reference"
              type="primary"
              class="link-left"
              icon="el-icon-plus"
              >添加优惠卷</el-button
            >
          </el-popover>
          <el-button
            style="margin-left: 20px"
            :disabled="selectList.length <= 0"
            type="danger"
            size="small"
            @click="deleteProduct"
            >批量删除</el-button
          >
        </div>
      </template>
    </obj-table-plus>
    <!-- 添加或编辑 -->
    <add-or-update
      @queryList="$refs.oTable.reload()"
      ref="addOrUpdate"
    ></add-or-update>
    <!-- 满减卷 -->
    <fullReductio
      @queryList="$refs.oTable.reload()"
      ref="fullReductio"
    ></fullReductio>
    <!-- 新粉优惠卷 -->
    <newPowder @queryList="$refs.oTable.reload()" ref="newPowder"></newPowder>
    <!-- 查看详情 -->
    <viewDetails ref="viewDetails"></viewDetails>
  </div>
</template>

<script>
import { mapState } from "vuex";
import fullReductio from "./popup/full-reduction.vue";
import AddOrUpdate from "./popup/add-or-update.vue";
import newPowder from "./popup/new-powder.vue";
import viewDetails from "./popup/view-details.vue";
export default {
  components: { AddOrUpdate, fullReductio, newPowder, viewDetails },
  data() {
    return {
      dataList: [],
      formInline: {
        marketId: "",
        shopId: "",
        queryStatus: "q",
        name: "",
      },
      tableProp: {
        "auto-resize": true,
        border: true,
        height: "auto",
        "row-id": "id",
        "show-overflow": false,
      },
      productFilterType: "SALE",
      selectList: [],
    };
  },
  created() {
    this.formInline = {
      name: "",
      queryStatus: "1",
      marketId: this.marketId,
      shopId: this.shopId,
    };
    this.$nextTick(() => {
      this.$refs.oTable.reload();
    });
  },
  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(row) {
      console.log(row);
      if (row.label == "无门槛商品优惠卷") {
        this.$refs.addOrUpdate.toggle().add({
          ...row,
          marketId: this.formInline.marketId,
          shopId: this.formInline.shopId,
        });
      } else if (row.label == "满减卷") {
        this.$refs.fullReductio.toggle().add({
          ...row,
          marketId: this.formInline.marketId,
          shopId: this.formInline.shopId,
        });
      } else if (row.label == "新粉优惠卷") {
        this.$refs.newPowder.toggle().add({
          ...row,
          marketId: this.formInline.marketId,
          shopId: this.formInline.shopId,
        });
      }
    },
    Reset() {
      this.formInline = {
        name: "",
        queryStatus: "1",
        marketId: this.marketId,
        shopId: this.shopId,
      };
      this.$refs.oTable.reload();
    },
    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.coupon.deleteCoupon(integers).then((res) => {
            this.$refs.oTable.reload();
            this.selectList = [];
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    queryList(pageNo, pageSize) {
      this.$api.coupon
        .couponList({
          pageNumber: pageNo,
          pageSize: pageSize,
          ...this.formInline,
        })
        .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);
        });
    },
  },
  computed: {
    tableCols() {
      return [
        { type: "checkbox", width: "60px", fixed: "left" },
        // { type: "seq", width: "60px", align: "center", title: "序号" },
        {
          title: "优惠券名称",
          align: "center",
          field: "name",
        },
        // {
        //   title: "发行方",
        //   align: "center",
        //   field: "publisher",
        //   type: "jsx",
        //   render: ({ row }) => {
        //     if (row.publisher === "MERCHANT") {
        //       return <span>店铺</span>;
        //     } else if (row.publisher == "PLATFORM") {
        //       return <span>平台</span>;
        //     }
        //   },
        // },
        {
          title: "类别",
          align: "center",
          field: "category",
          type: "jsx",
          render: ({ row }) => {
            if (row.category == "NO_THRESHOLD") {
              return <span>无门槛优惠券</span>;
            } else if (row.category == "MAX_OUT") {
              return <span>满减优惠券</span>;
            } else if (row.category == "FIRST_ATTENTION") {
              return <span>首次关注优惠券</span>;
            } else if (row.category == "BIRTHDAY") {
              return <span>生日券</span>;
            } else if (row.category == "PLATFORM") {
              return <span>平台优惠券</span>;
            }
          },
        },
        {
          title: "优惠券类型",
          align: "center",
          field: "couponType",
          type: "jsx",
          render: ({ row }) => {
            if (row.couponType == "MONEY") {
              return <span>满减券</span>;
            } else if (row.couponType == "DISCOUNT") {
              return <span>折扣券</span>;
            }
          },
        },
        {
          title: "优惠金额",
          align: "center",
          field: "money",
        },
        // {
        //   title: "折扣",
        //   align: "center",
        //   field: "discount",
        // },
        {
          title: "最低消费",
          align: "center",
          field: "minPrice",
        },
        {
          title: "限量",
          align: "center",
          field: "limitedNum",
        },
        {
          title: "发放总数",
          align: "center",
          field: "total",
        },
        {
          title: "剩余数量",
          align: "center",
          field: "lastTotal",
        },
        {
          title: "可使用时间",
          align: "center",
          field: "useStartTime",
          type: "jsx",
          render: ({ row }) => {
            return (
              <span>
                {row.useStartTime}至{row.useEndTime}
              </span>
            );
          },
        },
        {
          title: "状态",
          align: "center",
          field: "status",
          type: "jsx",
          width: "120px",
          render: ({ row }) => {
            let changeState = () => {
              if (row.status == 1) {
                this.$confirm("是否要启用此优惠卷?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                })
                  .then(() => {
                    this.$api.coupon
                      .couponStatus({
                        id: row.id,
                        status: 1,
                      })
                      .then((res) => {
                        this.$refs.oTable.reload();
                      })
                      .catch((err) => {
                        this.$refs.oTable.reload();
                      });
                  })
                  .catch(() => {
                    this.$refs.oTable.reload();
                  });
              } else {
                this.$confirm("是否要关闭此优惠卷?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                })
                  .then(() => {
                    this.$api.coupon
                      .couponStatus({
                        id: row.id,
                        status: 0,
                      })
                      .then((res) => {
                        this.$refs.oTable.reload();
                      })
                      .catch((err) => {
                        this.$refs.oTable.reload();
                      });
                  })
                  .catch(() => {
                    this.$refs.oTable.reload();
                  });
              }
            };
            if (row.status == 1) {
              return (
                <el-switch
                  onchange={changeState}
                  v-model={row.status}
                  active-text="开"
                  inactive-text="关"
                  active-value={1}
                  inactive-value={0}
                ></el-switch>
              );
            }
          },
        },
        {
          title: "操作",
          fixed: "right",
          type: "jsx",
          align: "center",
          width: "140px",
          render: ({ row }) => {
            let edit = () => {
              this.$refs.viewDetails.toggle(row).update();
            };
            return (
              <div>
                <el-button size="mini" type="primary" onClick={edit}>
                  详情
                </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>