<template>
	<lay-container fluid="true" style="padding: 10px">
		<lay-row space="10">
			<lay-col span="24">
				<lay-card>
					<lay-tab type="card" v-model="cardCurrent" @change="_changeCard">
						<lay-tab-item title="下拉框配置" id="1">
							<lay-table :height="dataHeight" :columns="dataColumn[0]" id="FID"
								:data-source="dataList[0]">
								<template v-slot:FState="{ data }">
									<lay-switch v-if="data.FType>0" v-model="data.FState" @change="_changeState(data)">
									</lay-switch>
								</template>
								<template v-slot:operator="{ data }">
									<lay-button v-if="data.FType>0" size="xs" type="primary" @click="_changeData(data)">
										编辑</lay-button>
									<lay-button v-if="data.FType>0" size="xs" type="danger"
										@click="_deleteData(data.FID)">删除</lay-button>
									<lay-button v-else size="xs" type="normal" @click="_addChildData(0,data.FType)">
										新增</lay-button>
								</template>
							</lay-table>
						</lay-tab-item>
						<lay-tab-item title="枚举值配置" id="2">
							<lay-table :height="dataHeight" :columns="dataColumn[1]" id="FID"
								:data-source="dataList[1]">
							</lay-table>
						</lay-tab-item>
					</lay-tab>
				</lay-card>
			</lay-col>
		</lay-row>
		<lay-layer area="600px" v-model="showEditBox[0]" title="下拉框配置">
			<EditDataCode :objInfoObj="objInfoObj" @cancelClick="cancelClick"></EditDataCode>
		</lay-layer>
	</lay-container>

	<!-- 	<lay-tab-item title="系统值配置" id="3">
		<lay-table :height="dataHeight" :columns="dataColumn[2]" id="FID"
			:data-source="dataList[2]">
			<template v-slot:operator="{ data }">
				<lay-button size="xs" type="danger" @click="_seeData(data)">查看</lay-button>
			</template>
		</lay-table>
	</lay-tab-item>
	 -->
</template>
<script>
	import {
		ref,
		watch
	} from "vue";
	import {
		getBasicList,
		getDataCode,
		getConfigList,
		getConfigValue,
		stateDataCode,
		deleteDataCode
	} from "/src/api/api/common";
	import '@layui/layui-vue/es/checkbox/index.css';
	import EditDataCode from './components/EditDataCode.vue';

	export default {
		components: {
			EditDataCode
		},
		setup() {
			const cardCurrent = ref("1");
			const dataHeight = ref("");
			const objInfoObj = ref({});
			const showEditBox = ref([false, false, false]);
			const dataList = ref([
				[],
				[],
				[]
			]);
			const dataColumn = [];
			let colStr =
				'[{"title":"名称","key":"FName","width":"200px","align":"left"},{"title":"排序","key":"FOrder","width":"50px"},{"title":"数据值","key":"FValue","width":"200px"},{"title":"备注","key":"FRemark","width":"200px"},{"title":"状态","key":"FState","customSlot":"FState","width":"70px"},{"title":"备用值1","key":"F1"},{"title":"备用值2","key":"F2"},{"title":"备用值3","key":"F3"},{"title":"备用值4","key":"F4"},{"title":"备用值5","key":"F5"},{"title":"操作","key":"operator","customSlot":"operator","width":"110px"}]';
			dataColumn.push(JSON.parse(colStr));
			dataColumn.push(JSON.parse(colStr));
			//dataColumn.push(JSON.parse(colStr));
			let last = dataColumn[0].pop();
			dataColumn[0].pop();
			dataColumn[0].pop();
			dataColumn[0].push(last);
			dataColumn[1] = dataColumn[1].filter(s => {
				s.width = "auto";
				return !s.customSlot
			});
			dataColumn[1][1].width = "50px";
			dataColumn[1][2].width = "80px";

			dataColumn.push([{
				title: "名称",
				key: "FName",
			}, {
				title: "数据键",
				key: "FKey"
			}, {
				title: "操作",
				key: "operator",
				customSlot: "operator",
				width: "50px"
			}]);
			dataColumn.forEach((item) => {
				item.forEach((child) => {
					if (!child.align) child.align = "center";
					if (!child.width) child.width = "80px";
				});
			});
			return {
				cardCurrent,
				dataHeight,
				dataList,
				dataColumn,
				showEditBox,
				objInfoObj
			};
		},
		mounted() {
			let height = document.documentElement.clientHeight || document.body.clientHeight;
			this.dataHeight = (height - 270) + "px";
			this._changeCard();
		},
		methods: {
			_changeCard() {
				if (this.cardCurrent == 1) {
					if (this.dataList[0].length == 0) this._getSelectConfig();
				} else if (this.cardCurrent == 2) {
					if (this.dataList[1].length == 0) this._getEnumConfig();
				} else if (this.cardCurrent == 3) {
					if (this.dataList[2].length == 0) this._getTeamViewList();
				}
			},
			async _getSelectConfig() {
				let result = await getDataCode({});
				let dataList = result.filter(s => {
					s.FState = s.FState == 1;
					s.indentSize = "30px";
					return s.FType < 0;
				}) || [];
				dataList.forEach((item) => {
					item.children = result.filter(s => {
						s.FState = s.FState == 1;
						s.indentSize = "30px";
						return s.FType == Math.abs(item.FType)
					}) || []
				});
				this.dataList[0] = dataList;
			},
			async _getEnumConfig() {
				let result = await getBasicList(-1);
				let dataList = result.filter(s => {
					return s.FType < 0;
				}) || [];
				dataList.forEach((item) => {
					item.children = result.filter(s => {
						return s.FType == Math.abs(item.FType)
					}) || [];
				});
				this.dataList[1] = dataList;
			},
			async _getConfigList() {
				this.dataList[2] = await getConfigList();
			},
			async _getTeamViewList() {

			},
			async _changeState(data) {
				await stateDataCode(data.FID);
			},
			_addChildData(index, type) {
				this.objInfoObj = {
					FType: Math.abs(type)
				};
				index = index || 0;
				this.showEditBox[index] = true;
			},
			_changeData(data, index) {
				this.objInfoObj = data || {};
				index = index || 0;
				this.showEditBox[index] = true;
			},
			_deleteData(dataId) {
				let $this = this;
				layer.confirm("你确定要删除此下拉框数据吗？", {
					btn: [{
							text: '确定',
							callback: function(id) {
								$this.__deleteData(id, dataId);
							}
						},
						{
							text: '取消',
							callback: function(id) {
								layer.close(id);
							}
						}
					]
				});
			},
			async __deleteData(layId, dataId) {
				await deleteDataCode(dataId);
				layer.close(layId);
				this.cancelClick(true, 0);
			},
			cancelClick(isRefresh, index) {
				index = index || 0;
				this.showEditBox[index] = false;
				if (isRefresh) {
					this.dataList[index] = [];
					this._changeCard();
				}
			},
			async _seeData(data) {
				let result = await getConfigValue(data.FID);
				layer.confirm(result, {
					title: "数据值"
				});
			}
		}
	}
</script>
