<template>
	<lay-container fluid="true"
				   :style="'padding:10px;height:'+(dataInfoObj!=undefined?(dataInfoObj.FHeight+'px'):'auto')">
		<lay-row space="10">
			<lay-col span="24">
				<lay-card>
					<lay-form :model="searchObj" class="search-box">
						<lay-row class="search-items">
							<lay-form-item label="销售号" prop="FSaleCode">
								<lay-input v-model="searchObj.FSaleCode"></lay-input>
							</lay-form-item>
							<lay-form-item label="当前流程" prop="FType">
								<lay-select v-model="searchObj.FType">
									<lay-select-option v-for="(tIdv,tIdx) in typeList" :key="tIdx" :value="tIdv.FValue"
													   :label="tIdv.FName"></lay-select-option>
								</lay-select>
							</lay-form-item>
							<lay-form-item v-if="postData.FState!=99" label="事项状态" prop="FState">
								<lay-select v-model="searchObj.FState">
									<lay-select-option v-for="(tv,tx) in stateList" :key="tx" :value="tv.id"
													   :label="tv.name"></lay-select-option>
								</lay-select>
							</lay-form-item>
							<lay-form-item label="发起日期" prop="FDateRange">
								<lay-date-picker v-model="searchObj.FDateRange" range placeholder="type : date">
								</lay-date-picker>
							</lay-form-item>
						</lay-row>
						<lay-form-item class="search-btn">
							<lay-button size="sm" type="primary" @click="_clickSearch">搜索</lay-button>
							<lay-button size="sm" @click="_clickReset">重置</lay-button>
						</lay-form-item>
					</lay-form>
					<lay-table v-if="hasLoaded" :columns="dataColumn" id="id" :dataSource="dataList"
							   v-model:selectedKeys="selectedKeys" :checkbox="checkbox" :default-toolbar="defaultToolbar"
							   :page="dataList.length>0?pageInfo:null" @change="changePage">
						<template v-slot:toolbar>
							<lay-button size="sm" @click="_getPageList(false,true)">刷新</lay-button>
						</template>
						<template v-slot:FStateName="{ data }">
							<span v-if="data.FStateName=='已完成'" style="color:#5FB878">{{ data.FStateName }}</span>
							<span v-else style="color:#1E9FFF">{{ data.FStateName }}</span>
						</template>
						<template v-if="dataInfoObj == undefined|| !dataInfoObj.FID" v-slot:operator="{ data }">
							<lay-button size="xs" type="primary" @click="_clickSetInfo(data,1)">操作</lay-button>
						</template>
					</lay-table>
				</lay-card>
			</lay-col>
		</lay-row>
		<lay-layer :area="modelArea[1]" v-model="showEditBox[1]" :title="objInfoObj.FName">
			<AddTerm v-if="showEditBox[1]" :dataInfoObj="objInfoObj" @cancelClick="cancelClick"></AddTerm>
		</lay-layer>
		<lay-layer :area="modelArea[2]" v-model="showEditBox[2]" :title="objInfoObj.FName">
			<BOMDownload v-if="showEditBox[2]" :dataInfoObj="objInfoObj" @cancelClick="cancelClick"></BOMDownload>
		</lay-layer>
		<lay-layer :area="modelArea[3]" v-model="showEditBox[3]" :title="objInfoObj.FName">
			<EditView v-if="showEditBox[3]" :dataInfoObj="objInfoObj" @cancelClick="cancelClick"></EditView>
		</lay-layer>
		<lay-layer :area="modelArea[4]" v-model="showEditBox[4]" :title="objInfoObj.FName">
			<AddPackage v-if="showEditBox[4]" :data-info-obj="objInfoObj" @cancelClick="cancelClick"></AddPackage>
		</lay-layer>
		<lay-layer :area="modelArea[5]" v-model="showEditBox[5]" :title="objInfoObj.FName">
			<EditGroup v-if="showEditBox[5]" :data-info-obj="objInfoObj" @cancelClick="cancelClick"></EditGroup>
		</lay-layer>
		<lay-layer :area="modelArea[6]" v-model="showEditBox[6]" :title="objInfoObj.FName">
			<SureView v-if="showEditBox[6]" :data-info-obj="objInfoObj" @cancelClick="cancelClick"></SureView>
		</lay-layer>
		<lay-layer :area="modelArea[7]" v-model="showEditBox[7]" :title="objInfoObj.FName">
			<SureTeam v-if="showEditBox[7]" :data-info-obj="objInfoObj" :objInfoObj="objInfoObj" @cancelClick="cancelClick"></SureTeam>
		</lay-layer>
		<lay-layer :area="modelArea[8]" v-model="showEditBox[8]" :title="objInfoObj.FName">
			<SupplyPackage v-if="showEditBox[8]" :data-info-obj="objInfoObj" @cancelClick="cancelClick"></SupplyPackage>
		</lay-layer>
		<lay-layer :area="modelArea[9]" v-model="showEditBox[9]" :title="objInfoObj.FName">
			<EditType v-if="showEditBox[9]" :dataInfoObj="objInfoObj" @cancelClick="cancelClick"></EditType>
		</lay-layer>
		<lay-layer :area="modelArea[10]" v-model="showEditBox[10]" :title="objInfoObj.FName">
			<EditFSuccedaneum v-if="showEditBox[10]" @getData="getData" :dataInfoObj="objInfoObj" @cancelClick="cancelClick"></EditFSuccedaneum>
		</lay-layer>
		<lay-layer  :area="modelArea[11]" v-model="showEditBox[11]" :title="objInfoObj.FName">
			<EditMaterial  v-if="showEditBox[11]" @getData="getData" @showEditMaterial="showEditMaterial" :MaterialModel="MaterialModel" :dataInfoObj="objInfoObj" @cancelClick="cancelClick"></EditMaterial>
		</lay-layer>
	</lay-container>
