<template>
  <div>
    <p class="text-2xl font-bold mb-5">活动管理</p>
    <!-- 搜索框 -->
    <a-input
      placeholder="活动名称模糊搜索"
      v-model="searchPageReqParams.name"
      style="width: 150px; margin-right: 10px"
    />
    <!-- timepicker -->
    <span class="font-semibold">发布时间：</span>
    <timerange
      class="mr-3"
      :startTime="searchPageReqParams.startTime"
      :endTime="searchPageReqParams.endTime"
      @getNewTime="getNewTime"
    />
    <!-- 操作 -->
    <a-button type="primary" style="margin-right: 10px" @click="query"
      >查询</a-button
    >
    <a-button type="primary" style="margin-right: 10px" @click="reset"
      >重置</a-button
    >
    <a-button type="primary" @click="release">发布</a-button>
    <!-- 资讯列表 -->
    <a-table
      :columns="columns"
      :data-source="list"
      style="text-align: center; margin-top: 40px"
      bordered
      :loading="tableLoading"
      :pagination="false"
    >
      <template #created_at="text">
        {{ text | formatDate }}
      </template>
      <template #activity_status="text">
        {{ text | filterActivitytatus }}
      </template>
      <!-- 新闻内容 -->
      <span slot="content" slot-scope="text, record">
        <a @click="toDetail(record)">查看</a>
      </span>
      <!-- 操作 -->
      <span slot="action" slot-scope="text, record">
        <span v-if="record.activity_status == activityStatus.editable">
          <a @click="add(record)"> 上架 </a>
          <a-divider type="vertical" />
          <a @click="edit(record)"> 编辑 </a>
          <a-divider type="vertical" />
          <a @click="onDelete(record)"> 删除 </a>
        </span>
        <a v-else @click="remove(record)"> 下架 </a>
      </span>
    </a-table>
    <a-pagination
      class="text-right mt-4"
      :current="current"
      :total="total"
      :pageSize="PAGE_SIZE"
      @change="handlePaginationChange"
    ></a-pagination>
    <!-- 操作Modal -->
    <a-modal
      :title="title"
      v-model="show"
      :centered="true"
      :closable="false"
      @ok="handleOk"
      :confirmLoading="modalLoading"
      @cancle="show = false"
    >
      <p class="text-center">{{ text }}</p>
    </a-modal>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { columns } from "@/const/columns/activityColumn";
import { modal } from "./const";
import timerange from "@/components/TimePicker/index.vue";
import ActivityService from "@/service/ActivityService/index";
import { eActivityItem, activityStatus } from "@/service/ActivityService/type";
import { PAGE_SIZE } from "@/const/config/page";

export default Vue.extend({
  components: { timerange },
  computed: {
    columns() {
      return columns;
    },
    current(): number {
      return this.searchPageReqParams.offset / PAGE_SIZE + 1;
    },
  },
  data() {
    return {
      searchPageReqParams: {
        name: "",
        startTime: undefined as undefined | number,
        endTime: undefined as undefined | number,
        offset: 0,
      },
      show: false,
      title: "",
      type: modal.on,
      text: "",
      activityStatus,
      uuid: "",
      modalLoading: false,
      list: [] as eActivityItem[],
      total: 0,
      tableLoading: false,
      PAGE_SIZE,
    };
  },
  mounted() {
    this.fetchList();
  },
  methods: {
    handlePaginationChange(current: number) {
      this.searchPageReqParams.offset = (current - 1) * PAGE_SIZE;
      console.log(current, this.searchPageReqParams.offset);
      this.fetchList();
    },
    fetchList() {
      this.tableLoading = true;
      ActivityService.getInstance()
        .queryActivityList({
          activity_status: activityStatus.all,
          title: this.searchPageReqParams.name,
          end_time: this.searchPageReqParams.endTime,
          limit: PAGE_SIZE,
          offset: this.searchPageReqParams.offset,
          start_time: this.searchPageReqParams.startTime,
        })
        .then((ret) => {
          if (ret.code === 200) {
            this.list = ret.data.items;
            this.total = ret.data.total;
            this.tableLoading = false;
          }
        });
    },
    query() {
      this.searchPageReqParams.offset = 0;
      this.fetchList();
    },
    getNewTime(startTime: number, endTime: number) {
      this.searchPageReqParams.startTime = startTime;
      this.searchPageReqParams.endTime = endTime;
    },
    reset() {
      this.searchPageReqParams.name = "";
      this.searchPageReqParams.startTime = undefined;
      this.searchPageReqParams.endTime = undefined;
    },
    release() {
      this.$router.push({ name: "publishActivity" });
    },
    edit(record: any) {
      this.$router.push({
        name: "editActivity",
        query: { record: JSON.stringify(record) },
      });
    },
    add(record: any) {
      this.uuid = record.uuid;
      this.type = modal.on;
      this.show = true;
      this.title = "上架活动";
      this.text = "确定上架该活动吗？";
    },
    remove(record: any) {
      this.uuid = record.uuid;
      this.type = modal.off;
      this.show = true;
      this.title = "下架活动";
      this.text = "确定下架该活动吗？";
    },
    onDelete(record: any) {
      this.uuid = record.uuid;
      this.type = modal.delete;
      this.show = true;
      this.title = "删除活动";
      this.text = "确定删除该活动吗？";
    },
    async handleOk(record: any) {
      this.modalLoading = true;
      try {
        if (this.type == modal.on) {
          await ActivityService.getInstance().modifyActivityStatus({
            uuid: this.uuid,
            activity_status: activityStatus.published,
          });
        } else if (this.type == modal.off) {
          await ActivityService.getInstance().modifyActivityStatus({
            uuid: this.uuid,
            activity_status: activityStatus.editable,
          });
        } else if (this.type == modal.delete) {
          await ActivityService.getInstance().deleteActivity(this.uuid);
        }
        this.fetchList();
        this.show = false;
      } catch (err) {}
      this.modalLoading = false;
    },
    toDetail(record: any) {
      this.$router.push({ name: "activityDetail", query: { record: JSON.stringify(record) } });
    },
  },
});
</script>
