<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-form ref="queryForm" :inline="inline" :model="query" label-width="100px">
        <el-row>
          <el-form-item label="峰会名称">
            <el-input v-model="query.title" placeholder="请输入峰会名称"></el-input>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="query.startTime"
              type="datetime"
              format="yyyy-MM-dd HH"
              placeholder="报名截止时间"
              @change="changeTime"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="用户来源">
            <el-select class="filter-item" v-model="query.status" placeholder="状态">
              <el-option
                v-for="(val,index) in status"
                :key="index"
                :label="val.name"
                :value="val.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" type="primary" v-waves icon="search" @click="createSummit">创建峰会</el-button>
    </div>
    <el-table
      :key="tableKey"
      :data="list"
      v-loading="listLoading"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" width="150px" label="id">
        <template scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="500px" label="标题">
        <template scope="scope">
          <span>{{scope.row.title}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="400" label="开始-结束时间">
        <template scope="scope">
          <span>{{timestamp2Date(scope.row.startTime)}}</span>
          <span>-</span>
          <span>{{timestamp2Date(scope.row.endTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="当前状态">
        <template scope="scope">
          <span>{{getStatusName(scope.row.status)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" fixed="right">
        <template scope="scope">
          <el-button
            size="small"
            class="el-button el-button--text el-button--small"
            v-if="scope.row.isPublish===1"
            @click="viewDetails({id:scope.row.id,isPublish:0})"
          >取消发布</el-button>
          <el-button
            size="small"
            class="el-button el-button--text el-button--small"
            v-if="scope.row.isPublish===0"
            @click="viewDetails({id:scope.row.id,isPublish:1})"
          >发布</el-button>
          <el-button
            size="small"
            class="el-button el-button--text el-button--small"
            v-if
            @click="enrollData(scope.row)"
          >报名信息</el-button>
           <el-button
            size="small"
            class="el-button el-button--text el-button--small"
            @click="applyPage(scope.row)"
          >报名页面</el-button>
          <el-button
            class="el-button el-button--text el-button--small"
            size="small"
            @click="edit(scope.row)"
          >编辑</el-button>
          <el-button
            size="small"
            class="el-button el-button--text el-button--small"
            v-if
            @click="review(scope.row)"
          >回顾页面</el-button>
          <el-button
            class="el-button el-button--text el-button--small"
            style="color:red"
            size="small"
            v-if="scope.row.isPublish==0"
            @click="deleteSummit(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="query.page"
        :page-sizes="[10,20,30, 50]"
        :page-size="query.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <summitPopup
      v-if="popupShow"
      :popupRow="popupRow"
      :titleNme="titleNme"
      v-on:summitDialogEvent="summitDialogEvent"
    />
    <enrollDataPopup
      v-if="enrollShow"
      :enrollRow="enrollRow"
      v-on:enrollDialogEvent="enrollDialogEvent"
    />
    <reviewPopup
      v-if="reviewShow"
      :reviewRow="reviewRow"
      v-on:reviewDialogEvent="reviewDialogEvent"
    />

    <applyPage :applyInfo='applyInfo'></applyPage>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { timestamp2Date } from "src/utils/dateUtils";
import { page, update } from "src/api/summit/activity";
import summitPopup from "src/views/summit/model/summitPopup";
import enrollDataPopup from "src/views/summit/model/enrollDataPopup";
import reviewPopup from "src/views/summit/model/reviewPopup";
import applyPage from "src/views/summit/model/applyPage";

import { getToken } from "src/utils/auth";

export default {
  name: "summitList",
  components: {
    summitPopup,
    enrollDataPopup,
    reviewPopup,
    applyPage
  },
  data() {
    return {
      applyInfo:{
        dialogVisible:false,
      },
      query: {
        page: 1,
        limit: 10,
        title: "",
        startTime: "",
        status: undefined,
        type: 1
      },
      tableKey: 0,
      list: [],
      listLoading: true,
      status: [
        { id: 0, name: "默认" },
        { id: 1, name: "报名中" },
        { id: 2, name: "进行中" },
        { id: 3, name: "已结束" }
      ],
      total: 0,
      inline: true,
      popupShow: false,
      titleNme: "创建峰会",
      popupRow: undefined,
      enrollRow: undefined,
      enrollShow: false,
      reviewRow: undefined,
      reviewShow: false,

      statusNameList: {
        1: "默认",
        2: "报名中",
        3: "进行中",
        4: "已结束"
      }
    };
  },
  created() {
    this.getList();
  },
  computed: {
    ...mapGetters(["elements"]),

    getHeaderWithToken() {
      return { Authorization: getToken() };
    }
  },
  methods: {
    //报名页面
    applyPage(){
      this.applyInfo.dialogVisible = true;
    },
    getList() {
      this.listLoading = true;
      page(this.query).then(res => {
        this.list = res.data.list;
        this.total = res.data.total;
      });
      setTimeout(() => {
        this.listLoading = false;
      }, 500);
    },
    changeTime(val) {
      !!val
        ? (this.query.startTime = Date.now(val))
        : this.query.startTime == "";
    },
    handleFilter() {
      this.getList();
    },
    viewDetails(row) {
      update(row).then(res => {
        if (res.rel) {
          this.$notify.success({
            title: "编辑成功",
            message: `success`
          });
          this.getList();
        } else {
          this.$notify.warning({
            title: "编辑失败",
            message: `failed`
          });
        }
      });
    },
    handleSizeChange(val) {
      this.query.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getList();
    },
    timestamp2Date(timeStamp) {
      return timestamp2Date(timeStamp);
    },
    enrollData(row) {
      this.enrollRow = row;
      this.enrollShow = true;
    },
    edit(row) {
      // debugger;
      this.popupRow = row;
      this.titleNme = "编辑峰会";
      this.popupShow = true;
    },
    createSummit() {
      this.popupRow = {};
      this.titleNme = "创建峰会";
      this.popupShow = true;
    },
    review(row) {
      this.reviewRow = row;
      this.reviewShow = true;
    },
    deleteSummit() {},
    getStatusName(status) {
      return status + 1 ? this.statusNameList[status + 1] : "";
    },
    summitDialogEvent(e) {
      this.popupShow = false;
      if (e) {
        this.getList();
      }
    },
    enrollDialogEvent(e) {
      this.enrollShow = false;
    },
    reviewDialogEvent(e) {
      this.reviewShow = false;
    }
  }
};
</script>
