<template>
<el-drawer title="账单详情" v-model="visible" :size="600" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')">
	<el-main>
		<el-descriptions border title="用户信息" column="1">
			<el-descriptions-item label="头像"><el-image :src="detail.member?.avatar" style="width: 50px;" /></el-descriptions-item>
			<el-descriptions-item label="UID">{{detail.member?.uid}}</el-descriptions-item>
			<el-descriptions-item label="用户名">{{detail.member?.username}}</el-descriptions-item>
			<el-descriptions-item label="名称">{{detail.member?.nickname}}</el-descriptions-item>
			<el-descriptions-item label="手机号码">{{detail.member?.mobile}}</el-descriptions-item>
		</el-descriptions>

		<el-descriptions border title="账单信息" column="1" style="margin-top: 20px;">
			<el-descriptions-item label="金额">{{detail.amount}}</el-descriptions-item>
			<el-descriptions-item label="类型">{{detail.type == 'income' ? '收入' : '提现'}}</el-descriptions-item>
			<el-descriptions-item label="金额">{{detail.remark}}</el-descriptions-item>
			<el-descriptions-item label="状态">
				<el-tag v-if="detail.type == 'income'" :type="detail.status == 1 ? 'success' : 'danger'">{{ detail.status == 1 ? '已到账' : '未入账' }}</el-tag>
				<el-tag v-else :type="detail.status == 1 ? 'success' : 'danger'">{{ detail.status == 1 ? '已提现' : '待确认' }}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="创建时间">{{detail.created_at}}</el-descriptions-item>
			<el-descriptions-item label="更新时间">{{detail.updated_at}}</el-descriptions-item>
		</el-descriptions>

		<el-descriptions border title="订单商品" column="1" style="margin-top: 20px;">
			<el-descriptions-item label="订单编号">{{detail.order?.order?.order_no}}</el-descriptions-item>
			<el-descriptions-item label="商品图片"><el-image :src="detail.order?.cover" style="width: 100px;" /></el-descriptions-item>
			<el-descriptions-item label="商品名称">{{detail.order?.title}}</el-descriptions-item>
			<el-descriptions-item label="订单价格">{{detail.order?.total_price}}</el-descriptions-item>
			<el-descriptions-item label="下单时间">{{detail.order?.created_at}}</el-descriptions-item>
		</el-descriptions>
	</el-main>
	<template #footer>
		<el-button type="primary" @click="onSubmit(3)" v-if="detail.type == 'withdraw'" :disables="isSubmit">通过提现</el-button>
		<el-button type="danger" @click="onSubmit(0)" v-if="detail.type == 'withdraw' || detail.status == 0" :disables="isSubmit">删除提现</el-button>
	</template>
</el-drawer>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			detail: {},
			visible: false,
			isSubmit: false
		}
	},
	mounted() {
	},
	methods: {
		//显示
		open(){
			this.visible = true;
			return this;
		},
		//表单提交方法
		async onSubmit(status){
			this.isSubmit = true
			let res = await this.$API.member.account.withdraw.post({id: this.detail.id, status: status})
			if(res.code == 1){
				this.visible = false;
				this.$emit('closed')
				this.$emit('success', this.form)
				this.$message.success(res.message)
			}else{
				this.$message.error(res.message)
				this.isSubmit = false
			}
		},
		//表单注入数据
		setData(data){
			this.loading = true
			Object.assign(this.detail, data)
		}
	}
}
</script>

<style>
</style>
