<template>
  <div>
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
  </div>
</template>

<script>
import { UrlConfig } from '@/router/index';
import { getSkinCodePageList, delSkinCode } from '@/api/management/mapskin';
import { getSkinCodeList } from '@/api/management/mapskin';

export default {
	name: 'SkinCode',
	data() {
		return {
			prdTypeList: [],
			skinCodeList: [],
			pagerConfig: {
				pageSize: 'pageSize',
				pageIndex: 'pageNum'
			},
			queryForm: {
				labelWidth: '80px',
				reset: true,
				queryObject: {
					name: {
						type: 'text',
						label: this.$t('map.skinDesignation')
					},
					code: {
						type: 'text',
						label: this.$t('map.skinCoding')
					}
				}
			},
			queryList: {
				query: getSkinCodePageList,
				selectCheckShow: false,
				indexShow: true,
				columns: [
					{
						title: this.$t('map.skinCoding'),
						prop: 'code'
					},
					{
						title: this.$t('map.skinDesignation'),
						prop: 'name'
					},
					{
						title: this.$t('map.coordinatesOrigin'),
						prop: 'origin',
						type: 'tag',
						columnValue: (row) => { return `(${row.origin.x}, ${row.origin.y})`; },
						tagType: () => { return ''; }
					},
					{
						title: this.$t('map.scalingColon'),
						prop: 'scaling'
					},
					{
						type: 'button',
						title: this.$t('global.operate'),
						width: '250',
						buttons: [
							{
								name: this.$t('global.edit'),
								handleClick: this.handleEdit,
								type: ''
							},
							{
								name: this.$t('global.delete'),
								handleClick: this.handleDelete,
								type: 'danger'
							}
						]
					}
				],
				actions: [
					{ text: this.$t('global.add'), handler: this.handleAdd }
				]
			}
		};
	},
	created() {
		this.loadInitData();
	},
	methods: {
		loadInitData() {
			this.prdTypeList = [];
			this.$Dictionary.productPostType().then(list => {
				this.prdTypeList = list;
			});

			this.skinCodeList = [];
			getSkinCodeList().then(response => {
				this.skinCodeList = response.data;
			});
		},
		handleAdd() {
			this.$router.push(`${UrlConfig.map.skinCodeDraft}/add/null`);
		},
		handleEdit(index, row) {
			this.$router.push(`${UrlConfig.map.skinCodeDraft}/edit/${row.id}`);
		},
		handleDelete(index, row) {
			this.$confirm(this.$t('tip.skinDeleteConfirmation'), this.$t('tip.hint'), {
				confirmButtonText: this.$t('tip.confirm'),
				cancelButtonText: this.$t('tip.cancel'),
				type: 'warning'
			}).then(() => {
				delSkinCode(row.id).then(() => {
					this.$message.success(this.$t('tip.skinDeleteSuccessfully'),);
				}).catch(() => {
					this.$messageBox(this.$t('tip.skinDeleteFailed'));
				});
			}).catch(() => {
			});
		},
		reloadTable() {
			this.queryList.reload();
		}
	}
};
</script>