</template>
<script>
	import {
		ref,
		watch
	} from "vue";
	import {
		getBasicList,
		getPageList
	} from "/src/api/api/common";
	import AddTerm from '../Team/components/AddTerm.vue';
	import BOMDownload from "./components/BOMDownload.vue";
	import EditView from "./components/EditView.vue";
	import EditType from "./components/EditType.vue";
	import AddPackage from "./components/AddPackage.vue";
	import SureView from "./components/SureView.vue";
	import EditGroup from "./components/EditGroup.vue";
	import SureTeam from "./components/SureTeam.vue";
	import SupplyPackage from "./components/SupplyPackage.vue";
	import EditFSuccedaneum from "./components/EditFSuccedaneum.vue";
	import EditMaterial from "./components/EditMaterial.vue";
	import '@layui/layui-vue/es/checkbox/index.css';
	import '@layui/layui-vue/es/radio/index.css';

	export default {
		components: {
			AddTerm,
			BOMDownload,
			EditView,
			EditType,
			AddPackage,
			SureView,
			EditGroup,
			SureTeam,
			SupplyPackage,
			EditFSuccedaneum,
			EditMaterial
		},
		setup() {
			let dataColumn = [{
				title: "销售号",
				key: "FSaleCode",
				width: "300px",
				align: 'center',
				hide: false
			},
				{
					title: "MDM编码",
					key: "FMdmCode",
					width: "160px",
					align: 'center',
					hide: false
				},
				{
					title: "试验号",
					key: "FTestCode",
					width: "160px",
					align: 'center',
					hide: false
				},
				{
					title: "任务来源",
					key: "FDesc",
					width: "400px",
					align: 'center'
				},
				{
					title: "当前流程",
					key: "FName",
					width: "180px",
					align: 'center'
				},
				{
					title: "发起时间",
					key: "FAddDate",
					width: "178px",
					align: 'center'
				},
				{
					title: "事项状态",
					key: "FStateName",
					width: "98px",
					align: 'center',
					customSlot: 'FStateName',
				},
				{
					title: "负责人",
					key: "FUserName",
					width: "160px",
					align: 'center'
				},
				{
					title: "完成时间",
					key: "FFinishDate",
					width: "178px",
					align: 'center',
					hide: true
				},
				{
					title: "操作",
					key: "operator",
					width: "100px",
					fixed: "right",
					customSlot: 'operator',
					align: 'center'
				}
			];
			const selectedKeys = ref(["1"]);
			const checkbox = ref(false);
			const defaultToolbar = ref(true);
			const pageInfo = ref({
				total: 0,
				limit: 10,
				current: 1
			});
			const dataList = ref([]);
			const typeList = ref([]);
			const searchObj = ref({});
			const postData = ref({});
			const MaterialModel= ref({});
			const showEditBox = ref([false, false, false, false, false, false, false, false, false, false, false, false]);
			const modelArea = ref(["70%", "70%", "70%", "86%", "70%", "70%", "70%", "70%", "700px", "70%", "70%","70%"]);
			const objInfoObj = ref({});
			const editType = ref(1);
			const stateList = ref([{
				id: 1,
				name: "进行中"
			}, {
				id: 2,
				name: "已完成"
			}]);
			const hasLoaded = ref(false);
			const dataItem=ref([]);
			return {
				selectedKeys,
				checkbox,
				defaultToolbar,
				dataColumn,
				dataList,
				pageInfo,
				searchObj,
				postData,
				typeList,
				showEditBox,
				modelArea,
				objInfoObj,
				editType,
				stateList,
				hasLoaded,
				MaterialModel,
				dataItem
			};
		},
		props: {
			dataInfoObj: {
				type: Object,
				default: () => {},
			},
			
			pageTypeObj: {
				type: Number,
				default: () => 1,
			}
		},
		mounted() {
			if (this.dataInfoObj) {
				this.dataColumn.pop();
				this.dataColumn[0].hide = true;
				this.dataColumn[1].hide = true;
				this.dataColumn[2].hide = true;
				this.dataColumn[7].hide = false;
			}
			this._getTypeList();
			this._getPageList(true);
		},
		methods: {
			changePage(obj) {
				this.pageInfo.current = obj.current;
				this.pageInfo.limit = obj.limit;
				this._getPageList();
			},
			cancelClick(isRefresh, onlyRefresh) {
				if (isRefresh) {
					this._getPageList(true);
				}
				if (onlyRefresh) return false;
				for (let i = 0; i < this.showEditBox.length; i++) {
					this.showEditBox[i] = false;
				}
			},
			async _getTypeList() {
				this.typeList = await getBasicList(33) || [];
			},
			//分页列表
			async _getPageList(isFirst, showOk) {
				//this.dataList = [];
				this.pageInfo.total = 0;
				if (isFirst) {
					this.pageInfo.current = 1;
					this.pageInfo.total = 0;
				}
				if (this.dataInfoObj && this.dataInfoObj.FID) {
					this.postData.FTeamID = this.dataInfoObj.FID;
					this.postData.FIsUser = false;
				}
				if (this.pageTypeObj && this.pageTypeObj == 2) {
					this.postData.FState = 99;
				}
				this.postData.FPageIndex = this.pageInfo.current;
				this.postData.FPageSize = this.pageInfo.limit;
				let result = await getPageList(this.postData, "Task");
				result.Data.List = result.Data.List || [];
				result.Data.List.forEach((item) => {
					let type = this.typeList.find(s => s.FValue === item.FType);
					item.FTypeName = type == null ? "" : type.FName;
					let state = this.stateList.find(s => s.id === item.FState)
					item.FStateName = state == null ? "" : state.name;
					item.FAddDate = item.FAddDate == null ? "" : this.dateFormat(item.FAddDate);
					item.FEditDate = item.FEditDate == null ? "" : this.dateFormat(item.FEditDate);
					item.FFinishDate = item.FFinishDate == null ? "" : this.dateFormat(item.FFinishDate);
				});
				this.pageInfo.total = result.Data.Total || 0;
				this.dataList = result.Data.List;
				this.hasLoaded = true;
			},
			//日期处理
			dateFormat(dataStr) {
				return dataStr.replace('T', ' ').split('.')[0];
			},
			getData(data){
 				this.MaterialModel = data;
				for (let i = 0; i < this.showEditBox.length; i++) {
					this.showEditBox[i] = false;
				}
				this.showEditBox[11] = true;
				this.editType = 1;

			},
			showEditMaterial(){
				this._clickSetInfo(this.dataItem,1);
			},
			_clickSetInfo(data, type) {
				
				for (let i = 0; i < this.showEditBox.length; i++) {
					this.showEditBox[i] = false;
				}
				if (data.FType == 1) {
					data.FBoxType = 1; //配方选择
				} else if (data.FType == 2) {
					data.FBoxType = 2; //BOM下载
				} else if (data.FType == 9 || data.FType == 10) {
					data.FBoxType = 4; //新包材新增、新子项包材申请
				} else if ((data.FType >= 3 && data.FType <= 7) || data.FType == 11) {
					data.FBoxType = 3; //视图编辑
				} else if (data.FType == 8) {
					data.FBoxType = 5; //组编号申请
				} else if (data.FType == 12) {
					data.FBoxType = 6; //成品视图物料组复核
				} else if (data.FType == 13) {
					data.FBoxType = 7; //流程确认完成
				} else if (data.FType == 14) {
					data.FBoxType = 8; //补充包材规格
				} else if (data.FType == 15) {
					data.FBoxType = 9; //物料选择类型
				}else if(data.FType==16){
					this.dataItem=data;
					data.FBoxType = 10; //替代料确认
				}else {
					return layer.msg("未知事项类型");
				}
				this.objInfoObj = data;
				this.editType = type;
				this.showEditBox[data.FBoxType] = true;
			},
			//检索-检索
			_clickSearch() {
				this.postData = {};
				for (let key in this.searchObj) {
					let val = this.searchObj[key];
					if (val != null && val !== "") this.postData[key] = val;
				}
				this._getPageList(true);
			},
			//检索-重置
			_clickReset() {
				this.searchObj = {};
				this._clickSearch();
			}
		}
	}
</script>
