<template>
  <el-dialog
    :title="title"
    :visible.sync="show"
    top="20px"
    width="90%"
    :before-close="doClose"
    :close-on-click-modal="false"
  >
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
  </el-dialog>
</template>

<script>
import { getLessonPermissonPageList } from '@/api/management/author';

export default {
	name: 'Author',
	props: {
		ruleList: {
			type: Array,
			default() {
				return [];
			}
		},
		effectiveTypeList: {
			type: Array,
			default() {
				return [];
			}
		},
		permissionTypeList: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			PermissionTypeList: [],
			ruleLists: [
				{ value: true, label: '是' },
				{ value: false, label: '否' }
			],
			show: false,
			param: '',
			pagerConfig: {
				pageSize: 'pageSize',
				pageIndex: 'pageNum'
			},
			queryForm: {
				labelWidth: '100px',
				reset: true,
				queryObject: {
					'name': {
						type: 'text',
						label: '权限名称'
					},
					'type': {
						type: 'select',
						label: this.$t('orderAuthor.permissionType'),
						config: {
							data: []
						}
					}
				}
			},
			queryList: {
				query: this.queryFunction,
				selectCheckShow: false,
				indexShow: true,
				columns: [
					{
						title: '创建时间',
						prop: 'createTime'
					},
					{
						title: '创建者',
						prop: 'creatorUserName'
					},
					{
						title: '是否包权限',
						prop: 'isPackage',
						type: 'tag',
						columnValue: (row) => { return this.$convertField(row.isPackage, this.ruleLists, ['value', 'label']); },
						tagType: (row) => { return ''; }
					},
					{
						title: '权限名称',
						prop: 'name'
					},
					{
						title: this.$t('orderAuthor.permissionType'),
						prop: 'type',
						type: 'tag',
						columnValue: (row) => { return this.$convertField(row.type, this.PermissionTypeList, ['value', 'label']); },
						tagType: (row) => { return ''; }
					},
					{
						type: 'button',
						title: this.$t('global.operate'),
						width: '120',
						buttons: [
							{
								name: this.$t('global.append'),
								handleClick: this.handlePut,
								type: '',
								showControl: (row) => { return !row.isPut; }
							},
							{
								name: this.$t('global.delete'),
								handleClick: this.handlePop,
								type: 'warning',
								showControl: (row) => { return row.isPut; }
							}
						]
					}
				]
			}
		};
	},
	computed: {
		title() {
			return this.$t('orderAuthor.editPermissionRules');
		}
	},
	watch: {
	},
	mounted() {
		this.loadInitData();
	},
	methods: {
		loadInitData() {
			this.$Dictionary.permissionType().then(list => {
				list.forEach(elem => {
					this.queryForm.queryObject.type.config.data.push({ value: elem.code, label: elem.name });
				});
				this.$convertList(list, this.PermissionTypeList, elem => {
					return true;
				});
				this.PermissionTypeList.push({ value: undefined, label: this.$t('orderAuthor.permissionPack') });
			});
		},
		formatterDate(row, porpInfo) {
			return String(row[porpInfo.property] || '').split(' ')[0];
		},
		async queryFunction(params) {
			params['isPackage'] = false;
			const resp = await getLessonPermissonPageList(params);
			this.ruleList.forEach(elem => {
				resp.data.list.forEach(item => {
					if (item.id == elem.id) {
						item.isPut = true;
					}
				});
			});

			return resp;
		},
		reloadTable() {
			if (this.queryList && this.queryList.reload) {
				this.queryList.reload();
			}
		},
		doShow() {
			this.show = true;
		},
		doClose() {
			this.show = false;
		},
		handlePut(index, row) {
			this.$emit('addRuleForm', index, row);
		},
		handlePop(index, row) {
			this.$emit('deleteForm', index, row);
		}
	}
};
</script>
