<template>
	<div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
		<div>
			<div class="filter-container" ref="filter-container">
				<el-form ref="queryForm" :inline="inline" :model="listQuery" label-width="100px">
					<el-row>
						<el-form-item label="手机号">
							<el-input v-model.number="listQuery.phone" placeholder="请输入手机号"></el-input>
						</el-form-item>
						<el-form-item label="优惠券">
							<el-select class="filter-item" v-model="listQuery.couponId" placeholder="请选择优惠券标题">
								<el-option key label value></el-option>
								<el-option
									v-for="(item,index) in titleList"
									:key="index"
									:label="item.title"
									:value="item.id"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="金额">
							<el-input v-model.number="listQuery.usedAmount" placeholder="请输入金额"></el-input>
						</el-form-item>
						<el-form-item label="状态">
							<el-select class="filter-item" v-model="listQuery.status" placeholder="请输入状态">
								<el-option
									v-for="(item,index) in typeOptions"
									:key="index"
									:label="item.name"
									:value="item.val"
								></el-option>
							</el-select>
						</el-form-item>
						<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
						<el-button class="filter-item" type="primary" @click="giveCunpon" style="float: right;">+ 发券</el-button>
						<!-- <el-button class="filter-item" type="primary" style="float: right;">+ 批量发券</el-button> -->
					</el-row>
				</el-form>
			</div>
			<el-table :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
				<el-table-column type="index" align="center" label="ID" width="200">
					<template scope="scope">
						<span>{{scope.row.id}}</span>
					</template>
				</el-table-column>

				<el-table-column align="center" label="手机号">
					<template scope="scope">
						<span>{{scope.row.phone}}</span>
					</template>
				</el-table-column>

				<el-table-column align="center" label="优惠券标题">
					<template scope="scope">
						<span>{{scope.row.title}}</span>
					</template>
				</el-table-column>

				<el-table-column align="center" label="金额">
					<template scope="scope">
						<span>{{scope.row.usedAmount}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="领取时间">
					<template scope="scope">
						<span>{{scope.row.crtTimeStr}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="过期时间">
					<template scope="scope">
						<span>{{scope.row.validType == 3 ? '永久' : scope.row.expireTimeStr}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="状态">
					<template scope="scope">
						<span v-if="scope.row.isUse==1">已使用</span>
						<span v-if="scope.row.isUse==0">未使用</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作" width="150" fixed="right">
					<template scope="scope">
						<el-button
							class="el-button el-button--text el-button--small"
							style="color:red;"
							size="small"
							@click="deleteHandler(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="listQuery.page"
					:page-sizes="[10,20,30,40,50]"
					:page-size="listQuery.limit"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</div>
		<el-dialog title="发券" :visible.sync="giveDialogVisible">
			<el-form :model="formdata" :rules="rules" ref="form" label-width="110px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="手机号" prop="phone">
							<el-input v-model="formdata.phone" placeholder="请输入手机号"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="选择优惠券" prop="couponId">
							<el-select class="filter-item" v-model="formdata.couponId" placeholder="请选择优惠券">
								<el-option key label value></el-option>
								<el-option
									v-for="(item,index) in titleList"
									:key="index"
									:label="item.title"
									:value="item.id"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="添加张数" prop="couponNum">
							<el-input v-model="formdata.couponNum" placeholder="请输入添加张数"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="add('form')">确认添加</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { formatDate } from 'utils/dateFormattor'

import {
	toEast8Date,
	deepCopyDate,
	newEast8Date,
	convertDate2Str,
	timestamp2Date
} from 'utils/dateUtils'

import rsCode from '../../utils/rsCode'

import { mapGetters } from 'vuex'
import { getToken } from 'utils/auth'
import {
	getTitle,
	getCouponList,
	giveObj,
	delObjOne
} from 'api/cunponManagements'
import Element1 from '../admin/menu/components/element'
import ElRow from 'element-ui/packages/row/src/row'
import ElCol from 'element-ui/packages/col/src/col'

export default {
	name: 'conponList',
	components: {
		ElCol,
		ElRow,
		Element1
	},
	data() {
		return {
			titleList: [],
			rules: {
				phone: [
					{
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					},
					{ pattern: /^1[3456789]\d{9}$/, message: '手机号码错误' }
				],
				couponNum: {
					type: 'string',
					required: true,
					message: '请输入添加张数',
					trigger: 'blur'
				},
				couponId: {
					required: true,
					message: '请选择优惠券'
				}
			},
			giveDialogVisible: false,
			typeOptions: [
				{
					name: '已使用',
					val: '1'
				},
				{
					name: '未使用',
					val: '0'
				}
			],
			BASE_API: process.env.BASE_API,
			showLoadingBody: false,
			list: null,
			total: null,
			listLoading: true,
			listQuery: {
				page: 1,
				limit: 20,
				couponId: '', //优惠券id
				phone: '', //手机号
				usedAmount: '', //金额
				status: '0' //状态
			},
			inline: true,
			tableKey: 0,
			formdata: {
				phone: '',
				couponNum: '',
				couponId: ''
			}
		}
	},
	created() {
		this.getList()
		this.get_title()
	},
	computed: {
		...mapGetters(['elements'])
	},
	methods: {
		get_title() {
			getTitle().then(response => {
				this.titleList = response.data
			})
		},
		/**
		 * 获取列表
		 * */
		getList() {
			this.listLoading = true
			getCouponList(this.listQuery).then(response => {
				let totalCountRs = undefined
				let listRs = undefined
				if (
					!this.$utils.isEmpty(response.data.data) &&
					this.$utils.isInteger(response.data.totalCount)
				) {
					listRs = response.data.data
					totalCountRs = response.data.totalCount
					listRs.map(function(item) {
						item.crtTimeStr = timestamp2Date(item.crtTime)
						item.expireTimeStr = timestamp2Date(item.expireTime)
					})
				}
				this.listLoading = false
				this.list = listRs
				this.total = totalCountRs
			})
		},
		handleFilter() {
			this.listQuery.page = 1
			this.$refs.queryForm.validate(valid => {
				if (valid) {
					this.getList()
				} else {
					return false
				}
			})
		},
		handleSizeChange(val) {
			this.listQuery.limit = val
			this.getList()
		},
		handleCurrentChange(val) {
			this.listQuery.page = val
			this.getList()
		},
		add(formName) {
			var that = this
			const set = this.$refs
			set[formName].validate(valid => {
				if (valid) {
					giveObj(that.formdata).then(response => {
						if (response.status === 200) {
							this.giveDialogVisible = false
							this.getList()
							this.$notify({
								title: '成功',
								message: '发券成功',
								type: 'success',
								duration: 2000
							})
						} else {
							this.$notify({
								title: '失败',
								message: rsCode.msg[response.code]
									? rsCode.msg[response.code]
									: '操作失败！',
								type: 'error',
								duration: 2000
							})
						}
					})
				} else {
					return false
				}
			})
		},
		deleteHandler(row) {
			this.$confirm('确定删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				delObjOne(row.id).then(response => {
					if (response.status == 200) {
						this.$notify({
							title: '成功',
							message: '删除成功',
							type: 'success',
							duration: 2000
						})
						this.getList()
					} else {
						this.$notify({
							title: '失败',
							message: response.message,
							type: 'error',
							duration: 2000
						})
					}
				})
			})
		},
		giveCunpon() {
			this.giveDialogVisible = true
		}
	}
}
</script>
