<template>
	<el-container>
		<el-header>
			<div class="left-panel"></div>
			<div class="right-panel">
				<xtSelect
				 	v-if="activeName=='shengchan'"
					:apiObj="apiObj"
					v-model="query.user_name"
					:valueField="'name'"
					:labelField="'name'"
					:params="params"
					v-model:label="query.user_name"
					style="width:150px; margin-right: 5px;"
				>
					<el-table-column label="姓名" prop="name"></el-table-column>
				</xtSelect>
                <el-date-picker
					v-model="query.start_date"
					type="date"
					value-format="YYYY-MM-DD"
					placeholder="开始时间"
					style="width: 150px"
				/>
				<el-date-picker
					v-model="query.end_date"
					type="date"
					value-format="YYYY-MM-DD"
					placeholder="结束时间"
					style="margin-left: 2px; width: 150px"
				/>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="handleQuery"
				></el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<el-tabs type="border-card" v-model="activeName" @tab-click="tabsClick" style="height: 100%;" lazy>
				<el-tab-pane name="shengchan" label="生产统计" style="height: 100%;" key="shengchan">
					<el-container v-if="activeName=='shengchan'">
						<el-main>
							<scTable
								ref="table"
								:data="tableData"
								id="exportDiv"
								row-key="id"
								hidePagination
								hideDo
								stripe
							>
								<el-table-column label="日期" prop="日期" width="100" fixed="left">
								</el-table-column>
								<el-table-column label="操作人" prop="操作人" width="100" fixed="left">
								</el-table-column>
								<el-table-column v-for="item in lists" :key="item" :label="item.text"  align="center">
									<el-table-column v-for="item1 in item.value" :key="item1" :label="item1">
										<template #default="scope">
											<el-input v-if="scope.row.indexs==0&&scope.row" v-model="scope.row[item.text+'_'+item1]" @change="xishuChange"></el-input>
											<span v-if="scope.row.indexs!==0&&scope.row">{{ scope.row[item.text+'_'+item1] }}</span>
										</template>
									</el-table-column>
								</el-table-column>
								<el-table-column label="其它工时" prop="其它工时">
									<template #default="scope">
										<el-input v-if="scope.row.indexs!==0&&scope.row" v-model="scope.row.time_other" @change="xishuChange"></el-input>
									</template>
								</el-table-column>
								<el-table-column label="总工时" prop="总工时">
									<template #default="scope">
										<el-input v-if="scope.row.indexs!==0&&scope.row" v-model="scope.row.time_all"></el-input>
									</template>
								</el-table-column>
								<el-table-column label="备注" prop="备注">
									<template #default="scope">
										<el-input v-if="scope.row.indexs!==0&&scope.row" v-model="scope.row.note"></el-input>
									</template>
								</el-table-column>
							</scTable>

							<el-drawer v-model="visible" :title="userName+'板段列表'" size="50%" direction="rtl" append-to-body destroy-on-close>
								<el-card shadow="never">
									<div v-for="(item,index) in detailRow" :key="item" style="height:22px;border-bottom: 1px solid #efefef;">
										<span style="margin-right:10px;width: 18px;display: inline-block;">{{ index+1 }} </span>
										{{ item }}
									</div>
								</el-card>
							</el-drawer>
						</el-main>
					</el-container>
				</el-tab-pane>
				<el-tab-pane name="gongzhuang" label="工装统计" style="height: 100%;" key="gongzhuang">
					<el-container v-if="activeName=='gongzhuang'">
						<el-main>
							<scTable
								ref="table"
								:data="tableData"
								id="exportDiv"
								row-key="id"
								hidePagination
								hideDo
								stripe
							>
								<el-table-column type="index" width="50"  fixed="left"/>
								<el-table-column label="工装编号" prop="工装编号" :filters="userFilters" :filter-method="filterUser" filter-placement="bottom-end">
								</el-table-column>
								<el-table-column label="物料名" prop="物料名" :filters="nameFilters" :filter-method="filterName" filter-placement="bottom-end">
								</el-table-column>
								<el-table-column label="总数">
									<template #default="scope">
										<span v-if="scope.row.总切片数" @click="handleClick(scope.row)" style="color:#0052d9;">{{ scope.row.总切片数 }}</span>
										<span v-else @click="handleClick(scope.row)" style="color:#0052d9;">{{ scope.row.总生产数 }}</span>
									</template>
								</el-table-column>
								<el-table-column label="合格率" prop="合格率">
									<template #default="scope">
										<span>{{((scope.row.总切片合格数/scope.row.总切片数)*100).toFixed(2) }}%</span>
									</template>
								</el-table-column>
							</scTable>
						</el-main>
					</el-container>
				</el-tab-pane>
				<el-tab-pane name="renyuan" label="开台人员统计" style="height: 100%;" key="renyuan">
					<el-container v-if="activeName=='renyuan'">
						<el-main>
							<scTable
								ref="table"
								:data="tableData"
								id="exportDiv"
								row-key="id"
								hidePagination
								hideDo
								stripe
							>
								<el-table-column type="index" width="50"  fixed="left"/>
								<el-table-column label="开台人" prop="开台人员姓名" :filters="userFilters" :filter-method="filterUser3" filter-placement="bottom-end">
								</el-table-column>
								<el-table-column label="物料名" prop="物料名" :filters="nameFilters" :filter-method="filterName" filter-placement="bottom-end">
								</el-table-column>
								<el-table-column label="总数" prop="总切片数">
								</el-table-column>
								<el-table-column label="合格率" prop="合格率">
									<template #default="scope">
										<span v-if="scope.row.总切片数>0">{{((scope.row.总切片合格数/scope.row.总切片数)*100).toFixed(2) }}%</span>
										<span v-else>0%</span>
									</template>
								</el-table-column>
							</scTable>
						</el-main>
					</el-container>
				</el-tab-pane>
			</el-tabs>
		</el-main>
	</el-container>
