<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 slot-scope="scope">
					<span>{{scope.row.id}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" width="500px" label="标题">
				<template slot-scope="scope">
					<span>{{scope.row.title}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" width="400" label="开始-结束时间">
				<template slot-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 slot-scope="scope">
					<span>{{getStatusName(scope.row.status)}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" fixed="right">
				<template slot-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"
						@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"
						@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, remove } 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(row) {
			this.$confirm('此操作将删除该峰会, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				remove(row.id).then(data => {
					if (data.status == 200) {
						this.getList()
						this.$message({
							type: 'success',
							message: '删除成功!'
						})
					} else {
						this.$message({
							type: 'error',
							message: data.message
						})
					}
				})
			})
		},
		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>
