<template>
	<div>
		<div flex style="height: 100%;">
			<base-layout title="菜单树" style="width:260px;" :bottonShow="false" :isPage="false" :mainColor="mainColor"
				ref="treeLayout" :operateButtonSwitch="false">
				<div slot="main">
					<base-tree ref="baseTree" @handleNodeClick="handleNodeClick" :menuData="menuData"></base-tree>
				</div>
			</base-layout>
			<div style="flex:1;">
				<!-- <div style="">
					<p>标准按钮</p>
					<div flex-wrap="cross:centet;height: 100px;overflow: auto;">
						<el-button v-for="(item,index) in standardList" :type="item.type?item.type:'primary'"
							size="small" style="margin-left: 5px;margin-bottom: 10px;" @click="funNewClick(item)"
							:key="index">
							{{item.menuName}}
						</el-button>
					</div>
				</div> -->
				<base-layout title="按钮权限" ref="buttonLayout" :isPage="true" @onFuncBtn="getFuncBtn"
					@pageChange="pageChange">
					<div slot="main" slot-scope="{ tableHeight }" style="height: 100%;">
						<base-table ref="customtable" :border="true" :showIndex="false" :tabLoading.sync="tabLoading"
							:tableHeight="tableHeight" :tableData="tableData" @radioChange="radioChange" :slotrow="true"
							:tableColumn="tableColumn">
						</base-table>
					</div>
				</base-layout>
			</div>
		</div>

		<!-- 按钮权限弹窗 -->
		<base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :dialogVisible.sync="settingsDialog"
			class="userDialog" title="按钮权限" width="700px" top="10vh">
			<base-form ref="customForm" :formRow="formRow" :isFunBtn="isFunBtn" :formdata="formdata" @onSubmit="getSubmit">
			</base-form>
		</base-dialog>
	</div>
</template>

<script>
import baseTable from "@/components/base/baseTable";
import baseLayout from "@/components/base/baseLayout";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import baseTree from "@/components/base/BaseMenuTree/index.vue";
import baseForm from "@/components/base/baseNewForm/index.vue";
import configData from "./configData";
import {
	GetMenuTree,
} from '@/api/apis/menuManage'
import {
	buttonGetMenBillList,
	buttonGetBillList,
	buttonSaveData,
	buttonDelData
} from '@/api/apis/buttonList'
export default {
	name: "review",
	components: {
		baseLayout,
		baseTable,
		baseDialog,
		baseTree,
		baseForm
	},
	data() {
		return {
			radioIndex: false,
			radioID: false,
			mainColor: '#f8f8f8',
			tabLoading: false,
			standardList: [{
				icon: 'el-icon-search',
				menuName: '新增'
			},],
			tableData: [],
			settingsDialog: false,
			settingCenter: "left",
			isFunBtn: true,
			formRow: configData.formRow,
			// buttonList: [{
			// 		'menuName': '新增',
			// 		icon: 'el-icon-plus'
			// 	},
			// 	{
			// 		'menuName': '编辑',
			// 		icon: 'el-icon-edit'
			// 	},
			// 	{
			// 		'menuName': '删除',
			// 		icon: 'el-icon-delete',
			// 		type: 'danger'
			// 	},
			// ],
			btnEvenName: '',
			menuData: [],
			formdata: {},
			pageModel: {
				limit: 20,
				menuId: '',
				page: 1,
				Sequence: "",
				SequenceName: ""
			}
		}
	},
	computed: {
		// 表头配置
		tableColumn() {
			return configData.tableColumnJson
		},
	},
	mounted() {
		this.initPage()
	},
	methods: {
		initPage() {
			this.getMenuData()
			this.getTableData()
		},
		async getMenuData() {
			let res = await GetMenuTree({})
			if (res.code == 1) {
				let arr = JSON.parse(res.data[0])
				this.menuData = JSON.parse(res.data[0])
			}
		},
		// 树状图点击事件
		handleNodeClick(data) {
			this.pageModel.menuId = data.id
			this.pageModel.page = 1
			this.RefreshTable()
		},
		// 刷新table
		RefreshTable() {
			this.radioID = false
			this.radioIndex = false
			this.$nextTick(() => {
				this.$refs.buttonLayout.pageClear()
				this.$refs.customtable.clearRadioIndex()
			})
			this.getTableData()
		},
		pageChange(model) {
			this.pageModel.page = model.page
			this.pageModel.limit = model.limit
			this.getTableData()
		},
		// 单选
		radioChange(val) {
			this.radioIndex = val.index
			this.radioID = val.id
		},
		getTableData() {
			this.tabLoading = true
			let params = {
				...this.pageModel
			}
			this.tabLoading = true
			this.tableData = []
			buttonGetBillList(params).then(res => {
				if (res.code == 1) {
					this.tableData = res.data[1]
					this.$nextTick(() => {
						this.$refs.buttonLayout.setPageTotal(res.data[0])
					})
				}
				this.tabLoading = false
			})
			this.tabLoading = false
		},
		btnadd() {
			console.log("添加")
		},
		test() {
			console.log("测试")
		},

		// 按钮点击事件
		getFuncBtn(btnEven) {
			this.btnEvenName = btnEven.menuName
			// let ftnFunction = 'test'
			// this[ftnFunction]()
			if (btnEven.menuName == '新增') {
				if (!this.pageModel.menuId) {
					this.$vmNews('请选择菜单')
					return
				}
				// this.$refs.customForm.resetForm()
				this.settingsDialog = true
				this.$nextTick(() => {
					this.$refs.customForm.choiceAssignment({})
				})

			}
			if (btnEven.menuName == "编辑") {
				if (this.radioID === false) {
					this.$vmNews('请选择一条数据')
					return
				}
				this.settingsDialog = true
				this.formdata = this.tableData[this.radioIndex]
				this.$nextTick(() => {
					this.$refs.customForm.choiceAssignment(this.tableData[this.radioIndex])
				})
			}
			if (btnEven.menuName == '删除') {
				if (this.radioID === false) {
					this.$vmNews('请选择一条数据')
					return
				}
				this.$confirm('确定删除吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let params = {
						id: this.radioID
					}
					buttonDelData(params).then(res => {
						if (res.code == 1) {
							this.$vmNews("删除成功", 'success')
							this.pageModel.page = 1
							this.RefreshTable()
						}
					})
				}).catch(() => { });

			}

		},

		//表单提交
		getSubmit(data) {
			let params = {
				...data
			}
			if (this.btnEvenName == '编辑') {
				delete params.createTime
				delete params.index
			} else {
				params.id = 0
				params.MenuID = this.pageModel.menuId
			}
			buttonSaveData({
				dataMain: params
			}).then(res => {
				if (res.code == 1) {
					this.$vmNews("保存成功", 'success')
					this.pageModel.page = 1
					this.RefreshTable()
					this.settingsDialog = false
				}
			})
		},
		funNewClick(item) {
			// this.$emit('onFuncBtn', item);
		},
	},

}
</script>

<style></style>