<template>
	<!-- 互联网刊确认单样例 -->
	<div style="margin: 5px 0 20px 0;padding: 0 20px;" class='ggtabinp'>

		<el-table class="com-table" :data="infodata" tooltip-effect="dark" size="small" border style="width: 100%">

			<el-table-column prop="media_type" label="媒体类别" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.mediaType" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="media_name" label="媒体名称" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.mediaName" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="project_name" label="项目名称" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.projectName" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="put_site" label="投放位置" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.putSite" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="adv_link" label="广告目标链接地址" width="300">
				<template slot-scope="scope">
					<el-input v-model="scope.row.advLink" :disabled="titname != '添加'&&vision != '流程发起'">
					</el-input>
				</template>
			</el-table-column>

			<el-table-column prop="put_form" label="投放形式" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.putForm" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="material_req" label="物料要求" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.materialReq" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="terminal_type" label="pc/wap/app/SEM" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.terminalType" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="put_unit" label="投放单位(CPM,CPD等)" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.putUnit" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="area_location" label="区域定位" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.areaLocation" :disabled="titname != '添加'&&vision != '流程发起'">
					</el-input>
				</template>
			</el-table-column>

			<el-table-column prop="average_click" label="日均点击量预估" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.averageClick" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="average_exposure" label="日均曝光量预估" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.averageExposure" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="monitor_click" label="可添加第三方曝光监测(是/否)" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.monitorClick" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="monitor_exposure" label="可添加第三方点击监测(是/否)" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.monitorExposure" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="exposureSum" label="总曝光" width="100"></el-table-column>

			<el-table-column prop="d1" label="1日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d1" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d2" label="2日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d2" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d3" label="3日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d3" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d4" label="4日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d4" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d5" label="5日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d5" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d6" label="6日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d6" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d7" label="7日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d7" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d8" label="8日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d8" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d9" label="9日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d9" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d10" label="10日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d10" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d11" label="11日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d11" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d12" label="12日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d12" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d13" label="13日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d13" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d14" label="14日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d14" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d15" label="15日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d15" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d16" label="16日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d16" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d17" label="17日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d17" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d18" label="18日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d18" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d19" label="19日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d19" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d20" label="20日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d20" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d21" label="21日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d21" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d22" label="22日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d22" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d23" label="23日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d23" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d24" label="24日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d24" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d25" label="25日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d25" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d26" label="26日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d26" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d27" label="27日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d27" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d28" label="28日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d28" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d29" label="29日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d29" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d30" label="30日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d30" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="d31" label="31日" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.d31" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumday(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="unitPrice" label="刊例单价" width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row.unitPrice" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumprice(scope)"></el-input>
				</template>
			</el-table-column>

			<el-table-column prop="remark" label="备注" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.remark" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>

			<el-table-column label="媒体总价(人民币)" align="center">
				<el-table-column prop="discountRate" label="折扣(%)" width="100">
					<template slot-scope="scope">
						<el-input v-model="scope.row.discountRate" :disabled="titname != '添加'&&vision != '流程发起'" type="number"
						@change="sumprice(scope)"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="discountPrice" label="折后价格" width="100"></el-table-column>
				<el-table-column prop="buyPrice" label="购买总价" width="100"></el-table-column>
			</el-table-column>

			<el-table-column label="操作" width="120px" align="center" v-if="titname == '添加'" fixed="right">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" @click="choline(1,scope)">添加</el-button>
					<el-button size="mini" type="danger" @click="choline(2,scope)">删除</el-button>
				</template>
			</el-table-column>

		</el-table>
		<div class="sumbox">总价：{{allSum}}</div>
	</div>

</template>

<script>
	export default {
		props: ["vision", "titname","infodatas","status","allSumnum"],
		data() {
			return {
				infodata: [],
				allSum: 0
			};
		},
		methods: {
			choline(v, n) {
				if (v == 1) {
					this.infodata.push({exposureSum:0,discountPrice:0,buyPrice:0,discountRate:0})
				} else {
					this.infodata.splice(n.$index, 1)
				}
				this.allSum = 0;
				for (let i = 0; i < this.infodata.length; i++) {
					this.allSum += this.infodata[i].buyPrice;
				}
			},
			sumprice(v){
                v.row.discountRate=v.row.discountRate.replace(/[^\d.]/g,'');
				let info = this.infodata[v.$index];

				this.infodata[v.$index].discountPrice = info.unitPrice*info.discountRate/100;
				this.infodata[v.$index].discountPrice = Math.floor(this.infodata[v.$index].discountPrice * 100) / 100;

				this.infodata[v.$index].buyPrice = info.discountPrice*info.exposureSum;
				this.infodata[v.$index].buyPrice = Math.floor(this.infodata[v.$index].buyPrice * 100) / 100;

				this.allSum = 0;
				for (let i = 0; i < this.infodata.length; i++) {
					this.allSum += this.infodata[i].buyPrice;
				}
			},
			sumday(v) {
				let info = this.infodata[v.$index];
				this.infodata[v.$index].exposureSum = 0;
				info.d1 ? this.infodata[v.$index].exposureSum += info.d1 * 1 : '';
				info.d2 ? this.infodata[v.$index].exposureSum += info.d2 * 1 : '';
				info.d3 ? this.infodata[v.$index].exposureSum += info.d3 * 1 : '';
				info.d4 ? this.infodata[v.$index].exposureSum += info.d4 * 1 : '';
				info.d5 ? this.infodata[v.$index].exposureSum += info.d5 * 1 : '';
				info.d6 ? this.infodata[v.$index].exposureSum += info.d6 * 1 : '';
				info.d7 ? this.infodata[v.$index].exposureSum += info.d7 * 1 : '';
				info.d8 ? this.infodata[v.$index].exposureSum += info.d8 * 1 : '';
				info.d9 ? this.infodata[v.$index].exposureSum += info.d9 * 1 : '';
				info.d10 ? this.infodata[v.$index].exposureSum += info.d10 * 1 : '';
				info.d11 ? this.infodata[v.$index].exposureSum += info.d11 * 1 : '';
				info.d12 ? this.infodata[v.$index].exposureSum += info.d12 * 1 : '';
				info.d13 ? this.infodata[v.$index].exposureSum += info.d13 * 1 : '';
				info.d14 ? this.infodata[v.$index].exposureSum += info.d14 * 1 : '';
				info.d15 ? this.infodata[v.$index].exposureSum += info.d15 * 1 : '';
				info.d16 ? this.infodata[v.$index].exposureSum += info.d16 * 1 : '';
				info.d17 ? this.infodata[v.$index].exposureSum += info.d17 * 1 : '';
				info.d18 ? this.infodata[v.$index].exposureSum += info.d18 * 1 : '';
				info.d19 ? this.infodata[v.$index].exposureSum += info.d19 * 1 : '';
				info.d20 ? this.infodata[v.$index].exposureSum += info.d20 * 1 : '';
				info.d21 ? this.infodata[v.$index].exposureSum += info.d21 * 1 : '';
				info.d22 ? this.infodata[v.$index].exposureSum += info.d22 * 1 : '';
				info.d23 ? this.infodata[v.$index].exposureSum += info.d23 * 1 : '';
				info.d24 ? this.infodata[v.$index].exposureSum += info.d24 * 1 : '';
				info.d25 ? this.infodata[v.$index].exposureSum += info.d25 * 1 : '';
				info.d26 ? this.infodata[v.$index].exposureSum += info.d26 * 1 : '';
				info.d27 ? this.infodata[v.$index].exposureSum += info.d27 * 1 : '';
				info.d28 ? this.infodata[v.$index].exposureSum += info.d28 * 1 : '';
				info.d29 ? this.infodata[v.$index].exposureSum += info.d29 * 1 : '';
				info.d30 ? this.infodata[v.$index].exposureSum += info.d30 * 1 : '';
				info.d31 ? this.infodata[v.$index].exposureSum += info.d31 * 1 : '';
				this.infodata[v.$index].buyPrice = info.discountPrice*info.exposureSum;
				this.infodata[v.$index].buyPrice = Math.floor(this.infodata[v.$index].buyPrice * 100) / 100;
				this.allSum = 0;
				for (let i = 0; i < this.infodata.length; i++) {
					this.allSum += this.infodata[i].buyPrice;
				}
			}
		},
		mounted() {},
		created() {
			this.infodata = [{exposureSum:0,discountPrice:0,buyPrice:0,discountRate:0}, {exposureSum:0,discountPrice:0,buyPrice:0,discountRate:0}];
			if(this.status){
				this.infodata = this.infodatas;
				this.allSum = this.allSumnum;
			}
		},
		watch:{
			allSum(v){
				this.$emit('backsum',this.allSum,this.infodata)
			},
			status(v){
				this.infodata = this.infodatas;
				this.allSum = this.allSumnum;
			}
		}
	};
</script>

<style scoped lang="scss">
	.sumbox {
		width: 200px;
		background: aliceblue;
		float: right;
		padding: 5px;
		margin: 20px 0;
		font-size: 18px;
	}
</style>
