<template>
	<lay-container fluid="true" class="content-box">
		<lay-table class="row-select" v-if="dataColumn.length > 0" height="320px" :columns="dataColumn"
			:data-source="dataList" :cellStyle="cellStyle" :cellClassName="cellClassName">
			<template v-slot:toolbar v-if="dataInfoObj.FCanEdit != 2">
				<!--				<lay-button size="sm" type="primary" :class="this.isBomShow ? 'isBomShow' : 'isBomHidden'" @click="changeVisible2">查看BOM配方</lay-button>-->
				<lay-input :class="this.isShow ? 'isShow' : 'isHidden'" v-model="inputCodeValue" :readonly="true">
					<template #prepend>半成品编号：</template>
				</lay-input>
				<lay-input :class="this.isShow ? 'isShow' : 'isHidden'" v-model="inputDescValue" :readonly="true">
					<template #prepend>描述：</template>
				</lay-input>
			</template>
			<template v-if="dataList == undefined || !dataList.FID" v-slot:operator="{ data }">
				<lay-button size="xs" type="primary" @click="changeVisible2(data)">选择</lay-button>
			</template>
		</lay-table>
		<OperateLog v-if="dataInfoObj.FTeamID" ref="OperateLog" :dataInfoObj="dataInfoObj"></OperateLog>
	</lay-container>
	<template>
		<lay-button type="primary" @click="openConfirm2">询问框</lay-button>
	</template>
</template>

<style scoped>
.content-box {
	margin: 30px 10px;
	display: block;
	position: relative;
	clear: both;
	float: none;
	min-height: 740px;
}

.row-select td {
	overflow: inherit;
}

.layui-select {
	width: 100%;
}

.edit {
	color: green;
}

:deep(.edit-item .layui-input) {
	border-color: #5FB878 !important;
}

:deep(.edit-item .layui-input:hover) {
	border-color: #009688 !important;
	color: #009688;
}

.isShow {
	width: 370px;
	height: 30px;
	border: none;
}

.isHidden {
	display: none;
}

.isBomShow {}

.isBomHidden {
	display: none;
}
</style>
<script>
import {
	ref
} from 'vue';
import {
	GetMaterialInfoListByTeamId
} from "/src/api/api/view";
import {
	getBasicRoleList
} from "/src/api/api/user";
import {
	getDataCode,
	commonSave
} from "/src/api/api/common";

import {
	getInfoData,
	changeInfoData
} from "/src/api/api/materialType";

import { EditTypeList } from "/src/api/api/teamwork";

import OperateLog from "./OperateLog.vue";

