<template>
<el-container>
	<!-- 大使账单 -->
	<el-header>
		<div class="left-panel">
			<el-select v-model="search.type" placeholder="请选择类型" style="width: 180px; margin-right: 10px;" clearable>
				<el-option :label="item.label" :value="item.value" v-for="(item, index) in typeList"></el-option>
			</el-select>
			<el-input v-model="search.store_title" placeholder="请输入店铺名称" style="width: 180px; margin-right: 10px;" clearable />
			<el-input v-model="search.username" placeholder="请输入用户名" style="width: 180px; margin-right: 10px;" clearable />
			<el-select v-model="search.status" placeholder="请选择状态" style="width: 180px;" clearable v-if="search.type == 'withdraw'">
				<el-option :label="item.label" :value="item.value" v-for="(item, index) in [{label: '已提现', value: 1}, {label: '待提现', value: 0}, {label: '已拒绝', value: 2},{label: '提现失败', value: -2}]" :key="index"></el-option>
			</el-select>
			<el-select v-model="search.status" placeholder="请选择状态" style="width: 180px;" clearable v-if="search.type == 'income'">
				<el-option :label="item.label" :value="item.value" v-for="(item, index) in [{label: '已到账', value: 1}, {label: '未入账', value: 0}]" :key="index"></el-option>
			</el-select>
			<el-button-group style="margin-left: 10px;">
				<el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
			</el-button-group>
		</div>
		<div class="right-panel">
			<el-button-group>
				<el-button type="danger" icon="el-icon-plus" @click="add" v-auth="['waybill.add']">添加</el-button>
			</el-button-group>
		</div>
	</el-header>
	<el-main class="nopadding">
		<scTable tableName="member" ref="table" :apiObj="list.apiObj" :column="list.column" row-key="id" @selection-change="selectionChange" border stripe size="small">
			<el-table-column type="selection" width="50"></el-table-column>
			<template #member="scope">
				<div style="display: flex; gap: 8px; align-items: center;">
					<el-image :src="scope.row.member?.avatar" style="width: 40px; height: 40px" />
					<div style="display: flex; flex-direction: column;">
						<span>{{ scope.row.member?.nickname }}</span>
						<span>{{ scope.row.member?.username }}</span>
					</div>
				</div>
			</template>
			<template #type="scope">
				{{ scope.row.type == 'income' ? '收益' : '提现' }}
			</template>
			<template #mobile="scope">
				{{ scope.row.member?.mobile }}
			</template>
			<template #status="scope">
				<el-tag v-if="scope.row.type == 'income'" :type="scope.row.status == 1 ? 'success' : 'danger'">{{ scope.row.status == 1 ? '已到账' : '未入账' }}</el-tag>
				<el-tag v-else :type="scope.row.status == 1 ? 'success' : 'danger'">
					
					<span v-show="scope.row.status == 0">待提现</span>
					<span v-show="scope.row.status == 1">已提现</span>
					<span v-show="scope.row.status == 2">已拒绝</span>
					<span v-show="scope.row.status == -2">提现失败</span>
				</el-tag>
			</template>
			<el-table-column label="操作" fixed="right" align="center" width="100">
				<template #default="scope">
					<el-button size="small" type="primary" @click="table_show(scope.row, scope.$index)">详情</el-button>
				</template>
			</el-table-column>
		</scTable>
	</el-main>
	<search v-if="dialog.search" ref="searchBox" @closed="dialog.search = false" @success="moreUpsearch" />
	<detail v-if="dialog.detail" ref="detailBox" @closed="dialog.detail = false" @success="upsearch" />
</el-container>
</template>

<script>
import search from './search'
import detail from './detail'

export default{
	name: 'member.account',
	components: {
		search,
		detail
	},
	data(){
		return {
			dialog: {search: false, detail: false, print: false},

			list: {
				apiObj: this.$API.member.account.list,
				column: [
					{prop: 'member', label: '头像'},
					{prop: 'mobile', label: '手机号码', width: 120},
					{prop: 'bank_realname', label: '真实姓名', width: 50},
					{prop: 'type', label: '类型', width: 120, align: 'center'},
					{prop: 'amount', label: '额度', width: 120},
					{prop: 'af_amount', label: '余额', width: 120},
					{prop: 'remark', label: '备注', width: 120},
					{prop: 'reason', label: '失败理由', width: 60},
					{prop: 'status', label: '状态', width: 120},
					{prop: 'created_at', label: '添加时间', width: 140},
					{prop: 'updated_at', label: '更新时间', width: 140},
				],
			},
			typeList: [{label: '收入', value: 'income'}, {label: '提现', value: 'withdraw'}],
			selection: [],
			search: {},
		}
	},
	methods: {
		upsearch(){
			this.$refs.table.reload(this.search);
		},
		moreUpsearch(search){
			this.search = search;
			this.upsearch();
		},
		moreSearch(){
			this.dialog.search = true
			this.$nextTick(() => {
				this.$refs.searchBox.open().setData(this.search)
			})
		},
		//表格选择后回调事件
		selectionChange(selection){
			this.selection = selection;
		},
		add(){
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveBox.open().setData({})
			})
		},
		table_show(row, index){
			this.dialog.detail = true
			this.$nextTick(() => {
				this.$refs.detailBox.open().setData(row)
			})
		}
	}
}
</script>
