<template>
	<!-- 广播及电视上刊确认单样例 -->
	<div style="margin: 5px 0 20px 0;padding: 0 20px;">
		<el-table class="com-table" ref="multipleTable" :data="infodata" tooltip-effect="dark" size="small" border
			style="width: 100%">
			<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="colMenu" label="栏目" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.colMenu" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="adv_form" label="具体形式" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.advForm" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="put_spec" label="规格" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.putSpec" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="put_cycle" label="发布周期" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.putCycle" :disabled="titname != '添加'&&vision != '流程发起'">
					</el-input>
				</template>
			</el-table-column>
			<el-table-column prop="put_freq" label="频次" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.putFreq" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="start_time" label="时段" width="200">
				<el-table-column prop="start_time" label="开始时间" width="200">
					<template slot-scope="scope">
						<el-date-picker :disabled="titname != '添加'&&vision != '流程发起'" v-model="scope.row.startTime"
							type="date">
						</el-date-picker>
					</template>
				</el-table-column>
				<el-table-column prop="start_time" label="结束时间" width="200">
					<template slot-scope="scope">
						<el-date-picker :disabled="titname != '添加'&&vision != '流程发起'" v-model="scope.row.endTime"
							type="date">
						</el-date-picker>
					</template>
				</el-table-column>
			</el-table-column>
			<el-table-column prop="adv_price" label="刊例价" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.advPrice" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="discount_rate" label="折扣" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.discountRate" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>
			<el-table-column label="结算" align="center">
				<el-table-column prop="num_days" label="天数" width="100">
					<template slot-scope="scope">
						<el-input v-model="scope.row.numDays" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="cost_tax" label="金额(含税)" width="100">
					<template slot-scope="scope">
						<el-input v-model="scope.row.costTax" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="cost_all" label="金额(不含税)" width="100">
					<template slot-scope="scope">
						<el-input v-model="scope.row.costAll" :disabled="titname != '添加'&&vision != '流程发起'"
							@change="sumjeno">
						</el-input>
					</template>
				</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({
						costAll: 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].costAll * 1;
				}
			},
			sumjeno() {
				this.allSum = 0;
				for (let i = 0; i < this.infodata.length; i++) {
					this.allSum += this.infodata[i].costAll * 1;
				}
				for (let i = 0; i < this.infodata.length; i++) {
					this.infodata[i].startTime ? this.infodata[i].startTime = this.$formatDate(this.infodata[i].startTime,
						"YYYY-MM-DD") : '';
					this.infodata[i].endTime ? this.infodata[i].endTime = this.$formatDate(this.infodata[i].endTime,
						"YYYY-MM-DD") : '';
				}
			}
		},
		mounted() {},
		created() {
			this.infodata = [{
				costAll: 0
			}, {
				costAll: 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;
	}
	.el-date-editor{
		width: 178px!important;
	}
</style>
