<template>
	<el-container>
		<el-aside :width="(aside.width || 160)+'px'" v-if="aside.items.length>0">
			<el-header>
				<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
			</el-header>
			<el-main class="nopadding">
				<el-tree ref="group" class="menu" :node-key="aside.key || 'id'" :data="aside.items" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
			</el-main>
		</el-aside>
		<el-container>
			<el-header class="header-tabs" v-if="tabs.length>0">
				<el-tabs type="card" v-model="search[tabskey]" @tab-change="tabChange">
					<el-tab-pane v-for="item in tabs" :key="item.value" :label="item.label" :name="item.value"> </el-tab-pane>
				</el-tabs>
			</el-header>
			<el-header v-if="operation.plus || operation.batchdeletion || filter.length>0">
				<div class="left-panel">
					<el-button v-if="operation.plus" type="primary" icon="el-icon-plus" @click="plus"></el-button>
					<el-button v-if="operation.batchdeletion" type="danger" @click="batchdeletion" plain icon="el-icon-delete"></el-button>
				</div>
				<div class="right-panel" v-if="filter.length>0 || stat.length>0">
					<el-button v-for="(s,index) in stat" :key="index" @click="openStat(s)" v-bind="s">{{ s.label }}</el-button>
					<xFilterBar v-if="filter.length>0" v-model="search" :filterName="$route.meta.tablename" :options="filter" @filterChange="filterChange">
					</xFilterBar>
				</div>
			</el-header>

			<el-header style="height:120px;" v-if="typeof chartoption === 'object' && Object.keys(chartoption).length > 0">
				<xEcharts height="100%" :option="chartoption"></xEcharts>
			</el-header>

			<el-main class="nopadding">
				<xTable 
					ref="table" 
					:tableColumn="column" 
					:name="tablename" 
					:params="search" 
					:api="api" 
					:row-key="key" 
					@selection-change="selectionChange" 
					:remoteSort="true" 
					:remoteFilter="true" 
					stripe>
					<el-table-column v-if="isselection" type="selection" width="50"></el-table-column>
					<el-table-column :label="operation.label || '操作'" :width="operation.width || 124" :fixed="operation.fixed || 'right'" :align="operation.align || 'left'" v-if="operation.edit || operation.delete">
						<template #default="scope">
							<el-button-group>
								<el-button v-if="operation.edit" :type="operation.edit.type || 'primary'" :size="operation.edit.size || 'small'" @click="operationEdit(scope.row, scope.$index)">{{ operation.edit.label || '编辑' }}</el-button>
								<el-popconfirm  v-if="operation.delete" :title="operation.delete.title || '确定删除吗？'" @confirm="operationDelete(scope.row, scope.$index)">
									<template #reference>
										<el-button :type="operation.delete.type || 'info'" :size="operation.delete.size || 'small'">{{ operation.delete.label || '删除' }}</el-button>
									</template>
								</el-popconfirm>
							</el-button-group>
						</template>
					</el-table-column>
				</xTable>
			</el-main>
		</el-container> 
	</el-container>
	<x-update v-if="dialog.save" :column="column" :name="key" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></x-update>
	<x-stat v-if="dialog.stat" ref="xstatdialog" @closed="dialog.stat=false"></x-stat>
</template>

