<template>
    <div>
        <el-upload class="upload-demo" action="" :on-change="handleChange" :on-exceed="handleExceed" :on-remove="handleRemove"
		ref="upload" :limit="1" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
		:auto-upload="false">
		    <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
            <el-button size="small" type="primary" @click="handleDownload">下载模板</el-button>
			<el-button size="small" type="success" @click="inImport">保存</el-button>
		</el-upload>
        
        <el-table :data="imTableData" border>
			<el-table-column prop="仓库名称" label="仓库名称" width="100" show-overflow-tooltip header-align="center">
			</el-table-column>
			<el-table-column prop="垛位号" label="垛位号" width="120" show-overflow-tooltip header-align="center">
			</el-table-column>
            <el-table-column prop="层号" label="层号" width="60" show-overflow-tooltip header-align="center">
            </el-table-column>
            <el-table-column prop="品名" label="品名" width="120" show-overflow-tooltip align="center" header-align="center">
            </el-table-column>
            <el-table-column prop="钢种" label="钢种" width="120" show-overflow-tooltip align="center" header-align="center">
            </el-table-column>
            <el-table-column prop="产品编号" label="产品编号" width="200" show-overflow-tooltip header-align="center">
            </el-table-column>
            <el-table-column prop="订单号" label="订单号" width="200" show-overflow-tooltip header-align="center">
            </el-table-column>
            <el-table-column prop="规格型号" label="规格型号" width="120" show-overflow-tooltip header-align="center">
            </el-table-column>
            <el-table-column prop="重量" label="重量" width="120" show-overflow-tooltip align="right" header-align="center">
            </el-table-column>
            <el-table-column prop="数量" label="数量" width="120" show-overflow-tooltip align="right" header-align="center">
            </el-table-column>
            <el-table-column prop="合约号" label="合约号" width="120" show-overflow-tooltip align="right" header-align="center">
            </el-table-column>
            <el-table-column prop="入库车号" label="入库车号" width="150" show-overflow-tooltip header-align="center">
            </el-table-column>
            <el-table-column prop="货权单位" label="货权单位" width="300" show-overflow-tooltip header-align="center">
            </el-table-column>
            <el-table-column prop="客户名称" label="客户名称" width="300" show-overflow-tooltip header-align="center">
            </el-table-column>
            <el-table-column prop="收货地址" label="收货地址" width="100" show-overflow-tooltip header-align="center">
            </el-table-column>
            <el-table-column prop="产地" label="产地" width="100" show-overflow-tooltip header-align="center">
            </el-table-column>
            <el-table-column prop="捆包号" label="捆包号" width="250" show-overflow-tooltip header-align="center">
            </el-table-column>				
            <el-table-column prop="备注" label="备注" width="150" show-overflow-tooltip header-align="center">
            </el-table-column>
            <el-table-column prop="入库操作人员" label="入库操作人员" width="150" show-overflow-tooltip header-align="center">
            </el-table-column>
            <el-table-column prop="吊装工" label="吊装工" width="150" show-overflow-tooltip header-align="center">
            </el-table-column>
            <el-table-column prop="计量方式" label="计量方式" width="150" show-overflow-tooltip header-align="center">
            </el-table-column>
			<el-table-column prop="入库时间" label="入库时间" width="150" show-overflow-tooltip header-align="center">
            </el-table-column>
            <el-table-column prop="出库时间" label="出库时间" width="150" show-overflow-tooltip header-align="center">
            </el-table-column>
            <el-table-column prop="出库车号" label="出库车号" width="150" show-overflow-tooltip header-align="center">
            </el-table-column>
			<el-table-column prop="出库单号" label="出库单号" width="150" show-overflow-tooltip header-align="center">
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
	import axios from '@/axios'
	import zrender from 'zrender'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState({
                serverName: state => state.app.serverName,
				wareBackgroundColor: state => state.color.wareBackgroundColor,
				stackColor: state => state.color.stackColor,
				stackSelectedColor: state => state.color.stackSelectedColor
			})
		},
		components: {

		},
		data() {
			return {
				imTableData: [],
			}
		},
		//界面渲染完毕调用   初始化表格参数
		mounted() {
		},
		methods: {
			handleDownload() {
				window.open(this.serverName.substr(0, this.serverName.lastIndexOf('/', this.serverName.lastIndexOf('/') - 1)) +
					'/importWare.xls')
			},
            inImport() {
				var url = 'WareIn/inImportAll.do'
				var json = JSON.stringify(this.imTableData)
				var param = {
					json: json
				}
				this.imptAble = true;
				// console.log(json)
				axios.post(url, param).then(response => {
					console.log(response.data)
					if (response.data.code == '0') {
						this.$message({
							type: 'success',
							message: '入库成功!',
						});
						this.imTableData = []
						this.fileTemp = null
					} else {
						this.$message({
							type: 'error',
							message: '入库失败!' + response.data.msg
						});

					}
					this.imptAble = false;
				});
			},

			handleExceed(file, fileList) {},
			handleChange(file, fileList) {
				this.fileTemp = file.raw
				if (this.fileTemp) {
					if ((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') || (this.fileTemp.type ==
							'application/vnd.ms-excel')) {
						this.importfxx(this.fileTemp)
					} else {
						this.$message({
							type: 'warning',
							message: '附件格式错误，请删除后重新上传！'
						})
					}
				} else {
					this.$message({
						type: 'warning',
						message: '请上传附件！'
					})
				}

			},

			handleRemove(file, fileList) {
				this.fileTemp = null;
				this.imTableData = [];
			},

			importfxx(obj) {
				let _this = this;
				// 通过DOM取文件数据
				this.file = obj
				var rABS = false; //是否将文件读取为二进制字符串
				var f = this.file;
				var reader = new FileReader();
				//if (!FileReader.prototype.readAsBinaryString) {
				FileReader.prototype.readAsBinaryString = function(f) {
					var binary = "";
					var rABS = false; //是否将文件读取为二进制字符串
					var pt = this;
					var wb; //读取完成的数据
					var outdata;
					var reader = new FileReader();
					reader.onload = function(e) {
						var bytes = new Uint8Array(reader.result);
						var length = bytes.byteLength;
						for (var i = 0; i < length; i++) {
							binary += String.fromCharCode(bytes[i]);
						}
						var XLSX = require('xlsx');
						if (rABS) {
							wb = XLSX.read(btoa(fixdata(binary)), { //手动转化
								type: 'base64'
							});
						} else {
							wb = XLSX.read(binary, {
								type: 'binary'
							});
						}
						outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西
						// console.log(JSON.stringify(outdata))
						_this.imTableData = outdata
					}
					reader.readAsArrayBuffer(f);
				}

				if (rABS) {
					reader.readAsArrayBuffer(f);
				} else {
					reader.readAsBinaryString(f);
				}
			},


		}
	}
</script>