</template>

<script>
export default {
	name: "workerTimes",
	data() {
		return {
			query:{
				end_date:'',
                user_name:'',
				start_date:'',
			},
			params:{
				ubelong_dept__name:"冷加工",
			},
			lists:[],
			mgruops:[],
			tableData:[],
			userFilters:[],
			filterUsers:[],
			nameFilters:[],
			filterNames:[],
			visible:false,
			userName:'',
			code:'lineDay_p',
			activeName:'shengchan',
			apiObj: this.$API.system.user.list,
		};
	},
    mounted() {
        let that = this;
        let date = new Date();
        that.query.end_date = that.$TOOL.dateFormat2(date);
		that.query.start_date =  that.query.end_date.split('-')[0] + '-' + that.query.end_date.split('-')[1] + '-01';
		that.getData();
    },
	methods: {
		tabsClick(){
			let that = this;
			that.$nextTick(()=>{
				that.getData();
			})
		},
        getData(){
            let that = this;
			that.lists = [];
			that.mgruops = [];
			that.tableData = [];
			that.titleList = [];
			that.coefficient = [];
            let params = {};
            params.query = that.query;
			let code = that.activeName=='shengchan'?'lineDay_p':that.activeName=='gongzhuang'?'product_toolings':'product_kaitairen';
			that.$API.bi.dataset.exec.req(code, params).then((res) => {
				let data = res.data2.ds0;
				let coefficient = [];
				if(data.length>0){
					if(that.activeName=='shengchan'){
						data.forEach(item=>{
							let obj = item.工序物料生产数?JSON.parse(item.工序物料生产数):{};
							for(let key in obj){
								if(coefficient.indexOf(key)<0){
									coefficient.push(key);
								}
								let mgroup = key.split('_')[0];
								let pname = key.split('_')[1];
								if(that.mgruops.indexOf(mgroup)<0){
									that.mgruops.push(mgroup);
									that.lists.push({text:mgroup,value:[pname]});
								}else{
									var index = that.mgruops.indexOf(mgroup);
									if(that.lists[index].value.indexOf(pname)<0){
										that.lists[index].value.push(pname);
									}
								}
								item[key]= obj[key];
								item[pname]= obj[key];
							}
						})
						that.coefficient = coefficient;
						let item0 = {日期:'系数',操作人:'',indexs:0};
						coefficient.forEach(cof=>{
							item0[cof]= 1;
						})
						data.unshift(item0);
						data.forEach(item1 => {
							item1.time_other=0;
							let all = 0;
							coefficient.forEach(item2 => {
								if(item1[item2]){
									all = all+ Number(item1[item2])
								}
							})
							item1.time_all = all;
						})
					}
					let userList = [],users = [];
					let nameList = [],names = [];
					data.forEach(item=>{
						if(that.activeName=='gongzhuang'){
							if(users.indexOf(item.工装编号)>-1){}else{
								users.push(item.工装编号);
								userList.push({text:item.工装编号,value:item.工装编号})
							}
						}else if(that.activeName=='renyuan'){
							if(users.indexOf(item.开台人员姓名)>-1){}else{
								users.push(item.开台人员姓名);
								userList.push({text:item.开台人员姓名,value:item.开台人员姓名})
							}
						}
						if(names.indexOf(item.物料名)>-1){}else{
							names.push(item.物料名);
							nameList.push({text:item.物料名,value:item.物料名})
						}
						that.userFilters = userList;
						that.nameFilters = nameList;
					})
				}
				that.tableData = data;
			});
        },
		filterUser(value, row) {
			return row.工装编号 == value;
		},
		filterUser3(value, row) {
			return row.开台人员姓名 == value;
		},
		filterName(value, row) {
			return row.物料名 == value;
		},
		
		xishuChange(){
			let that = this;
			that.tableData.forEach((item1,index1) => {
				if(index1>0){
					let all = 0;
					that.coefficient.forEach(item2 => {
						if(item1[item2]){
							all = all+ Number(item1[item2])/Number(that.tableData[0][item2])
						}
					})
					item1.time_all = all+Number(item1.time_other);
				}
			})
		},
		otherChange(index){
			let that = this;
			let all = 0;
			console.log('index',index)
			that.coefficient.forEach(item2 => {
				if(that.tableData[index][item2]){
					all = all+ Number(that.tableData[index][item2])/Number(that.tableData[0][item2])
				}
				that.tableData[index].time_all = all+Number(that.tableData[index].time_other);
			})
		},
		deptChange(){
			this.getData();
		},
		handleQuery(){
			let that = this;
			that.getData();
		},
	},
};
</script>

<style scoped>
</style>
