<template>
    <div style="text-align: left;">
		<el-row>
			<el-input v-model="query" size="small" placeholder="请输入查询条件" style="width :300px;float: left;"></el-input>
			<el-button type="info" size="small" @click="search">查询</el-button>
			<el-button type="primary" size="small" @click="handleAdd">新增</el-button>
            <el-button size="small" type="primary"  @click="handleImport">导入</el-button>
			<el-button size="small" type="primary" @click="handleDownload">下载模板</el-button>
		</el-row>
    
		<el-table :data="tableData" border>
			<el-table-column prop="contractNo" label="合约号" width="120">
			</el-table-column>
			<el-table-column prop="ordNo" label="订单号" width="120">
			</el-table-column>
			<el-table-column prop="payWay" label="支付方式" width="120">
			</el-table-column>
            <el-table-column prop="remark" label="备注信息" width="120">
			</el-table-column>

			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.row.ordNo)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
		 :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRows">
		</el-pagination>


		<el-dialog title="订单明细" :visible.sync="dialogVisible" width="500px">
			<el-form :model="ordTract" label-width="100px" ref="ordTract">				
				<el-form-item label="合约号">
					<el-input v-model="ordTract.contractNo"></el-input>
				</el-form-item>
				<el-form-item label="订单号">
					<el-input v-model="ordTract.ordNo"></el-input>
				</el-form-item>
                <el-form-item label="支付方式">
                    <el-radio v-model="ordTract.payWay" label="现金">现金</el-radio>
                    <el-radio v-model="ordTract.payWay" label="月付">月付</el-radio>
				</el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="ordTract.remark"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button type="success" @click="handleSave">保存</el-button>
					<el-button @click="handleCancelSave">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

        <el-dialog title="订单明细" :visible.sync="importDialogVisible" width="1000px">
            <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="success" @click="inImport" :disabled="imptAble">保存</el-button>
			</el-upload>

            <el-table :data="imTableData" border>
				<el-table-column prop="合约号" label="合约号" width="180" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="订单号" label="订单号" width="180" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="支付方式" label="支付方式" width="180" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="备注信息" label="备注信息" width="180" show-overflow-tooltip align="center" header-align="center">
				</el-table-column>
			</el-table>
        </el-dialog>


	</div>
</template>

<script>
    import axios from '@/axios'
	import {
		mapState
	} from 'vuex'
	export default {
        data() {
            return {
                // 查询条件
                query: '',
                // 界面展示的表
                tableData: [],
                // 导入框中明细展示用table
                imTableData:[],

                // 页数分页相关的参数
                currentPage: 1,
				totalRows: 0,
				pageSizes: [50, 100, 200,500],
				pageSize: 50,

                // 查询之后加载的控件
                loading: true,
                // 某些字段是否显示的控件
                isShow: false,
                // 弹出框是否显示的控件
                dialogVisible: false,
                importDialogVisible:false,


                // 新增修改对应的类的信息
                ordTract:{
                    contractNo:'',
                    ordNo:'',
                    payWay:'',
                    remark:'',
                }

            }
        },
        //界面渲染完毕调用   初始化表格参数
		mounted() {
		},
        methods: {
            // 以下程序为查询方面相关的程序
            getTableData() {
				var url = 'MaintOrdTract/query.do'
				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					query: this.query
				}
				axios.get(url, param).then(response => {
					if (response.data.code == 0) {
						this.tableData = response.data.data.list
						this.totalRows = response.data.data.total
						//this.drawWareLayout()
					} else {
						this.$message({
							type: 'error',
							message: '查询失败' + response.data.msg,
						});
					}
				});
			},
            search() {
				this.currentPage = 1
				this.getTableData()
			},
            handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getTableData()
			},
			// 修改当前页事件
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val
				this.getTableData()
			},
            // 点击新增按钮的操作函数
            handleAdd() {
                this.ordTract.ordNo= '',
                this.ordTract.contract = '',
                this.ordTract.remark = '',
                this.ordTract.payWay='月付',
                this.dialogVisible=true;
            },
            // 编辑按钮事件
			handleEdit(row) {
				var tempRow = row;
				this.dialogVisible = true
				this.ordTract = tempRow
			},
            // 信息明细弹窗里面取消按钮对应的函数
            handleCancelSave(row) {
				this.dialogVisible = false
			},
            // 弹出空中保存按钮对应的函数
            handleSave() {
				var tempStack = this.ordTract;
				var json = JSON.stringify(tempStack)
				var url = 'MaintOrdTract/save.do'
				var param = {
					json: json
				}
				axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						this.$message({
							type: 'success',
							message: '保存成功!',
						});
						this.getTableData()
						this.dialogVisible = false
					} else {
						this.$message({
							type: 'error',
							message: '保存失败：' + response.data.msg,
						});
					}
				});
			},
            // 删除按钮事件
			handleDelete(ordNo) {
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var url = 'MaintOrdTract/remove.do'
					var param = {
						ordNo: ordNo
					}
					axios.post(url, param).then(response => {
						if (response.data.code == 0) {
							this.$message({
								type: 'success',
								message: '删除成功!',
							});
							this.getTableData()
						} else {
							this.$message({
								type: 'error',
								message: '删除失败;' + response.data.msg
							});
						}
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
            // 点击导入按钮对应的函数
            handleImport() {
				this.importDialogVisible = true
			},
            // 点击下载模板对应的函数
            handleDownload() {
				window.open(this.serverName.substr(0, this.serverName.lastIndexOf('/', this.serverName.lastIndexOf('/') - 1)) +
					'/importOrd.xls')
			},
            // 文件导入会用到的函数
            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);
				}
			},

            inImport() {
				var url = 'MaintOrdTract/inImport.do'
				var json = JSON.stringify(this.imTableData)
				var param = {
					json: json
				}
				this.imptAble = true;
				// console.log(json)
				axios.post(url, param).then(response => {
					if (response.data.code == '0') {
						this.$message({
							type: 'success',
							message: '保存成功!',
						});
						this.importDialogVisible = false
						this.imTableData = []
						this.fileTemp = null
                        this.getTableData()
					} else {
						this.$message({
							type: 'error',
							message: '保存失败!' + response.data.msg
						});

					}
					this.imptAble = false;
				});
			},
        }
	}
</script>
