<template>
	<el-container>
		<el-header>
			<div class="right-panel">
				<el-select 
					v-model="query.mgroup" 
					placeholder="工段"
					@change="handleQuery">
					<el-option
						v-for="item in options"
						:key="item.id"
						:label="item.name"
						:value="item.id"
					>
					</el-option>
				</el-select>
				<el-date-picker
					v-model="query.handle_date"
					type="date"
					placeholder="处理日期"
					value-format="YYYY-MM-DD"
					style="width: 160px"
				>
				</el-date-picker>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="handleQuery"
				></el-button>
			</div>
			<el-button @click="handleExport" type="primary">导出</el-button>
		</el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				:apiObj="apiObj"
				row-key="id"
				:params="params"
				:query="query"
			>
				<el-table-column
					label="#"
					type="index"
					width="50"
				></el-table-column>
				<el-table-column
					label="工艺路线"
					prop="material_out_name"
					min-width="130"
				>
				</el-table-column>
				<el-table-column
					label="生产设备"
					prop="equipment_name"
					min-width="150"
				></el-table-column>
				<el-table-column label="进度" prop="belong_dept_name"  v-if="mgroupName=='黑化'||mgroupName=='退火'">
					<template #default="scope">
						<el-progress id="progressbwlq" :percentage="customMethod(scope.row,1)" :stroke-width="20" :color="customMethod(scope.row,2)" :text-inside="true"><span>{{customMethod(scope.row,3)}}</span></el-progress>
					</template>
				</el-table-column>
				<el-table-column
					label="部门/工段"
					prop="belong_dept_name"
				>
					<template #default="scope">
						{{scope.row.belong_dept_name}}/{{scope.row.mgroup_name}}
					</template>
				</el-table-column>
				<el-table-column
					label="处理人"
					prop="handle_user_name"
					width="80"
				></el-table-column>
				<el-table-column label="保温剩余时间" v-if="mgroupName=='黑化'||mgroupName=='退火'">
					<template #default="scope">
						{{ getRemaTime(scope.row) }}
					</template>
				</el-table-column>
				<el-table-column
					label="开始时间"
					prop="work_start_time"
				></el-table-column>
				<el-table-column
					label="结束时间"
					prop="work_end_time"
				></el-table-column>
				<el-table-column
					label="提交时间"
					prop="submit_time"
				></el-table-column>
			</scTable>
		</el-main>
	</el-container>
</template>
<script>
export default {
	name: "chart",

	data() {
		return {
			params:{
				wm_in_state:30,
				mlog_submit_time_isnull:0,
			},
			query:{
				mgroup:'',
				handle_date:'',
			},
			currentDate: "",
			tableData: [],
			options:[],
			apiObj : this.$API.wpm.mlog.list
		};
	},
	mounted() {
		this.getMgroupOptions();
	},
	methods: {
		getMgroupOptions(){
			let that = this;
			that.$API.mtm.mgroup.list.req({page:0}).then(res=>{
				that.options = res;
			})
		},
		// processChange(){
		// 	this.$refs.table.queryData(this.query);
		// },
		handleQuery() {
			this.$refs.table.queryData(this.query);
		},
		handleExport() {
			this.exportLoading = true;
			this.$XLSX("#exportDiv", "成品检验统计");
			this.exportLoading = false;
		},
	},
};
</script>

<style scoped>
.tables {
	position: absolute;
	top: 4px;
	right: 6px;
	z-index: 10;
}
</style>
