<template>
  <div class="collect-event-list-con">
    <Card>
      <div class="search-con">
        <Input
          placeholder="活动编号"
          class="search-input"
          v-model="searchContent.activityId"
          style="width: 200px"
          clearable
        />
        <Input
          placeholder="活动名称"
          class="search-input"
          v-model="searchContent.activityName"
          style="width: 200px"
          clearable
        />
        <Select
          placeholder="活动状态"
          class="search-input"
          v-model="searchContent.status"
          style="width: 200px"
        >
          <Option
            v-for="(item, index) in EventState"
            :value="item"
            :key="'state-option-' + index"
          >
            {{ EventStateObj[item].label }}
          </Option>
        </Select>
        <ButtonGroup class="search-btngroup">
          <Button @click="handleSearch" type="primary">搜索</Button>
          <Button type="primary" @click="handleRefresh">
            <Icon type="md-refresh" />
          </Button>
        </ButtonGroup>
        <Button @click="handleAdd" type="info">+ 新增活动</Button>
      </div>
      <tables
        ref="tables"
        class="order-table-con"
        pagable
        v-model="tableData"
        :columns="columns"
        :currentPage="searchContent.pageIndex"
        :pageSize="searchContent.pageSize"
        :totalSize="totalSize"
        :loading="loading"
        @on-change="handleCurrentChange"
      />
    </Card>

    <Modal v-model="showGoodsList" :title="goodsModalTitle" footer-hide width="600">
      <tables
        v-model="goodsTableData"
        :columns="goodsColumns"
        :loading="goodsTableLoading"
      />
    </Modal>
  </div>
</template>