<script>
	import xStat from './stat'
	import xFilterBar from '@/components/xFilterBar';
	import xEcharts from '@/components/xEcharts'
	export default {
		name: 'propertyAuth',
		components: {
			xStat,
			xEcharts,
			xFilterBar
		},
		props: {
			name: { type: String, default: "" },
		},
		data() {
			return {
				dialog: {
					save: false,
					stat: false,
				},
				isselection:true,
				selection: [],
				column: [],
				aside: {
					items:[]
				},
				filter: [],
				api: '',
				operation:{},
				key:'id',
				search: {},
				tabs: [
					// {label:'所有', value:0},
				],
				stat:[],
				chartoption: {},
				tablename:  this.$route.meta.tablename,
				groupFilterText:'',
				tabskey:'',
				tabsdefaultvalue:''
			}
		},
		mounted() {
			if (this.name) {
				this.tablename = this.name || this.$route.meta.tablename;
			}
			//判断是否开启自定义列
			if(this.tablename) {
				this.$api.system.table.get(this.tablename, { cache: this.$route.meta.tablecache || 0 }).then((res) => {
				    if (res.code == 200) {
				    	Object.assign(this.$data, res.data);

				    	if (res.data.tabsdefaultvalue && res.data.tabskey) {
				    		this.search[res.data.tabskey] = res.data.tabsdefaultvalue
				    	}

				    }
				});
			}
		},
		computed: {
			filterObj(){
				const obj = []
				this.filter.forEach((item) => {
					if (item.component) {
						obj.push({
							name:item.value,
							label:item.label,
							component:item.component,
							options:item.options,
						})
					}
				})
				return obj
			}
		},
		watch: {
			groupFilterText(val) {
				this.$refs.group.filter(val);
			}
		},
		methods: {
			//树过滤
			groupFilterNode(value, data){
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			//树点击事件
			groupClick(data){
				this.search[ this.aside.searchkey || 'groupid' ] = data[ this.aside.key || 'id' ];
				this.$refs.table.reload(this.search)
			},
			// 筛选回调
			filterChange(data){
				var info = Object.assign({},this.search, data)
				this.$refs.table.reload(info)
			},
			//标签切换
			tabChange(){
				this.$refs.table.reload(this.search)
			},
			//本地更新数据
			handleSuccess(data, mode, message){

				

				if(mode=='edit'){
					if (data) {
						this.$refs.table.tableData.filter(item => item[this.key]===data[this.key] ).forEach(item => {
							Object.assign(item, data, data)
						})
					}else{
						this.$refs.table.refresh()
					}
				}else{
					if (data) {
						this.$refs.table.tableData.unshift(data)
					}else{
						this.$refs.table.reload({})
					}
				}
				this.$message.success(message || "操作成功")
				return;
			},
			//增加
			plus(){
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open('plus').getComponentType(this.operation.plus.component).setData({}).setConfig(this.operation.plus)
				})
			},
			//编辑
			operationEdit(row){
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open('edit').getComponentType(this.operation.edit.component).setData(row).setConfig(this.operation.edit)
				})
			},
			//打开统计
			openStat(o){
				this.dialog.stat = true
				this.$nextTick(() => {
					this.$refs.xstatdialog.open().setData(o);
				})
			},
			//删除
			async operationDelete(row, index){
				var res = await this.$http.post(this.operation.delete.url,  {[this.key]: row[this.key], index: index})
				if (res.code == 200 ) {
					this.$refs.table.tableData.splice(index, 1);
					return;
				}
				this.$alert(res.message, "提示", {type: 'error'});
			},
			//批量删除
			async batchdeletion(){

				if (this.selection.length==0) {
					this.$alert('请勾选你要删除的项目', "提示", {type: 'error'});
					return;
				}


				if (!this.operation.batchdeletion.url) {
					this.$alert('没有批量删除相关配置', "提示", {type: 'error'});
					return;
				}

				this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
					type: 'warning'
				}).then(() => {
					const loading = this.$loading();
					const ids = this.selection.map(obj => obj[this.key]);

					this.$http.post(this.operation.batchdeletion.url,  {[this.key]: ids}).then((res) => {
						if (res.code == 200 ) {
							this.$refs.table.tableData.forEach((itemI, indexI) => {
								if (ids.includes(itemI[this.key])) {
									this.$refs.table.tableData.splice(indexI, 1)
								}
							})
							this.$message.success(res.message || "操作成功")
							return;
						}
						this.$alert(res.message, "提示", {type: 'error'});
						loading.close();
		            })
				}).catch(() => {

				})
			},
			//表格选择后回调事件
			selectionChange(selection){
				this.selection = selection;
			},
		}
	}
</script>
<style>
</style>
