<template>
	<div class="app-list-content">
		<cl-crud class="liu-crud-wrap" @load="onLoad">
			<template #slot-tabs="{ scope }">
				<el-tabs
					class="liu-tabs"
					type="border-card"
					v-model="tabIndex"
					@tab-click="handleClick"
				>
					<el-tab-pane
						v-for="(item, index) in tabsData"
						:key="index"
						:label="item.text"
						:name="item.key"
					></el-tab-pane>
				</el-tabs>
			</template>

			<template #table-column-submitTime="{scope}">
				<span>{{ scope.row.submitTime | formatTime }}</span>
			</template>

			<template #table-column-status="{scope}">
				<span>{{ scope.row.status | constantfilter('SASS_MINIAPP_STATUS') }}</span>
			</template>

			<!-- 升级 -->
			<template #slot-upgrade="{scope}">
				<div class="flex-center">
					<div class="version-text">当前总版本{{ data.version }}</div>
					<el-button type="primary" size="mini" @click="upgradeDialog = true"
						>升级</el-button
					>
				</div>
			</template>
		</cl-crud>
		<!-- 升级弹窗 -->
		<el-dialog
			title="升级"
			:visible.sync="upgradeDialog"
			: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-input
							v-model="form.version"
							placeholder="请输入版本号"
							size="small"
						></el-input>
					</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="upgradeFn">确认</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			// cl-crud
			app: null,
			tabIndex: '-1',
			tabsData: [
				{
					text: '全部',
					key: '-1'
				},
				{
					text: '待审核',
					key: '0'
				},
				{
					text: '审核通过',
					key: '1'
				},
				{
					text: '审核失败',
					key: '3'
				}
			],
			// 审核
			upgradeDialog: false,
			form: {
				version: '',
				remark: ''
			},
			rule: {},
			// data
			data: {}
		};
	},
	mounted() {},
	methods: {
		handleClick(tab, e) {
			this.app.refresh({ status: this.tabIndex });
		},
		// 升级
		showModalFn() {
			this.upgradeDialog = true;
		},
		upgradeFn() {
			this.$service.sassShop.upgradeUpdate(this.form).then(res => {
				this.app.refresh({ status: this.tabIndex });
				this.$message.success('升级成功！');
				this.resetForm();
			});
		},
		resetForm() {
			this.$refs['form'].resetFields();
			this.upgradeDialog = false;
		},
		// crud
		onLoad({ ctx, app }) {
			this.app = app;
			let upgradeHost = () => {
				return this.$service.sassShop.upgradeList();
			};
			ctx.service({
				page: upgradeHost
			})
				.set('table', {
					columns: [
						{
							prop: 'id',
							label: 'ID',
							align: 'center'
						},
						{
							prop: 'miniName',
							label: '名称',
							align: 'center'
						},
						{
							prop: 'version',
							label: '版本号',
							align: 'center'
						},
						{
							prop: 'submitTime',
							label: '提交时间',
							align: 'center'
						},
						{
							prop: 'status',
							label: '状态',
							align: 'center',
							emptyText: '无'
						},
						{
							prop: 'checkReturn',
							label: '审核说明',
							align: 'center',
							emptyText: '无'
						}
					],
					// 操作列
					op: {
						visible: false, // 是否显示
						// 同 element-ui Table-column Attributes
						props: {
							width: 100,
							align: 'center',
							fixed: 'right',
							label: '操作'
						},
						// 布局，请移步 `layout`
						layout: []
					}
				})
				.set('layout', [
					['slot-tabs'],
					['slot-upgrade', 'flex1', 'refresh-btn'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next, render }) => {
					// 继续执行刷新
					let res = await next(params);
					this.data = res;
				})
				.done();
			app.refresh({ status: this.tabIndex });
		}
	}
};
</script>

<style lang="scss" scoped>
.version-text {
	margin-right: 20px;
	color: $fontColor2;
}
</style>
