<template>
	<div class="app-container">
		<div v-show="viewState == 1">
			<button-bar ref="btnbar" view-title="企业卡统计" :btndisabled="btndisabled" @btnhandle="btnHandle" />
			<div class="main-content">
				<div class="searchcon">
					<el-button size="small" class="searchbtn" @click="clicksearchShow">
						{{ searchxianshitit }}
					</el-button>
					<div v-show="isSearchShow" class="search">
						<el-form :inline="true" class="tab-header">
							<el-form-item label="卡片序列号">
								<el-input v-model="queryParams.params.serialNumber" placeholder="" clearable />
							
							</el-form-item>
							<!-- <el-form-item label="卡片状态">
								<el-select v-model="queryParams.params.state" placeholder="请选择">
									<el-option v-for="(item,i) in stateList" :key="i" :label="item.name"
										:value="item.sid">
									</el-option>
								</el-select>
							
							</el-form-item>
							<el-form-item label="所属支行">
								<el-select v-model="queryParams.params.bankSid" filterable class="item_input" clearable
									placeholder="请选择" style="width:100%" @change="bankSelect">
									<el-option v-for="item in bankList" :key="item.name" :label="item.name"
										:value="item.sid">
									</el-option>
								</el-select>
							</el-form-item> -->
							
						</el-form>
						<div class="btn" style="text-align: center;">
							<el-button type="primary" size="small" icon="el-icon-search"
								@click="dosearch">查询</el-button>
							<el-button type="primary" size="small" icon="el-icon-refresh"
								@click="resetQuery">重置</el-button>
						</div>
					</div>
				</div>
				<!-- Start 项目列表头部 -->
				<div class="listtop">
					<div class="tit">用户列表</div>
				</div>
				<!-- End 项目列表头部 -->
				<!-- Start 项目列表 -->
				<div class="">
					<el-table v-loading="tableLoading" :data="dataList" border style="width: 100%" :row-style="{height: '40px'}">
						<!-- <el-table-column fixed width="50" type="selection" align="center" /> -->
						<el-table-column fixed width="60" label="序号" type="index" :index="indexMethod" align="center" />
						<!-- <el-table-column label="操作" align="center" width="180">
							<template slot-scope="scope">
								<el-button type="primary" size="mini" @click="toRelevancy(scope.row)">编辑</el-button>
								<el-button type="primary" size="mini" @click="toRelevancyInfo(scope.row)">删除</el-button>
							</template>
						</el-table-column> -->
					<el-table-column prop="serialNumber" label="卡券序列号" align="center" />
					<el-table-column prop="createTime" label="发行时间" align="center" />
					<el-table-column prop="code" label="提货编码" align="center" />
					<el-table-column prop="stateValue" label="卡券状态" align="center" />
					<el-table-column prop="bindDate" label="绑定时间" align="center" />
					</el-table>
				</div>
				<!-- End 项目列表 -->
				<div class="pages">
					<div class="tit" />
					<!--  翻页  -->
					<pagination v-show="dataList.length > 0" :total="queryParams.total" :page.sync="queryParams.current"
						:limit.sync="queryParams.size" class="pagination" @pagination="loadList" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import req from '@/api/cardManage/cardManage.js'
		import req2 from '@/api/pickupPoint/pickupPoint.js'
	import ButtonBar from '@/components/ButtonBar'
	import Pagination from '@/components/pagination'
	import pageye from '@/components/pagination/pageye'
	export default {
		name: 'SupplierBankInfoIndex',
		components: {
			ButtonBar,
			Pagination,
			pageye,
		},
		data() {
			return {
				btndisabled: false,
				viewState: 1, // 1、列表 2、添加 3、修改 4、查看
				isSearchShow: false,
				searchxianshitit: '显示查询条件',
				tableLoading: false,
				dataList: [],
				btnList: [
					{
							type: 'success',
							size: 'small',
							icon: 'export',
							btnKey: 'build',
							btnLabel: '导出'
						},
					{
						type: 'info',
						size: 'small',
						icon: 'cross',
						btnKey: 'doClose',
						btnLabel: '关闭'
					}
				],
				queryParams: {
					current: 1,
					size: 10,
					total: 0,
					params: {
						serialNumber: '',
						 state: '',
						 bankSid:""
						
					}
				},
				bankList: [],
				stateList: [{
						name: "全部",
						sid: ""
					}, {
						name: "未绑定用户",
						sid: "2"
					},
					{
						name: "未提货",
						sid: "3"
					},
					{
						name: "部分提货",
						sid: "4"
					},
					{
						name: "提货完成",
						sid: "5"
					}
				],
			}
		},
		mounted() {
			this.$refs['btnbar'].setButtonList(this.btnList)
		},
		created() {
			this.loadList()
			// this.getBankList()
		},
		methods: {
			getBankList() {
				req2.bankSelect()
					.then(resp => {
						console.log('>>>>>>>>>getBankList', resp.data)
						this.bankList = resp.data
			
					})
					.catch(() => {})
			},
			bankSelect(val) {
				console.log('>>>>>>>>>bankSelect', val)
				this.page.params.bankSid = val
			},
			// 搜索条件效果
			clicksearchShow() {
				this.isSearchShow = !this.isSearchShow
				if (this.isSearchShow) {
					this.searchxianshitit = '隐藏查询条件'
				} else {
					this.searchxianshitit = '显示查询条件'
				}
			},
			btnHandle(btnKey) {
				switch (btnKey) {
				case 'build': // 导出
					this.doBuild()
					break
					case 'doClose':
						this.doClose()
						break
					default:
						break
				}
			},
			loadList() {
				this.tableLoading = true
				req.customerListPage(this.queryParams).then((resp) => {
					this.tableLoading = false
					if (resp.success) {
						const data = resp.data
						this.queryParams.total = data.total
						this.dataList = data.records
					} else {
						// 根据resp.code进行异常情况处理
						this.dataList = []
						this.queryParams.total = 0
					}
				}).catch(() => {
					this.tableLoading = false
				})
			},
		
			// 序号
			indexMethod(index) {
				var pagestart = (this.queryParams.current - 1) * this.queryParams.size
				var pageindex = index + 1 + pagestart
				return pageindex
			},
			dosearch() {
				this.queryParams.current = 1
				this.loadList()
			},
			resetQuery() {
				this.queryParams = {
					current: 1,
					size: 10,
					total: 0,
					params: {
						serialNumber: '',
					}
				}
				this.loadList()
			},
			toAdd() {
				this.viewState = 2
				this.$refs['divadd'].showAdd()
			},
			doClose() {
			  this.$store.dispatch('tagsView/delView', this.$route)
			  this.$router.go(-1)
			},
			toRelevancy(row) {
				this.viewState = 3
				this.$refs['divadd'].showEdit(row)
			},
			toRelevancyInfo(row) {

				const tip = '请确认是否删除所选记录?'
				this.$confirm(tip, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const loading = this.$loading({
						lock: true,
						text: 'Loading',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					req.brandDelBySids(row.id).then((resp) => {
						loading.close()
						if (resp.success) {
							this.$message({
								type: 'success',
								message: resp.msg,
								showClose: true
							})
							this.loadList()
						} else {
							// 根据resp.code进行异常情况处理
						}
					}).catch(e => {
						loading.close()
					})
				}).catch(() => {})
			},
			resetState() {
				this.viewState = 1
			},
			// 导出
			doBuild() {
			// 	const loading = this.$loading({
			// 		lock: true,
			// 		text: 'Loading',
			// 		spinner: 'el-icon-loading',
			// 		background: 'rgba(0, 0, 0, 0.7)'
			// 	})
			
			
			// 	req.bankOrderExportExcel(this.page.params).then((resp) => {
			// 		loading.close()
			// 		const blob = new Blob([resp], {
			// 			type: 'application/vnd.ms-excel'
			// 		})
			// 		const fileName = '支行配货明细_' + this.page.params.startDate + '.xls'
			// 		const elink = document.createElement('a')
			// 		elink.download = fileName
			// 		elink.style.display = 'nonde'
			// 		elink.href = URL.createObjectURL(blob)
			// 		document.body.appendChild(elink)
			// 		elink.click()
			// 		URL.revokeObjectURL(elink.href)
			// 		document.body.removeChild(elink)
			// 	}).catch(() => {
			// 		loading.close()
			// 	})
			},
			
		}
	}
</script>
<style scoped>
</style>