<!DOCTYPE html>
<html>
	<head>
		<title>入境登记-添加/修改</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css js 资源 -->
		<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css">
		<script src="../../static/kj/vue.min.js"></script>
		<script src="../../static/kj/element-ui/index.js"></script>
		<script src="../../static/kj/httpVueLoader.js"></script>
		<script src="../../static/kj/jquery.min.js"></script>
		<script src="../../static/kj/layer/layer.js"></script>
		<script src="../../static/sa.js"></script>
		<script src="../../static/kj/upload-util.js"></script>
		<style type="text/css">
			.c-panel .el-form .c-label {
				width: 8em !important;
			}

			.c-panel .el-form .c-panel .el-form {
				width: 200px;
			}

			.item-num .el-input__inner {
				width: 130px;
			}

			.xj {
				display: inline;
				color: red;
				margin-left: 9px;
				font-weight: bold;
			}

			.hj {
				color: red;
				margin-left: 9px;
				font-weight: bold;

			}
		</style>
	</head>
	<body>
		<div class="vue-box sbot" style="display: none;" :style="'display: block;'">
			<!-- ------- 内容部分 ------- -->
			<div class="s-body">
				<div class="c-panel">
					<div class="c-title">数据添加</div>
					<el-form v-if="m" label-position="left">
						<el-row>
							<el-card class="box-card">
								<div slot="header" class="clearfix">
									<span>基本资料</span>
								</div>
								<div>
									<el-row>
										<el-col span=8>
											<div class="c-item">
												<label class="c-label"><span style="color: red;">*</span>补录原因:</label>
												<el-input v-model="m.supplementReason" placeholder="补录原因" clearable>
												</el-input>
											</div>
											<div class="c-item">
												<label class="c-label">支付状态:</label>
												<el-select v-model="m.payStatus" placeholder="请选择" >
													<el-option label="未支付" :value="1">
													</el-option>
													<el-option label="已支付" :value="3">
													</el-option>
												</el-select>
											</div>
											
											<div class="c-item">
												<label class="c-label"><span style="color: red;">*</span>业务项目:</label>
												<el-select v-model="m.goodsId" placeholder="请选择" disabled>
													<el-option v-for="item in goodsList" :key="item.id"
														:label="item.name" :value="item.id">
													</el-option>
												</el-select>
											</div>
											<div class="c-item" v-if="goods.needDeclare==1">
												<label class="c-label">
													<span style="color: red;">*</span>
													申报单号:</label>
												<el-input v-model="m.declareNo" placeholder="选择申报单"
													:readonly="goods.needDeclare==1" disabled>
												</el-input>
											</div>
										
										</el-col>
										<el-col span=8>
											<div class="c-item" v-if="goods.needCustomer">
												<label class="c-label"><span style="color: red;">*</span>客户:</label>
												<el-select disabled v-model="m.customerId" placeholder="请选择">
													<el-option v-for="item in customerList" :key="item.id"
														:label="item.name" :value="item.id">
													</el-option>
												</el-select>
											</div>
											<div class="c-item" v-if="goods.needOwner==1" >
												<label class="c-label">
													<span style="color: red;">*</span>
													货主:</label>
												<el-input v-model="m.owner" placeholder="填写货主" disabled>
												</el-input>
											</div>
											
										</el-col>
										<el-col span=8>
											<div class="c-item" v-if="m.payStatus===3">
												<label class="c-label">支付时间:</label>
												<el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
													v-model="m.payTime"></el-date-picker>
											</div>
											<div class="c-item">
												<label class="c-label">作业人员:</label>
												<el-input v-model="m.operator" placeholder="作业人员" disabled>
												</el-input>
											</div>
											<div class="c-item">
												<label class="c-label"><span style="color: red;"
														v-if="goods.needOperateTime==1">*</span>作业时间:</label>
												<el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" disabled
													v-model="m.operateTime"></el-date-picker>
											</div>
											
										</el-col>
									</el-row>
									<div class="c-item" v-if="m.payStatus==3" >
										<label class="c-label">
											<span style="color: red;">*</span>
											微信支付单号:</label>
										<el-input v-model="m.transactionId" placeholder="微信支付单号">
										</el-input>
									</div>
								</div>
							</el-card>
						</el-row>
						<el-row>
							<el-card class="box-card">
								<div slot="header" class="clearfix">
									<span>车辆</span>
									<el-button style="float: right;" icon="el-icon-plus" type="primary"
										@click="showAddModal" v-if="goods.mulCar==1||car.list.length==0">添加
									</el-button>
								</div>
								<el-table :data="car.list">
									<el-table-column prop="carNo" label="车牌号" width="100">
									</el-table-column>
									<el-table-column prop="carSize" label="规格" width="90">
									</el-table-column>
									<el-table-column prop="carType" label="类型" width="90">
									</el-table-column>
									<el-table-column prop="netWeight" label="载重" width="90">
									</el-table-column>
									<el-table-column prop="realInTime" label="入场时间" align="center">
										<template slot-scope="s">
											<el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
												v-model="s.row.realInTime"></el-date-picker>
										</template>
									</el-table-column>
									<el-table-column prop="realOutTime" label="离场时间" align="center" >
										<template slot-scope="s">
											<el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
												v-model="s.row.realOutTime"></el-date-picker>
										</template>
									</el-table-column>
									<el-table-column prop="payType" label="支付" align="center" >
										<template slot-scope="s">
											<el-select v-model="s.row.payType" placeholder="请选择" >
												<el-option label="未支付" value="未支付">
												</el-option>
												<el-option label="已支付" value="已支付">
												</el-option>
												<el-option label="免费" value="免费">
												</el-option>
											</el-select>
										</template>
									</el-table-column>
									<el-table-column prop="payTime" label="支付时间" align="center" >
										<template slot-scope="s">
											<el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :disabled="s.row.payType!=='已支付'"
												v-model="s.row.payTime"></el-date-picker>
										</template>
									</el-table-column>
								</el-table>
							</el-card>
						</el-row>
						<el-row>
							<el-card class="box-card">
								<div slot="header" class="clearfix">
									<span>收费项</span>
								</div>
								<div>
									<el-form-item v-for="(type,index) in itemTypeList">
										<el-row justify="center">
											<el-col span="9">
												<label>{{type.name}}:</label>
												<el-select v-model="type.itemId" style="width: 120px;" disabled
													placeholder="请选择">
													<el-option v-for="item in type.items" :key="item.id"
														:label="item.itemName" :value="item.id">
													</el-option>
												</el-select>
											</el-col>
											<el-col span="7">
												<el-input-number style="margin-left: 60px;" class="item-num"
													v-model="type.num" :min="1" :max="10" size="mini"
													:disabled="type.inc==0"></el-input-number>
												<div class="xj" v-if="type.itemId">
													{{type.price*type.num}}元
												</div>
											</el-col>
											<el-col span="8">
												<label class="c-label">
													备注:</label>
												<el-input v-model="type.remark" placeholder="请输入备注" disabled>
												</el-input>
											</el-col>
										</el-row>
										<el-divider></el-divider>
									</el-form-item>
									<div class="hj" v-if="totalPrice>0">
										合计业务费用:{{totalPrice}}<label>元</label>
									</div>
								</div>
							</el-card>
						</el-row>
					</el-form>
				</div>
			</div>
			<!-- ------- 底部按钮 ------- -->
			<div class="s-foot">
				<el-button type="primary" @click="ok()">确定</el-button>
				<el-button @click="closeFn()">取消</el-button>
			</div>
			<el-dialog title="车辆录入" :visible.sync="car.visible" width="400">
				<span>
					<el-form label-position="left">
						<div class="c-item">
							<label class="c-label"><span style="color: red;">*</span>车牌号:</label>
							<el-autocomplete v-model="car.form.carNo" placeholder="请输入车牌号" value-key='carNo'
								:fetch-suggestions="queryCarAsync">
							</el-autocomplete>
						</div>
						<div class="c-item">
							<label class="c-label">车辆类型:</label>
							<el-select v-model="car.form.carType" placeholder="请选择" @change="carTypeChange">
								<el-option :label="item.name" :value="item.name" v-for="(item,index) in carTypeList">
								</el-option>
							</el-select>
						</div>
						<div class="c-item">
							<label class="c-label">
								<span style="color: red;" v-if="goods.needCarSize==1">*</span>
								规格(米):</label>
							<el-input-number class="item-num" v-model="car.form.carSize" :min="1" :max="50">
							</el-input-number>
						</div>
						<div class="c-item" v-if="car.form.carType&&car.form.carType.indexOf('空')==-1">
							<label class="c-label">
								<span style="color: red;" v-if="goods.needCarSize==1">*</span>
								载重(kg):</label>
							<el-input-number class="item-num" v-model="car.form.netWeight" :min="1" :max="999999">
							</el-input-number>
						</div>
					</el-form>
				</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="car.visible = false">取 消</el-button>
					<el-button type="primary" @click="confirmAdd">确 定</el-button>
				</span>
			</el-dialog>
			<el-dialog title="申报单" :visible.sync="declare.visible" width="90%">
				<div class="delect-search">
					申报人:
					<el-input style="width: 140px;" v-model="declare.p.declarePeople" placeholder="申报人">
					</el-input>
					<el-button type="primary" @click="getDeclareList">搜索</el-button>
					<el-button type="info" @click="resetDclare">重置</el-button>
				</div>
				<el-card class="box-card" style="margin-top: 20px;">
					<div slot="header">
						<span>列表</span>
					</div>
					<el-table :data="declare.list" ref="declareTable">
						<el-table-column type="selection">
						</el-table-column>
						<el-table-column prop="declarePeople" label="申报人">
						</el-table-column>
						<el-table-column prop="customerName" label="申报公司" width=200>
						</el-table-column>
						<el-table-column prop="sendUnit" label="货主" width=200>
						</el-table-column>
						<el-table-column prop="createTime" width="140" label="申报时间">
						</el-table-column>
						<el-table-column prop="declareNo" width="180" label="申报单号">
						</el-table-column>
						<el-table-column prop="goodsName" label="产品学名">
						</el-table-column>
						<el-table-column prop="carNo" label="越南车牌">
						</el-table-column>
						<el-table-column prop="grossWeight" label="毛重(kg)">
						</el-table-column>
					</el-table>
					<div class="block">
						<el-pagination layout="prev, pager, next" @current-change="getDeclareList"
							:page-size="declare.p.pageSize" :total="declare.p.dataCount"
							:current-page="declare.p.pageNo">
						</el-pagination>
					</div>
				</el-card>
				<span slot="footer" class="dialog-footer">
					<el-button @click="declare.visible = false">取 消</el-button>
					<el-button type="primary" @click="confirmSelectDeclare">确 定</el-button>
				</span>
			</el-dialog>
		</div>
		<script>
			var app = new Vue({
				components: {
					"sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue'),
					"sa-td": httpVueLoader('../../sa-frame/com/sa-td.vue')
				},
				el: '.vue-box',
				data: {
					m: {
						id: sa.p('id', ''), // 主键
						customerId: '', // 客户id
						customerName: '', // 客户名称
						operateTime: '',
						no: '', // 编号
						goodsId: '',
						goodsName: '', // 商品
					}, // 实体对象
					customerList: [],
					carList: [],
					currentCustomerId: 1,
					itemTypeList: [],
					filterTypeList: [],
					goodsList: [],
					tableData: [],
					car: {
						visible: false,
						list: [],
						form: {
							carNo: '',
							carType: '',
							netWeight: '',
							carSize: ''
						}
					},
					declare: {
						visible: false,
						list: [],
						p: {
							pageNo: 1,
							pageSize: 8,
							dataCount: 0,
							declarePeople: '',
							production: '',
							declareNo: '1'
						}
					},
					goods: {
						id: '',
						name: '',
						needWeight: 1,
						needCarSize: 1,
						needDeclare: 1,
						needOperateTime: 1,
						mulCar: 0
					},
					carTypeList: [],
					intiItems: []
				},
				computed: {
					totalPrice() {
						let itemList = this.itemTypeList.filter(obj => obj.itemId);
						let price = 0;
						for (let i in itemList) {
							let type = itemList[i];
							let num = type.num;
							let items = type.items;
							for (let j in items) {
								let item = items[j];
								if (item.id == type.itemId) {
									price += num * item.price;
									break;
								}
							}
						}
						return price;
					}
				},
				methods: {
					resetDclare() {
						this.declare.p.pageNo = 1;
						this.declare.p.pageSize = 8;
						this.declare.p.production = '';
						this.declare.p.declarePeople = '';
						this.getDeclareList();
					},
					handlerDeclare() {
						this.declare.visible = true;
						this.getDeclareList();
					},
					getDeclareList() {
						let currentCustomerId = this.currentCustomerId;
						if (currentCustomerId != '1') {
							this.declare.p.customerId = this.currentCustomerId;
						}
						let declareNo = this.m.declareNo;
						if (declareNo) {
							this.declare.p.declareNo = declareNo;
						}
						sa.ajax('/TbDeclare/getNotBindList', sa.removeNull(this.declare.p), function(resp) {
							let list = resp.data;
							this.declare.list = list;
							this.declare.p.pageNo = resp.pageNo;
							this.declare.p.dataCount = resp.dataCount;
							list.forEach(row => {
								if (row.declareNo == this.m.declareNo) {
									this.$nextTick(() => {
										this.$refs['declareTable'].toggleRowSelection(row, true)
									})
								}
							})
						}.bind(this))
					},
					confirmSelectDeclare() {
						// 获取选中元素的id列表
						let selection = this.$refs['declareTable'].selection;
						let declareNo = sa.getArrayField(selection, 'declareNo');
						if (selection.length == 0) {
							return sa.msg('请至少选择一条数据')
						}
						if (selection.length > 1) {
							return sa.msg('只能选择一条数据')
						}
						let declare = selection[0];
						let oldNo = this.m.declareNo;
						if (oldNo && oldNo !== declare.declareNo) {
							this.car.list = [];
						}
						if (oldNo !== declare.declareNo) {
							this.m.declareNo = declare.declareNo;
							this.m.customerId = declare.customerId;
							this.m.customerName = declare.customerName;
							this.m.owner = declare.sendUnit;
							let carNo = declare.carNo;
							let grossWeight = declare.grossWeight;
							let carList = this.car.list;
							let exit = carList.filter(obj => obj.carNo == carNo).pop();
							if (!exit) {
								let car = {
									carNo: carNo,
									netWeight: grossWeight,
									carType: '载重'
								}
								this.car.list.push(car)
							}
							this.m.cardNo = declare.carNo;
							this.m.chinaCarNo = declare.chinaCarNo;
							this.m.netWeight = declare.grossWeight;
							let chinaCarNo = declare.chinaCarNo;
							if (chinaCarNo) {
								let list = [];
								chinaCarNo.replace(",", ",").split(",").forEach(carNo => {
									let exit = carList.filter(obj => obj.carNo == carNo).pop();
									if (!exit) {
										let car = {
											carNo: carNo,
											carType: '空车'
										}
										this.car.list.push(car)
									}
								})
							}
							this.filterItems();
						}
						this.declare.visible = false;
					},
					cleanItem(type) {
						type.itemId = '';
						type.itemName = '';
						type.price = '';
					},
					itemChange(type) {
						let itemId = type.itemId;
						let item = type.items.filter(obj => obj.id == itemId).pop();
						if (item) {
							type.inc = item.inc;
							type.price = item.price;
						}
						this.validBefore();
					},
					confirmAdd() {
						let list = this.car.list;
						let weightCar = list.filter(car => car.carType && car.carType.indexOf('空') == -1).pop();
						let carNo = this.car.form.carNo;
						let netWeight = this.car.form.netWeight;
						let goods = this.goods;
						let form = this.car.form;
						let carType = form.carType;
						if (!carNo) {
							sa.error('请录入车牌号')
							return false;
						}
						if (!form.carSize && goods.needCarSize == 1) {
							sa.error('请填入车辆规格')
							return false;
						}
						if (carType.indexOf('空') !== -1) {
							netWeight = 0;
						}

						let index = list.map(obj => obj.carNo).indexOf(carNo);
						if (index > -1) {
							list.splice(index, 1);
						}
						let carSize = form.carSize;
						let car = {
							id: form.id,
							carNo: form.carNo.toUpperCase(),
							carType: carType,
							carSize: carSize,
							netWeight: netWeight
						}
						this.car.list.push(car);
						this.car.visible = false;
						if (weightCar) {
							if (weightCar.carType == carType &&
								carSize == weightCar.carSize &&
								netWeight == weightCar.netWeight) {
								return;
							}
						}

						this.filterItems();
					},
					filterItems() {
						let carList = this.car.list;
						let filterTypeList = JSON.parse(JSON.stringify(this.filterTypeList));
						if (carList.length == 0) {
							this.itemTypeList = filterTypeList;
							return;
						}
						let car = this.car.form;
						if (car == null) {
							let checkList = carList.filter(obj => obj.carType.indexOf('空') === -1);
							if (checkList.length > 0) {
								car = checkList[0];
							}
						}
						let carSize = car.carSize;
						let carType = car.carType;
						if (carType.indexOf('空') !== -1 && carList.length > 1) {
							return;
						}
						let netWeight = car.netWeight;
						let tempList = [];
						for (let i in filterTypeList) {
							let type = filterTypeList[i];
							let items = type.items;
							if (carType) {
								items = items.filter(item => item.itemType && item.itemType.indexOf(carType) !== -1);
							}
							if (carSize && carSize > 1) {
								items = items.filter(item => item.minLength <= carSize && item.carLength >= carSize);
							}
							if (netWeight && netWeight > 1 && carType && carType.indexOf('空') == -1) {
								items = items.filter(item => item.minWeight <= netWeight && item.maxWeight >= netWeight);
							}
							let itemIds = items.map(item => item.id);
							if (itemIds.indexOf(type.itemId) == -1) {
								this.cleanItem(type);
							}
							type.items = items;
							tempList.push(type);
						}
						this.itemTypeList = tempList;
					},
					showAddModal() {
						this.car.visible = true;
						this.car.form.carNo = '';
						this.car.form.carSize = '';
						this.car.form.netWeight = '';
					},
					editFn(data) {
						Object.assign(this.car, {
							visible: true,
							form: JSON.parse(JSON.stringify(data))
						})
					},
					deleteFn(data) {
						this.car.list.splice(this.car.list.indexOf(data), 1);
						this.filterItems();
					},
					getGoods() {
						sa.ajaxNoLoading('/TbGoods/getList', {
							pageNo: 1,
							pageSize: 10
						}, function(resp) {
							let list = resp.data;
							this.goods = list.filter(goods => goods.id == this.m.goodsId).pop();
							this.goodsList = list;
							this.getTypeByGoodsId();
						}.bind(this))
					},
					goodsChange(v) {
						let goodsList = this.goodsList;
						let goods = goodsList.filter(goods => goods.id == v).pop();
						this.goods = goods;
						this.m.goodsName = goods.name;
						this.getTypeByGoodsId();
					},
					getTypeByGoodsId() {
						sa.ajax('/TbItemType/getTypeByGoodsId', {
							goodsId: this.m.goodsId
						}, function(resp) {
							let list = resp.data;
							let initItems = this.intiItems;
							for (let i in initItems) {
								let initItem = initItems[i];
								for (let j in list) {
									let type = list[j];
									if (type.id == initItem.itemTypeId) {
										type.num = initItem.num;
										type.price = initItem.itemPrice;
										type.itemId = initItem.itemId;
										type.remark = initItem.remark;
									}
								}
							}
							this.itemTypeList = list;
							this.filterTypeList = JSON.parse(JSON.stringify(this.itemTypeList));
						}.bind(this))
					},
					getItemType() {
						sa.ajax('/TbItem/getItemType', function(resp) {
							let list = resp.data;
							if (list.length > 0) {
								this.car.form.carType = list[0].name;
							}
							this.carTypeList = list;
						}.bind(this))
					},
					carTypeChange(v) {

					},
					getCustomerList() {
						sa.ajax('/TbCostomer/getList', {
							pageNo: 1,
							pageSize: 30,
							sortType: 20,
							judgeStatus: 2
						}, function(res) {
							let list = res.data;
							this.customerList = list;
						}.bind(this));
					},
					queryCarAsync(queryStr, cb) {
						sa.ajaxNoLoading('/TbBusinessCar/searchByNo', {
							carNo: queryStr
						}, function(resp) {
							cb(resp.data)
						}.bind(this))
					},
					closeFn() {
						parent.app.f5();
						sa.closeCurrIframe();
					},
					validBefore() {
						let goods = this.goods;
						let needCustomer = goods.needCustomer;
						let m = this.m;
						
						if (goods.needOperateTime == 1 && !m.operateTime) {
							sa.error('请选择作业时间');
							return false;
						}
						if (!m.owner && goods.needOwner == 1) {
							sa.error('请填写货主');
							return false;
						}
						if (this.car.list.length == 0) {
							sa.error('请录入车辆');
							return false;
						}
						let needCarSize = goods.needCarSize;
						let carList = this.car.list;
						for (let i in carList) {
							let car = carList[i];
							if (needCarSize == 1 && !car.carSize) {
								sa.error('请补充' + car.carNo + '规格');
								return;
							}

						}
					},
					// 提交数据
					ok: function() {
						let goods = this.goods;
						let m = this.m;
						if (!m.supplementReason) {
							sa.error('请填写补录原因');
							return false;
						}
						if (m.payStatus == 3&&!m.transactionId) {
							sa.error('请录入微信订单号');
							return false;
						}
						let carList = this.car.list;
						let needCarSize = goods.needCarSize;
						for (let i in carList) {
							let car = carList[i];
							if(!car.realInTime){
								sa.error('请填写入场时间')
								return;
							}
							if(!car.realOutTime){
								sa.error('请填写离场时间')
								return;
							}

						}
						m.carJson = JSON.stringify(carList);
						let chinaCarNo = carList
							.filter(car => sa.isCarNo(car.carNo.toUpperCase()))
							.map(car => car.carNo.toUpperCase())
							.join("、");
						let yueCarNo = carList
							.filter(car => !sa.isCarNo(car.carNo.toUpperCase()))
							.map(car => car.carNo.toUpperCase())
							.join("、");
						m.cardNo = yueCarNo;
						m.chinaCarNo = chinaCarNo;
						m.cars = null;
						m.items = null;
						sa.ajax('/TbBusiness/selectErrorBusiness', sa.removeNull(m), function(res) {
							sa.alert('补录成功', this.clean);
						}.bind(this));
					},
					// 添加/修改 完成后的动作
					clean: function() {
						parent.app.f5(); // 刷新父页面列表
						sa.closeCurrIframe(); // 关闭本页
					},
					getCurrentCustomer() {
						sa.ajax('/TbCostomer/getCurrentCustomerId', function(resp) {
							let id = resp.data;
							this.currentCustomerId = id;
						}.bind(this));
					},
					getOtherBusinessById() {
						sa.ajax('/TbBusiness/getOtherBusinessById?id=' + this.m.id, function(resp) {
							let data = resp.data;
							this.car.list = data.cars;
							this.intiItems = data.items;
							this.m = resp.data;
							this.getGoods();
						}.bind(this))
					},
				},
				mounted: function() {
					this.getCurrentCustomer();
					this.getOtherBusinessById();
					this.getCustomerList();
					this.getItemType();
				}
			})
		</script>
	</body>
</html>