<template>
	<el-card shadow="never" class="aui-card--fill">
		<div class="mod-sys__dict">
			<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
				<el-form-item>
					<el-input v-model="dataForm.dictValue" :placeholder="$t('dict.dictValue')" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="dataForm.dictLabel" :placeholder="$t('dict.dictLabel')" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="getDataList()">{{ $t('query') }}</el-button>
				</el-form-item>
				<el-form-item>
					<el-button v-if="$hasPermission('sys:dict:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
				</el-form-item>
				<el-form-item>
					<el-button v-if="$hasPermission('sys:dict:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
				</el-form-item>
			</el-form>
			<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle" style="width: 100%;">
				<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
				<el-table-column prop="dictValue" :label="$t('dict.dictValue')" header-align="center" align="center"></el-table-column>
				<el-table-column prop="dictLabel" :label="$t('dict.dictLabel')" header-align="center" align="center"></el-table-column>
				<el-table-column prop="sort" :label="$t('dict.sort')" sortable="custom" header-align="center" align="center"></el-table-column>
				<el-table-column prop="remark" :label="$t('dict.remark')" header-align="center" align="center"></el-table-column>
				<el-table-column prop="createDate" :label="$t('dict.createDate')" sortable="custom" header-align="center" align="center" width="180"></el-table-column>
				<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
					<template slot-scope="scope">
						<el-button v-if="$hasPermission('sys:dict:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
						<el-button v-if="$hasPermission('sys:dict:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:current-page="page"
				:page-sizes="[10, 20, 50, 100]"
				:page-size="limit"
				:total="total"
				layout="total, sizes, prev, pager, next, jumper"
				@size-change="pageSizeChangeHandle"
				@current-change="pageCurrentChangeHandle"
			>
			</el-pagination>
			<!-- 弹窗, 新增 / 修改 -->
			<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
		</div>
	</el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './dict-data-add-or-update'
export default {
	mixins: [mixinViewModule],
	data() {
		return {
			mixinViewModuleOptions: {
				createdIsNeed: false,
				getDataListURL: '/sys/dict/data/page',
				getDataListIsPage: true,
				deleteURL: '/sys/dict/data',
				deleteIsBatch: true
			},
			dataForm: {
				dictTypeId: '0',
				dictLabel: '',
				dictValue: ''
			}
		}
	},
	components: {
		AddOrUpdate
	},
	created() {
		this.dataForm.dictTypeId = this.$route.params.dictTypeId || '0'
		this.getDataList()
	},
	methods: {
		// destroy dialog
		handleDestroyDialog() {
			setTimeout(() => {
				this.addOrUpdateVisible= false
			}, /** after dialog animated */ 200);
		},
		// 新增 / 修改
		addOrUpdateHandle(id) {
			this.addOrUpdateVisible = true
			this.$nextTick(() => {
				this.$refs.addOrUpdate.dataForm.id = id
				this.$refs.addOrUpdate.dataForm.dictTypeId = this.dataForm.dictTypeId
				this.$refs.addOrUpdate.init()
			})
		}
	}
}
</script>
