<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-form-item label="姓名">
						<el-input v-model.number="listQuery.username" placeholder="请输入姓名"></el-input>
					</el-form-item>

					<el-form-item label="手机号">
						<el-input v-model.number="listQuery.phone" placeholder="请输入手机号"></el-input>
					</el-form-item>

					<el-form-item label="提现单号">
						<el-input v-model.number="listQuery.orderNo" placeholder="请输入提现单号" style="width:250px"></el-input>
					</el-form-item>

					<el-form-item label="状态" prop="type">
						<el-select class="filter-item" v-model="listQuery.state" 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-form-item label="提现时间">
						<el-date-picker v-model="time" type="datetimerange" placeholder="选择时间范围"></el-date-picker>
					</el-form-item>

					<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
				</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="姓名" width="200">
					<template scope="scope">
						<span>{{scope.row.username}}</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.amount}}</span>
					</template>
				</el-table-column>

				<el-table-column align="center" label="提现方式">
					<template scope="scope">
						<span>{{scope.row.cathType == 1 ? '支付宝' : '微信'}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="收款账号">
					<template scope="scope">
						<span>{{scope.row.accountNumber}}</span>
					</template>
				</el-table-column>

				<el-table-column align="center" label="状态">
					<template scope="scope">
						<span v-if="scope.row.stauts==0">未到帐</span>
						<span v-if="scope.row.stauts==1">已到账</span>
						<span v-if="scope.row.stauts==2">驳回</span>
					</template>
				</el-table-column>

				<el-table-column align="center" label="提现单号/申请时间" width="300">
					<template scope="scope">
						<p>{{scope.row.orderNo}}</p>
						<p>{{scope.row.crtTimeStr}}</p>
					</template>
				</el-table-column>
				<el-table-column align="center" label="商户订单号/到账时间" width="300">
					<template scope="scope">
						<p>{{scope.row.cono}}</p>
						<p>{{scope.row.finishTimeStr}}</p>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作" width="65" fixed="right">
					<template scope="scope">
						<el-button
							size="small"
							class="el-button el-button--text el-button--small"
							v-if="scope.row.stauts==0"
							@click="handleUpdate(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="dialogVisible">
			<el-form :model="dialogFrom" ref="dialogFrom" label-width="80px">
				<el-form-item label="审核类型">
					<el-radio v-model="dialogFrom.status" label="1">通过</el-radio>
					<el-radio v-model="dialogFrom.status" label="2">拒绝</el-radio>
				</el-form-item>
				<el-form-item label="订单号" v-if="dialogFrom.status==1" required>
					<el-input v-model="dialogFrom.cono" placeholder="请输入订单号"></el-input>
				</el-form-item>
				<el-form-item label="拒绝原因" v-if="dialogFrom.status==2" required>
					<el-input type="textarea" v-model="dialogFrom.reason" placeholder="拒绝原因"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelHandel">取 消</el-button>
				<el-button type="primary" @click="edit('dialogFrom')">确 定</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 { discountList, editObj } from 'api/purseManage'
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: 'discountRecord',
	components: {
		ElCol,
		ElRow,
		Element1
	},
	data() {
		return {
      time:[],//提现时间
			typeOptions: [
				{
					name: '全部',
					val: ''
				},
				{
					name: '未到账',
					val: '0'
				},
				{
					name: '已到账',
					val: '1'
				}
			],
			dialogVisible: false,
			BASE_API: process.env.BASE_API,
			showLoadingBody: false,
			list: null,
			total: null,
			listLoading: true,
			listQuery: {
				page: 1,
				limit: 20,
				phone: '', //手机号
				username: '', //姓名
        state: '', //状态
        startTime:null,
        endTime:null,
				orderNo: '', //提现单号
			},
			inline: true,
			tableKey: 0,
			dialogFrom: {
				status: '1',
				cono: '',
				reason: ''
			}
		}
	},
	created() {
		this.getList()
	},
	computed: {
		...mapGetters(['elements'])
	},
	methods: {
		/**
		 * 获取提现列表
		 * */
		getList() {
			this.listLoading = true
			discountList(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)
						if (item.finishTime != 0 && item.finishTime != null) {
							item.finishTimeStr = timestamp2Date(item.finishTime)
						}
					})
				}
				this.listLoading = false
				this.list = listRs
				this.total = totalCountRs
			})
		},
		handleFilter() {
      this.listQuery.page = 1
      this.listQuery.startTime = new Date(this.time[0]).getTime() || null;
      this.listQuery.endTime = new Date(this.time[1]).getTime() || null;
      delete this.listQuery.time
			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()
		},
		cancelHandel() {
			this.dialogVisible = false
		},
		handleUpdate(row) {
			this.dialogFrom.cathId = row.id
			this.dialogVisible = true
		},
		edit(formName) {
			var that = this
			const set = this.$refs
			set[formName].validate(valid => {
				if (this.dialogFrom.status == 1) {
					if (this.dialogFrom.cono == '') {
						this.$notify({
							title: '警告',
							message: '请输入订单号',
							type: 'warning',
							duration: 2000
						})
						return false
					}
				}
				if (this.dialogFrom.status == 2) {
					if (this.dialogFrom.reason == '') {
						this.$notify({
							title: '警告',
							message: '请输入拒绝原因',
							type: 'warning',
							duration: 2000
						})
						return false
					}
				}
				if (valid) {
					editObj(that.dialogFrom).then(response => {
						if (response.status === 200) {
							this.dialogVisible = 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
				}
			})
		}
	}
}
</script>
