<template>
  <div>
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
    <users-training-edit ref="edit" type="EDIT" @reloadTable="reloadTable" />
    <users-training-add ref="add" type="ADD" @reloadTable="reloadTable" />
  </div>
</template>

<script>
import { getTrainingList, deleteUserTraining } from '@/api/jmap/training';
import UsersTrainingEdit from './edit';
import UsersTrainingAdd from './add';
export default {
	name: 'UserTrainingEdit',
	components: {
		UsersTrainingEdit,
		UsersTrainingAdd
	},
	data() {
		return {
			examResultList: [],
			pagerConfig: {
				pageSize: 'pageSize',
				pageIndex: 'pageNum'
			},
			queryForm: {
				labelWidth: '120px',
				reset: true,
				queryObject: {
					trainingName: {
						type: 'text',
						label: this.$t('system.trainingName')
					},
					userName: {
						type: 'text',
						label: this.$t('system.userName')
					}
				}

			},
			queryList: {
				query: getTrainingList,
				selectCheckShow: false,
				indexShow: true,
				columns: [
					{
						title: this.$t('system.userName'),
						prop: 'userName'
					},
					{
						title: this.$t('global.mobile'),
						prop: 'userMobile'
					},
					{
						title: this.$t('system.lessonName'),
						prop: 'lessonName'
					},
					{
						title: this.$t('system.trainingUseTime'),
						prop: 'duration',
						type: 'tag',
						columnValue: (row) => { return this.computation(row.duration); },
						tagType: (row) => { return 'success'; }
					},
					{
						title: this.$t('system.trainingName'),
						prop: 'trainingName'
					},
					{
						type: 'button',
						title: this.$t('global.operate'),
						width: '250',
						buttons: [
							{
								name: this.$t('global.edit'),
								handleClick: this.edit,
								showControl: (row) => { return row.fake != '0'; }
							},
							{
								name: this.$t('global.delete'),
								handleClick: this.handleDelete,
								type: 'danger',
								showControl: (row) => { return row.fake != '0'; }
							}
						]
					}
				],
				actions: [
					{ text: this.$t('global.add'), handler: this.createTraining }
				]
			},
			currentModel: {}
		};
	},
	created() {
		this.loadInitData();
	},
	methods: {
		loadInitData() {

		},
		createTraining() {
			this.$refs.add.show();
		},
		computation(fieldValue) {
			if (fieldValue) {
				const f = parseInt(fieldValue / 60);
				const s = fieldValue % 60;
				if (f > 0) {
					return `${f} ${this.$t('system.minute')} ${s} ${this.$t('system.second')}`;
				} else {
					return `${s} ${this.$t('system.second')}`;
				}
			}
		},

		// 编辑
		edit(index, row) {
			this.$refs.edit.show(row);
		},

		// 删除
		handleDelete(index, row) {
			this.$confirm(this.$t('system.wellDelExamResult'), this.$t('global.tips'), {
				confirmButtonText: this.$t('global.confirm'),
				cancelButtonText: this.$t('global.cancel'),
				type: 'warning'
			}).then(() => {
				deleteUserTraining(row.id).then(response => {
					this.$message.success(this.$t('system.deleteSuccess'));
					this.reloadTable();
				}).catch(() => {
					this.reloadTable();
					this.$messageBox(this.$t('error.deleteFailed'));
				});
			});
		},

		reloadTable() {
			this.queryList.reload();
		}
	}
};
</script>