export default {
	components: {
		OperateLog
	},
	setup() {
		let dataColumn = [{
			title: "ID",
			key: "FID",
			width: "160px",
			align: 'center',
			hide: false
		},
		{
			title: "试验号",
			key: "FTestCode",
			width: "160px",
			align: 'center',
			hide: false
		},
		{
			title: "物料编号",
			key: "FCode",
			width: "400px",
			align: 'center'
		},
		{
			title: "物料描述",
			key: "FDesc",
			width: "360px",
			align: 'center'
		},
		{
			title: "替代料编号",
			key: "FSuccedaneumID",
			width: "178px",
			align: 'center'
		},
		{
			title: "替代品描述",
			key: "FSuccedaneumInfo",
			width: "360px",
			align: 'center'
		},
		{
			title: "负责人",
			key: "FUserName",
			width: "160px",
			align: 'center'
		},

		{
			title: "操作",
			key: "operator",
			width: "100px",
			fixed: "right",
			customSlot: 'operator',
			align: 'center'
		}
		];


		//const dataColumn = ref([]);
		const dataList = ref([]);
		const editColumn = ref([]);
		const selectDataMap = ref(null);
		const typeList = ref([
			[],
			[]
		]);
		const userPower = ref([
			[],
			[]
		]);
		const cellStyle = function (row, column, rowIndex, columnIndex) {
			let back = column.table == "TFS_ViewMaterial" ? "background:rgb(246, 246, 246) !important;" : ""
			return back;
		}
		const cellClassName = function (row, column, rowIndex, columnIndex) {
			return column.cellClass || "";
		}
		const inputCodeValue = ref("");
		const inputDescValue = ref("");
		const visible2 = ref(false);

		

		return {
			dataColumn,
			dataList,
			editColumn,
			selectDataMap,
			typeList,
			userPower,
			cellStyle,
			cellClassName,
			inputCodeValue,
			inputDescValue,
			isShow: false,
			isBomShow: false,
			visible2

		};
	},
	props: {
		dataInfoObj: {
			type: Object,
			default: () => { },
		},
		viewDataList: {
			type: Object,
			default: () => [],
		}
	},
	mounted() {
		this.getUserPower();
	},
	methods: {
		async getUserPower() {
			if (this.dataInfoObj.FCanEdit != 2) {
				this.userPower[0] = (await getBasicRoleList({
					FRoleType: 40,
					FViewType: this.dataInfoObj.FViewType
				}) || []).map(it => parseInt(it.F2))
				this.userPower[1] = (await getBasicRoleList({
					FRoleType: 44,
					FViewType: this.dataInfoObj.FViewType
				}) || []).map(it => parseInt(it.F2))
			}
			this.initPage(layer.load(2));
		},
		async initPage(idx) {
			let _data = await GetMaterialInfoListByTeamId({
				tempId: this.dataInfoObj.FTeamID
			});
			this.dataList = _data.Data;
			setTimeout(function () {
				layer.close(idx);
			}, 500);
		},
		changeVisible2(data) {
			let $this = this;
			layer.confirm("是否选择替代料", {
				btn: [{
						text: '选择',
						callback: function (id) {
							layer.close(id);
							$this.$emit('cancelClick', true, false);
							$this.$emit("getData", data);
						}
					}, 
					{
						 text: '不选择' 
					}]
			})
			

		},
		cancelClick(isRefresh) {
			isRefresh = isRefresh == undefined ? false : isRefresh;
			this.$emit('cancelClick', isRefresh);
		},
		async _changeType(data, type) {
			if (type == 1) {
				data.FTypeID2 = -1;
			} else {
				if (data.FTypeID2) {
					let result = await getInfoData({
						"FDataID": data.FTypeID2,
						"FType": 1
					}) || null;
					if (result != null && result.FID) {
						let col7 = this.dataColumn.filter(s => s.fieldType == 7) || [];
						col7.forEach((item) => {
							if (item.table == "TFS_MaterialInfo") {
								data[item.key] = result[item.key] || data[item.key] || "";
							}
						});
					}
				}
			}
		},
		async saveBatch() {

			var arr = new Array();

			for (let i = 0; i < this.dataList.length; i++) {
				if (this.dataList[i].FTypeID1 == null || this.dataList[i].FTypeID1 == "") {
					layer.msg("请选择一级分类", { icon: 2, time: 1000 });
					return;

				}
				if (this.dataList[i].FTypeID2 == null || this.dataList[i].FTypeID2 == "") {
					layer.msg("请选择二级分类", { icon: 2, time: 1000 });
					return;

				}
				arr.push({ FMaterialID: this.dataList[i].FMaterialID, FTypeID1: this.dataList[i].FTypeID1, FTypeID2: this.dataList[i].FTypeID2 })
			}

			let arr2 = {
				taskId: this.dataInfoObj.FID,
				tempId: this.dataInfoObj.FTeamID,
				list: arr
			}


			let result = await EditTypeList(arr2);


			let idx = layer.load(2);
			let updateObj = {
				LogList: [],
				FTeamID: this.dataInfoObj['FTeamID'],
				FViewType: this.dataInfoObj.FViewType
			};
			let saveId = this.dataInfoObj.FViewType + "_" + this.dataInfoObj.FID;
			let cacheDataList = JSON.parse(localStorage.getItem('EditType' + saveId));
			this.dataList.forEach((row, index) => {
				let cache = cacheDataList[index];
				let dataObj = {};
				for (let col of this.editColumn) {
					let valTemp = row[col.key];
					if (valTemp != cache[col.key]) {
						if (!dataObj[col.table]) {
							dataObj[col.table] = {};
							dataObj[col.table].FMaterialID = row["FMaterialID"];
						}
						dataObj[col.table][col.key] = valTemp;
						if (col.key == "FTypeID1" || col.key == "FTypeID2") {
							let temps = this.typeList[col.key == "FTypeID1" ? 0 : 1] || [];
							let temp = temps.find(s => s.FID == valTemp) || null;
							valTemp = temp == null ? "" : temp.FName;
						}
						updateObj.LogList.push(col.title + "：" + (valTemp == "" ? "删除" : valTemp));
					}
				}
				for (let key in dataObj) {
					if (!updateObj[key]) updateObj[key] = [];
					updateObj[key].push(dataObj[key]);
				}
			});
			let updateLog = updateObj.LogList.join("、");
			if (updateLog != "") {
				delete updateObj.LogList
				// 发送保存请求
				if (result.Code === 200) {
					await commonSave({
						teamId: updateObj.FTeamID,
						type: this.dataInfoObj['FType'],
						desc: updateLog
					}, "OperateLog");
					let $this = this;
					//$this.initPage();
					localStorage.setItem('EditType' + saveId, JSON.stringify(this.dataList));
					setTimeout(function () {
						layer.close(idx);
						layer.msg('保存成功');
						$this.$emit('cancelClick', true, true);
						$this.$refs.OperateLog._getPageList();
					}, 500);
				}
			} else {
				layer.close(idx);
				layer.msg('您没有做任何更改')
			}
		}
	}
}
</script>
