<template>
	<div class="app-list-content">
		<x-crud class="liu-crud-wrap" @load="onLoad">

			<!-- 审核 -->
			<template #slot-apply="{scope}">

				<template v-if="scope.row.status == 1">
					<el-button type="text" @click="showModalFn(scope.row)">审核</el-button>
				</template>

			</template>

			<template #table-column-status="{scope}">
				<template v-if="scope.row.status == 1">
					<span>待审核</span>
				</template>
				<template v-else-if="scope.row.status == 2">
					<span class="success_color">通过</span>
				</template>
        		<template v-else-if="scope.row.status == 3">
          			<span class="error_color">未通过</span>
				</template>
        		<template v-else>
          			<span class="error_color">-</span>
				</template>
			</template>

		</x-crud>
		<!-- 审核弹窗 -->
		<el-dialog
			title="审核"
			:visible.sync="applyDialog"
			:close-on-click-modal="false"
			width="500px"
		>
			<div class="ad-modal-content">
				<el-form
					:model="form"
					:rules="rule"
					ref="form"
					label-width="100px"
					class="demo-form"
				>
					<el-form-item label="状态" prop="status">
						<el-radio-group v-model="form.status">
							<el-radio label="2">通过</el-radio>
							<el-radio label="3">拒绝</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="备注" prop="remark">
						<el-input type="textarea" v-model="form.remark"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="resetForm">取 消</el-button>
				<el-button type="primary" size="small" @click="applyFn">确认</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			// x-crud
			app: null,
			// 审核
			applyDialog: false,
			form: {
				id: '',
				status: '2',
				remark: ''
			},
			rule: {}
		};
	},
	mounted() {},
	methods: {
		showModalFn(item) {
			this.form.id = item.id;
			this.applyDialog = true;
		},
		applyFn() {
			this.$service.cash.check(this.form).then(res => {
				this.app.refresh();
				this.$message.success('操作成功');
				this.resetForm();
			});
		},
		resetForm() {
			this.$refs['form'].resetFields();
			this.applyDialog = false;
		},
		// crud
		onLoad({ ctx, app }) {
			this.app = app;
			ctx.service(this.$service.cash)
				.set('table', {
					columns: [
						{
							prop: 'id',
							label: 'ID',
							align: 'center',
							width: '70'
						},
						{
							prop: 'sjName',
							label: '商家',
							align: 'center',
							width: '120'
						},
						{
							prop: 'shopName',
							label: '门店',
							align: 'center',
							width: '120'
						},
						{
							prop: 'sjId',
							label: '商家ID',
							align: 'center',
							width: '90'
						},
						{
							prop: 'shopId',
							label: '门店ID',
							align: 'center',
							width: '90'
						},
						{
							prop: 'cashName',
							label: '收款人姓名',
							align: 'center',
							width: '120'
						},
						{
							prop: 'cashAccount',
							label: '收款人帐号',
							align: 'center',
							width: '130'
						},
						{
							prop: 'amount',
							label: '提现金额',
							align: 'center',
							emptyText: '无',
							width: '100'
						},
						{
							prop: 'thirdOrderSn',
							label: '提现回执',
							align: 'center',
							emptyText: '',
							width: '130'
						},
						{
							prop: 'remark',
							label: '备注',
							align: 'center',
							emptyText: '',
							width: '180'
						},
						{
							prop: 'status',
							label: '状态',
							align: 'center',
							emptyText: '无'
						},
            			{
							prop: 'addTime',
							label: '提交时间',
							align: 'center',
							emptyText: '无'
						}
					],
					// 操作列
					op: {
						visible: true, // 是否显示
						// 同 element-ui Table-column Attributes
						props: {
							width: 150,
							align: 'center',
							fixed: 'right',
							label: '操作'
						},
						// 布局，请移步 `layout`
						layout: ['slot-apply']
					}
				})
				.set('layout', [
					['slot-tabs'],
					['flex1', 'refresh-btn'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();
			app.refresh();
		}
	}
};
</script>
<style lang="scss" scoped>
.success_color{
  color: #09bb07!important;
  font-size: 14px;
  cursor: pointer;
}
.error_color{
  color: #ff2842!important;
  font-size: 14px;
  cursor: pointer;
}
</style>