<template>
  <div class="purchase-gift-event-list-con">
    <Card>
      <div class="search-con">
        <Input
          placeholder="活动编号"
          class="search-input"
          v-model="searchContent.aerialDeliveryId"
          style="width: 200px"
          clearable
        />
        <Input
          placeholder="活动名称"
          class="search-input"
          v-model="searchContent.name"
          style="width: 200px"
          clearable
        />
        <Select
          placeholder="活动状态"
          class="search-input"
          v-model="searchContent.status"
          style="width: 200px"
        >
          <!-- <Option value="">全部</Option> -->
          <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.pageNum"
        :pageSize="searchContent.pageSize"
        :totalSize="totalSize"
        :loading="loading"
        @on-change="handleCurrentChange"
      />
    </Card>
  </div>
</template>

<script>
import Tables from "_c/tables";
import { formatTime } from "@/libs/tools";
export default {
  inject: ["reload"],
  components: {
    Tables,
  },
  computed: {
    isBrand() {
      return this.$store.getters.isBrand;
    },
  },
  data() {
    const EventState = {
      SUCCESS: 1,
      PROCESSING: 2,
      FAIL: 3,
      PARTIALSUCCESS: 4,
    };
    const EventStateObj = {
      [EventState.SUCCESS]: { 
        label: "成功" ,
        color: "default",
        btn: ["recordBtn"]
      },
      [EventState.PROCESSING]: {
        label: "处理中",
        color: "default",
        btn: ["recordBtn"],
      },
      [EventState.FAIL]: {
        label: "失败",
        color: "primary",
        btn: ["recordBtn", "reissueBtn"],
      },
      [EventState.PARTIALSUCCESS]: {
        label: "部分成功",
        color: "success",
        btn: ["recordBtn", "reissueBtn"],
      },
    };
    return {
      EventState,
      EventStateObj,

      searchContent: {
        aerialDeliveryId: "",
        name: "",
        status: EventState.ALL,
        pageNum: 1,
        pageSize: 10,
      },
      columns: [
        { title: "编号", key: "aerialDeliveryId", minWidth: 180 },
        { title: "名称", key: "name", minWidth: 180 },
        { title: "商品", key: "goodsId", minWidth: 180 },
        { title: "数量", key: "number", minWidth: 100 },
        {
          title: "导入文件",
          minWidth: 200,
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: "text",
                  size: "small",
                },
                style: {
                  "margin-right": "5px",
                },
                on: {
                  click: this.downLoadExcel(params),
                },
              },
              "<excel>文件，点击下载"
            );
          }
        },
        { title: "总数", key: "circulation", minWidth: 100 },
        { title: "成功数量", key: "succeedTotal", minWidth: 100 },
        {
          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: "remark",
          minWidth: 150,
          render: (h, { row }) => {
            return h("span", row.remark ? row.remark : "--");
          },
        },
        {
          title: "开始时间",
          width: 180,
          render: (h, params) => {
            return h("span", formatTime(params.row.createTime, "yyyy-MM-dd hh:mm:ss"));
          },
        },
        {
          title: "操作",
          width: 180,
          fixed: "right",
          render: (h, params) => {
            let recordBtn = h(
              "Button",
              {
                props: {
                  type: "info",
                  size: "small",
                },
                style: {
                  "margin-right": "5px",
                },
                on: {
                  click: this.handleDetail(params),
                },
              },
              "记 录"
            );
            let reissueBtn = h(
              "Button",
              {
                props: {
                  type: "primary",
                  size: "small",
                },
                style: {
                  "margin-right": "5px",
                },
                on: {
                  click: this.handleReissue(params),
                },
              },
              "补 发"
            );
            let btnMap = {
              recordBtn: recordBtn,
              reissueBtn: reissueBtn,
            };
            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,
    };
  },
  methods: {
    requestData() {
      this.loading = true;
      this.searchContent.aerialDeliveryId = this.searchContent.aerialDeliveryId.trim();
      this.searchContent.name = this.searchContent.name.trim();
      this.api({
        apiName: "getAerialDeliveryList",
        postdata: this.searchContent,
        complete: () => {
          this.loading = false;
        },
        success: (res) => {
          this.tableData = res.data.records;
          this.totalSize = res.data.total;
        },
      });
    },
    handleSearch() {
      this.searchContent.pageNum = 1;
      this.requestData();
    },
    handleRefresh() {
      this.reload();
    },
    handleCurrentChange(pageNum) {
      this.searchContent.pageNum = pageNum;
      this.requestData();
    },
    handleAdd() {
      this.$router.push({ name: "airdrop_add_airdrop" });
    },
    handleReissue({ row, index }) {
      return () => {
        let query = { aerialDeliveryId: row.aerialDeliveryId, id: row.id };
        this.$router.push({ name: "airdrop_add_airdrop", query });
        // this.api({
        //     apiName:'AerialDeliveryReissue',
        //     postdata: this.form,
        //     success: () => {
        //       this.handleCancel();
        //       this.$Notice.success({ '补发成功~' });
        //     },
        //     complete: () => {
        //       this.submitLoading = false;
        //     },
        //   });
      };
    },
    handleDetail({ row, index }) {
      return () => {
        let query = { aerialDeliveryId: row.aerialDeliveryId };
        this.$router.push({ name: "airdrop_activity_record_list", query });
      };
    },
    downLoadExcel({row}){
      return ()=>{
        window.open(row.excelUrl,'_blank')
      }
    },
  },
  created() {
    this.requestData();
  },
};
</script>

<style lang="less">
.purchase-gift-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;
    }
  }
}
.purchase-gift-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>
