<template>
  <div class="main-contain" v-loading="loading_activities">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
      <el-button
        :disabled="$store.getters.xt_user.subscibe.state==3?true:false"
        @click="$router.push({path:'/activity/publish'})"
        class="filter-item"
        style="float:right;"
        type="primary"
        icon="el-icon-circle-plus-outline"
        size="small"
      >创建活动</el-button>
    </div>
    <div class="app-container">
      <div class="cell clearfix">
        <el-input v-model="keyword" placeholder="请输入您要搜索的活动" class="keyword_input"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getActivities()">搜索</el-button>
      </div>
      <div class="cell clearfix">
        <label class="title">
          <span class="name">状态</span> :
        </label>
        <div class="time">
          <ul>
            <li :class="{ active: selecting_status == 0 }" @click="changeSelectingStatus(0)">全部</li>
            <li :class="{ active: selecting_status == 1 }" @click="changeSelectingStatus(1)">已发布</li>
            <li :class="{ active: selecting_status == 2 }" @click="changeSelectingStatus(2)">待发布</li>
            <li :class="{ active: selecting_status == 3 }" @click="changeSelectingStatus(3)">未通过</li>
            <li :class="{ active: selecting_status == 4 }" @click="changeSelectingStatus(4)">已结束</li>
          </ul>
        </div>
      </div>
      <div>
        <template v-for="(activity, index) in activities">
          <published-cell v-if="activity.status == 1 || activity.status == 4" :key="index" :activity="activity"></published-cell>
          <unapproved-cell v-else-if="activity.status == 3" :key="index" :activity="activity"></unapproved-cell>
          <drafts-cell v-else-if="activity.status == 2" :key="index" :activity="activity"></drafts-cell>
        </template>
      </div>
      <div class="cell clearfix" style="padding-top: 15px;">
          <el-pagination :total="activity_total" :current-page.sync="current_page" :page-size="10" layout="total, prev, pager, next" @current-change="getActivities()"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import BreadCrumb from "@/scrm_pages/components/bread-crumb";
import PublishedCell from "@/scrm_pages/marketing_tool/components/published_cell"
import UnapprovedCell from "@/scrm_pages/marketing_tool/components/unapproved_cell"
import DraftsCell from "@/scrm_pages/marketing_tool/components/drafts_cell"
import { fetchActivities } from "@/api/activity/activity"

export default {
  name: "ActivityList",
  components: {
    BreadCrumb,
    PublishedCell,
    UnapprovedCell,
    DraftsCell,
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "营销工具" },
        { path: false, name: "活动列表" }
      ],
      keyword: "",
      selecting_status: 0,
      activity_total: 0,
      current_page: 1,

      loading_activities: false,
      activities: [],
    };
  },
  mounted() {
      this.getActivities()
  },
  methods: {
    changeSelectingStatus(status) {
      this.selecting_status = status
      this.getActivities()
    },

    getActivities() {
      this.loading_activities = true
      fetchActivities(this.current_page, this.keyword, this.selecting_status).then(rs => {
        this.loading_activities = false
        var resp = rs.data
        if (resp.state == 1) {
          this.activities = resp.data.activities
          this.activity_total = resp.data.total
          console.log(this.activities)

        } else {
          this.$message.error(resp.msg)
        }
      }).catch(err => {
        this.loading_activities = false
        this.$message.error(err)
      })
    },
  },
};
</script>

<style scoped>
.keyword_input {
  width: 330px;
}
</style>


