<template>
	<div class="NCC-common-layout">
		<div class="NCC-common-layout-center">
			<!-- <el-row class="NCC-common-search-box" :gutter="16">
				<el-form @submit.native.prevent>
					<el-col :span="6">
						<el-form-item label="转出会员">
							<el-input v-model="query.transferFromMemberId" placeholder="转出会员编号" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="转入会员">
							<el-input v-model="query.transferToMemberId" placeholder="转入会员编号" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="操作员">
							<el-input v-model="query.operatorId" placeholder="操作员" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="转卡时间">
							<el-date-picker
								v-model="transferTimeRange"
								type="datetimerange"
								range-separator="至"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								value-format="timestamp"
								clearable
							/>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
							<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row> -->
			<div class="NCC-common-layout-main NCC-flex-main">
				<div class="NCC-common-head">
					<div>
					</div>
					<div class="NCC-common-head-right">
						<el-tooltip effect="dark" content="刷新" placement="top">
							<el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false" @click="reset()" />
						</el-tooltip>
						<screenfull isContainer />
					</div>
				</div>
				<NCC-table v-loading="listLoading" :data="list" has-c>
					<el-table-column label="转出会员"  align="left">
						<template slot-scope="scope">
							<div class="member-info">
								<i class="el-icon-user member-icon"></i>
								<span class="text-nowrap">{{ scope.row.transferFromMemberId || '无' }}</span>
							</div>
							<div v-if="scope.row.transferFromMemberName" class="member-name">
								{{ scope.row.transferFromMemberName }}
							</div>
						</template>
					</el-table-column>
					<el-table-column label="转入会员"  align="left">
						<template slot-scope="scope">
							<div class="member-info">
								<i class="el-icon-user-solid member-icon"></i>
								<span class="text-nowrap">{{ scope.row.transferToMemberId || '无' }}</span>
							</div>
							<div v-if="scope.row.transferToMemberName" class="member-name">
								{{ scope.row.transferToMemberName }}
							</div>
						</template>
					</el-table-column>
					<el-table-column label="转卡金额"  align="left">
						<template slot-scope="scope">
							<div class="amount-info">
								<i class="el-icon-money amount-icon"></i>
								<span class="text-nowrap">{{ scope.row.transferAmount || '无' }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="转卡时间"  align="left">
						<template slot-scope="scope">
							<div class="date-info">
								<i class="el-icon-time date-icon"></i>
								<span class="text-nowrap">{{ formatTime(scope.row.transferTime) }}</span>
							</div>
						</template>
					</el-table-column>
					<!-- <el-table-column label="操作员"  align="left">
						<template slot-scope="scope">
							<div class="operator-info">
								<i class="el-icon-user operator-icon"></i>
								<span class="text-nowrap">{{ scope.row.operatorId || '无' }}</span>
							</div>
						</template>
					</el-table-column> -->
					<el-table-column label="退卡单号"  align="left" width="180">
						<template slot-scope="scope">
							<div class="card-info">
								<i class="el-icon-document card-icon"></i>
								<el-link 
									v-if="scope.row.refundCardId" 
									type="primary" 
									:underline="false" 
									@click="goToRefundDetail(scope.row.refundCardId)"
								>
									{{ scope.row.refundCardId }}
								</el-link>
								<span v-else>无</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="开单单号"  align="left" width="180">
						<template slot-scope="scope">
							<div class="card-info">
								<i class="el-icon-document card-icon"></i>
								<el-link 
									v-if="scope.row.billingCardId" 
									type="primary" 
									:underline="false" 
									@click="goToBillingDetail(scope.row.billingCardId)"
								>
									{{ scope.row.billingCardId }}
								</el-link>
								<span v-else>无</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="是否有效" align="left">
						<template slot-scope="scope">
							<el-tag :type="scope.row.isEffective === 1 ? 'success' : 'danger'" size="small">
								{{ scope.row.isEffective === 1 ? '有效' : '无效' }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="备注" align="left" >
						<template slot-scope="scope">
							<div class="remark-info">
								<i class="el-icon-edit-outline remark-icon"></i>
								<span class="text-nowrap">{{ scope.row.remarks || '无' }}</span>
							</div>
						</template>
					</el-table-column>
				</NCC-table>
				<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
			</div>
		</div>
		<LqKdKdjlbDetail ref="billingDetailDialog" />
		<LqHytkHytkDetail ref="refundDetailDialog" />
	</div>
</template>

<script>
	import request from '@/utils/request'
	import LqKdKdjlbDetail from '../lqKdKdjlb/detail'
	import LqHytkHytkDetail from '../lqHytkHytk/detail'

	export default {
		components: { LqKdKdjlbDetail, LqHytkHytkDetail },
		data() {
			return {
				query: {
					transferFromMemberId: undefined,
					transferToMemberId: undefined,
					operatorId: undefined,
					transferTimeStart: undefined,
					transferTimeEnd: undefined,
				},
				transferTimeRange: [],
				list: [],
				listLoading: true,
				total: 0,
				listQuery: {
					currentPage: 1,
					pageSize: 20,
					sort: "desc",
					sidx: "",
				},
			}
		},
		created() {
			this.initData()
		},
		methods: {
			initData() {
				this.listLoading = true
				let _query = {
					...this.listQuery,
					...this.query
				}
				
				// 处理时间范围
				if (this.transferTimeRange && this.transferTimeRange.length === 2) {
					_query.transferTimeStart = this.transferTimeRange[0]
					_query.transferTimeEnd = this.transferTimeRange[1]
				}
				
				let query = {}
				for (let key in _query) {
					if (Array.isArray(_query[key])) {
						query[key] = _query[key].join()
					} else if (_query[key] !== undefined && _query[key] !== null && _query[key] !== '') {
						query[key] = _query[key]
					}
				}
				
				request({
					url: `/api/Extend/lqcardtransferlog`,
					method: 'GET',
					data: query
				}).then(res => {
					this.list = res.data.list || []
					this.total = (res.data.pagination && res.data.pagination.total) || 0
					this.listLoading = false
				}).catch(() => {
					this.listLoading = false
				})
			},
			formatTime(timestamp) {
				if (!timestamp) return '无'
				const date = new Date(timestamp)
				return date.toLocaleString('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit',
					hour: '2-digit',
					minute: '2-digit',
					second: '2-digit'
				})
			},
			goToBillingDetail(billingCardId) {
				if (!billingCardId) return
				this.$refs.billingDetailDialog.init(billingCardId)
			},
			goToRefundDetail(refundCardId) {
				if (!refundCardId) return
				this.$refs.refundDetailDialog.init(refundCardId)
			},
			search() {
				this.listQuery = {
					currentPage: 1,
					pageSize: 20,
					sort: "desc",
					sidx: "",
				}
				this.initData()
			},
			reset() {
				for (let key in this.query) {
					this.query[key] = undefined
				}
				this.transferTimeRange = []
				this.listQuery = {
					currentPage: 1,
					pageSize: 20,
					sort: "desc",
					sidx: "",
				}
				this.initData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.member-info,
	.amount-info,
	.date-info,
	.operator-info,
	.card-info,
	.remark-info {
		display: flex;
		align-items: center;
		
		.member-icon,
		.amount-icon,
		.date-icon,
		.operator-icon,
		.card-icon,
		.remark-icon {
			margin-right: 5px;
			color: #409EFF;
		}
	}
	
	.member-name {
		font-size: 12px;
		color: #909399;
		margin-top: 2px;
	}
	
	.text-nowrap {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