<script>
import Tables from "_c/tables";
import { formatTime } from "@/libs/tools";
export default {
  inject: ["reload"],
  components: {
    Tables,
  },
  data() {
    const EventState = {
      ALL: 0,
      WAIT: 1,
      START: 2,
      FINSIH: 3,
      END: 4,
    };
    const EventStateObj = {
      [EventState.ALL]: { label: "全部" },
      [EventState.WAIT]: {
        label: "未开始",
        color: "default",
        btn: ["edit", "cancel"],
      },
      [EventState.START]: {
        label: "进行中",
        color: "primary",
        btn: ["record", "cancel"],
      },
      [EventState.FINSIH]: {
        label: "已完成",
        color: "success",
        btn: ["record"],
      },
      [EventState.END]: { label: "已下线", color: "default", btn: [] },
    };
    return {
      EventState,
      EventStateObj,

      searchContent: {
        activityId: "",
        activityName: "",
        status: EventState.ALL,
        pageIndex: 1,
        pageSize: 10,
      },
      columns: [
        { title: "编号", key: "activityId", minWidth: 180 },
        { title: "名称", key: "name", minWidth: 180 },
        {
          title: "条件商品",
          minWidth: 100,
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: "primary",
                  size: "small",
                },
                on: {
                  click: this.handleGoodsList(params, 1),
                },
              },
              "查看"
            );
          },
        },
        {
          title: "奖励商品",
          minWidth: 100,
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: "primary",
                  size: "small",
                },
                on: {
                  click: this.handleGoodsList(params, 2),
                },
              },
              "查看"
            );
          },
        },
        {
          title: "状态",
          key: "status",
          width: 100,
          render: (h, params) => {
            let obj = EventStateObj[params.row.status];
            return h(
              "Tag",
              {
                props: {
                  color: obj.color,
                },
              },
              obj.label
            );
          },
        },
        {
          title: "备注",
          key: "comm",
          minWidth: 150,
          render: (h, { row }) => {
            return h("span", row.comm ? row.comm : "--");
          },
        },
        {
          title: "开始时间",
          width: 140,
          render: (h, params) => {
            return h("span", formatTime(params.row.startDate, "yyyy-MM-dd"));
          },
        },
        {
          title: "结束时间",
          width: 140,
          render: (h, params) => {
            return h("span", formatTime(params.row.endDate, "yyyy-MM-dd"));
          },
        },
        {
          title: "操作",
          width: 180,
          fixed: "right",
          render: (h, params) => {
            let editBtn = h(
              "Button",
              {
                props: {
                  type: "primary",
                  size: "small",
                },
                style: {
                  "margin-right": "5px",
                },
                on: {
                  click: this.handleEdit(params),
                },
              },
              "编 辑"
            );
            let cancelBtn = h(
              "Button",
              {
                props: {
                  type: "warning",
                  size: "small",
                },
                style: {
                  "margin-right": "5px",
                },
                on: {
                  click: this.handleCancel(params),
                },
              },
              "取 消"
            );
            let recordBtn = h(
              "Button",
              {
                props: {
                  type: "info",
                  size: "small",
                },
                style: {
                  "margin-right": "5px",
                },
                on: {
                  click: this.handleDetail(params),
                },
              },
              "记 录"
            );
            let btnMap = {
              cancel: cancelBtn,
              edit: editBtn,
              record: recordBtn,
            };
            let arr = [];
            EventStateObj[params.row.status].btn.forEach((item) => {
              arr.push(btnMap[item]);
            });
            return arr.length == 0 ? h("span", "--") : h("div", arr);
          },
        },
      ],
      tableData: [],
      totalSize: 0,
      loading: true,

      showGoodsList: false,
      goodsModalTitle: "",
      goodsTableLoading: false,
      goodsTableData: [],
      goodsColumns: [
        {
          title: "序号",
          width: 80,
          render: (h, params) => {
            return h("span", params.index+1);
          },
        },
        { title: "商品编号", key: "goodsId", minWidth: 180 },
        { title: "规格编号", key: "skuId", minWidth: 180 },
        { title: "数量", key: "num", width: 80 },
      ],
    };
  },
  methods: {
    requestData() {
      this.loading = true;
      this.searchContent.activityId = this.searchContent.activityId.trim();
      this.searchContent.activityName = this.searchContent.activityName.trim();
      this.api({
        apiName: "getCollectEventList",
        postdata: this.searchContent,
        complete: () => {
          this.loading = false;
        },
        success: (res) => {
          this.tableData = res.data.records;
          this.totalSize = res.data.total;
        },
      });
    },
    handleSearch() {
      this.searchContent.pageIndex = 1;
      this.requestData();
    },
    handleRefresh() {
      this.reload();
    },
    handleCurrentChange(pageNum) {
      this.searchContent.pageIndex = pageNum;
      this.requestData();
    },
    handleAdd() {
      this.$router.push({ name: "collect_add_event" });
    },
    handleEdit({ row, index }) {
      return () => {
        let query = { activityId: row.activityId, id: row.id };
        this.$router.push({ name: "collect_add_event", query });
      };
    },
    handleCancel({ row }) {
      return () => {
        this.$Modal.confirm({
          title: "确认",
          content: `确认要取消集齐活动 ${row.name} ？`,
          onOk: () => {
            this.api({
              apiName: "cancelCollectEvent",
              postdata: row.activityId,
              success: () => {
                row.status = this.EventState.END;
              },
            });
          },
        });
      };
    },
    handleDetail({ row, index }) {
      return () => {
        let query = { activityId: row.activityId };
        this.$router.push({ name: "collect_record_list", query });
      };
    },
    handleGoodsList({ row, index }, type) {
      return () => {
        this.goodsModalTitle =
          type == 1 ? `${row.name}-条件商品列表` : `${row.name}-奖励商品列表`;
        this.goodsTableData = []
        this.showGoodsList = true;
        this.goodsTableLoading = true;
        this.api({
          apiName: "getCollectEventGoodsList",
          postdata: {
            type,
            activityId: row.activityId,
          },
          success: (res) => {
            this.goodsTableData = res.data;
          },
          complete: () => {
            this.goodsTableLoading = false;
          },
        });
      };
    },
  },
  created() {
    this.requestData();
  },
};
</script>

<style lang="less">
.collect-event-list-con .search-con {
  padding: 10px 0;
  .search {
    &-col {
      display: inline-block;
      width: 150px;
      margin-right: 5px;
    }
    &-input {
      display: inline-block;
      width: 150px;
      margin-right: 5px;
    }
    &-date {
      margin-right: 5px;
    }
    &-btngroup {
      margin-right: 5px;
    }
  }
}
.collect-event-list-con .order-table-con {
  .ivu-table-expanded-cell {
    padding: 0 40px 10px 40px;
  }
}
.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .ivu-modal {
    top: 0;
  }
}
</style>
