<template>
	<el-container>
		<el-header>
			<div class="right-panel">
				<el-select v-model="searchType" style="width: 200px" @change="searchTypeChange">
					<el-option label="原料批次号" value="batch"></el-option>
					<el-option label="物料名称" value="material"></el-option>
				</el-select>
				<el-input 
					v-if="searchType === 'batch'"
					v-model="query.batch"  placeholder="物料批次"
				 	clearable style="width:200px"
				></el-input>
				<el-select v-else
					v-model="query.m_name" 
					style="width: 200px"
					@change="materialChange"
					placeholder="请选择物料">
					<el-option
						v-for="item in options"
						:key="item.id"
						:label="item.name"
						:value="item.name"
					>
					</el-option>
				</el-select>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="handleQuery"
				></el-button>
				<el-button
					@click="handleExport"
					class="tables"
					type="primary"
					>导出</el-button
				>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable
					:data="tableData"
					id="exportDiv"
					stripe
					hideDo
					hidePagination
				>
					<el-table-column type="index" width="50" />
					<el-table-column label="部门" prop="部门">
					</el-table-column>
					<el-table-column label="工段" prop="工段">
					</el-table-column>
					<el-table-column label="原料数" prop="原料数">
					</el-table-column>
					<el-table-column label="待加工原料数" prop="待加工原料数">
					</el-table-column>
					<el-table-column label="非本段产物数" prop="非本段产物数">
					</el-table-column>
					<el-table-column label="待加工产物数" prop="待加工产物数">
					</el-table-column>
					<el-table-column label="加工中原料数" prop="加工中原料数">
					</el-table-column>
					<el-table-column label="加工中产物数" prop="加工中产物数">
					</el-table-column>
					<el-table-column label="合格品数" prop="合格品数">
					</el-table-column>
					<el-table-column label="不合格品数" prop="不合格品数">
					</el-table-column>
					<el-table-column label="返工品数" prop="返工品数">
					</el-table-column>
					<el-table-column label="检验数" prop="检验数">
					</el-table-column>
					<el-table-column label="废品数" prop="废品数">
					</el-table-column>
					<el-table-column label="仓库原料数" prop="仓库原料数">
					</el-table-column>
					<el-table-column label="仓库合格品数" prop="仓库合格品数">
					</el-table-column>
					<el-table-column label="仓库合格成品数" prop="仓库合格成品数">
					</el-table-column>
				</scTable>
		</el-main>
	</el-container>
</template>

<script>

function deepCopy(obj) {
	return JSON.parse(JSON.stringify(obj));
}
export default {
	name: "chart",
	data() {
		return {
			query: {
				batch: "",
				m_name: "",
				m_model: "",
				m_specification: ""
			},
			searchType:'batch',
			options:[],
			tableData:[],
			basicOption: {
				backgroundColor: "transparent",
				title: {
					text: "库存统计",
				},
				grid: {
					top: "80px",
				},
				tooltip: {
					trigger: "axis",
				},
				xAxis: {
					type: "category",
					data: ['库房','扫边车间','黑化车间','减薄车间','精雕车间','倒角车间','磨抛车间'],
				},
				yAxis: {
					type: "value",
				},
				legend: {
					top: "3",
					right: "3%",
				},
				series: [
					{
						data: [0,0,0,0,0,0,0],
						type: "bar",
						name:'未处理',
						barWidth: "15px",
					},
					{
						data: [0,0,0,0,0,0,0],
						type: "bar",
						name:'处理中',
						barWidth: "15px",
					},
					{
						data: [0,0,0,0,0,0,0],
						type: "bar",
						name:'已处理',
						barWidth: "15px",
					},
				],
			},
		};
	},
	mounted() {
		let that = this;
		that.getOptions();	
		that.getInmMaterial();
	},
	methods: {
		getOptions(){
			let that = this;
			let obj = {};
			obj.page = 0;
			obj.type__in = "10,20";
			obj.is_hidden = false;
			that.options = [];
			that.$API.mtm.material.list.req(obj).then((res) => {
				if(res.length>0){
					that.options = res;
				}
			});
		},
		getInmMaterial(){
			let that = this;
			let obj = {};
			obj.query = that.query;
			that.tableData =[];
			that.$API.bi.dataset.exec.req('batch_search', obj).then((res) => {
				if(res.data2.ds0){
					that.tableData = res.data2.ds0;
				}
			});
		},
		searchTypeChange(){
			this.query.batch = '';
			this.query.m_name = '';
			this.query.m_model = '';
			this.query.m_specification = '';
		},
		materialChange(val){
			let that = this;
			console.log(val);
			that.options.forEach((item) => {
				if (item.name == val) {
					that.query.m_model = item.model;
					that.query.m_specification = item.specification;
				}
			})
		},
		handleQuery(){
			this.getInmMaterial();
		},
		setChart(name, option = null) {
			// 根据name 渲染数据, option需填写，否则option为模拟数据
			var myChart = echarts.getInstanceByDom(
				document.getElementById(name)
			);
			if (myChart == undefined) {
				myChart = echarts.init(document.getElementById(name), "T");
			}
			if (option == null) {
				option = Object.assign({}, this.basicOption);
			}
			setTimeout(() => {
				try {
					myChart.setOption(option);
				} catch (error) {}
			}, 500);
		},
	},
};
</script>

<style scoped>
#bachart1{
	width: 100%;
	height: 500px;
}

.tableHead {
	background:rgb(0,176,240);
	height:40px;
}
.tableTh{
	width:120px;
	height:36px;
}
.tableTd{
	width:120px;
	height:36px;
}
</style>
