<template>
	<!-- 户外广告上刊确认单样例 -->
	<div style="margin: 5px 0 20px 0;padding: 0 20px;" class='ggtabinp'>
		<el-table class="com-table" ref="multipleTable" :data="infodata" tooltip-effect="dark" size="small" border
			style="width: 100%">
			<el-table-column prop="media_type_name" label="媒体类别" width="200">
				<template slot-scope="scope">
					<el-select clearable v-model="scope.row.mediaTypeCode" :disabled="titname != '添加'&&vision != '流程发起'" @change="getname(scope)">
						<el-option v-for="items in mediaType" :key="items.dataCode" :label="items.dataName" :value="items.dataCode">
						</el-option>
					</el-select>
				</template>
			</el-table-column>
			<el-table-column prop="adv_site" label="广告位置" width="300">
				<template slot-scope="scope">
					<el-input v-model="scope.row.advSite" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="picture_size" label="画面尺寸" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.pictureSize" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="screen_num" label="屏数" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.screenNum" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="media_site" label="媒体位置" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.mediaSite" :disabled="titname != '添加'&&vision != '流程发起'">
					</el-input>
				</template>
			</el-table-column>
			<el-table-column prop="adv_length" label="广告长度(秒/次)" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.advLength" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="frequency" label="频次(次/天/台)" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.frequency" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</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="pub_week" label="发布小计(周)" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.pubWeek" :disabled="titname != '添加'&&vision != '流程发起'"></el-input>
				</template>
			</el-table-column>
			<el-table-column label="广告发布期" align="center">
				<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="end_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="pub_price" label="广告发布费小计(元)" width="200">
				<template slot-scope="scope">
					<el-input v-model="scope.row.pubPrice" :disabled="titname != '添加'&&vision != '流程发起'"
						@change="sumzkj(scope)" type="number"></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 != '流程发起'"
						@change="sumzkj(scope)" type="number"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="discountPrice" label="折扣价(元)" width="200"></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="box">
			<span class="sumbox">广告发布费(刊例价)：{{advPriceSum}}</span>
			<span class="sumbox">广告发布费(折扣价)：{{advDiscountSum}}</span>
			<span class="sumbox">其他优惠：<el-input v-model="otherDiscount" :disabled="titname != '添加'&&vision != '流程发起'"
						@change="sumadd" type="number" style="width: 100px;"></el-input></span>
			<span class="sumbox">广告发布费：{{contractAdvCost}}</span>
			<span class="sumbox">税费：{{contractAdvTax}}</span>
			<span class="sumbox">合同总价款：{{allSum}}</span>
		</div>
	</div>

</template>

<script>
	export default {
		props: ["vision", "titname", "taxRate","infodatas","status","allSumnum","otherinfo"],
		data() {
			return {
				infodata: [],
				allSum: 0,
				advPriceSum: 0,
				advDiscountSum: 0,
				contractAdvCost: 0,
				contractAdvTax: 0,
				otherDiscount: 0,
				mediaType:[]
			};
		},
		methods: {
			choline(v, n) {
				if (v == 1) {
					this.infodata.push({
						pubPrice: 0,
						discountRate: 0,
						discountPrice: 0
					})
				} else {
					this.infodata.splice(n.$index, 1)
				}
				this.sumadd();
			},
			sumzkj(v) {
                v.row.discountRate=(v.row.discountRate.toString()).replace(/[^\d.]/g,'');
				let info = this.infodata[v.$index];
				this.infodata[v.$index].discountPrice = info.pubPrice * info.discountRate / 100;
				this.infodata[v.$index].discountPrice = Math.floor(this.infodata[v.$index].discountPrice * 100) / 100;
				this.sumadd();				
			},
			sumadd(){
				this.advPriceSum = 0;
				this.advDiscountSum = 0;
				for (let i = 0; i < this.infodata.length; i++) {
					this.advPriceSum += this.infodata[i].pubPrice * 1;
					this.advDiscountSum += this.infodata[i].discountPrice;
				}
				if(!this.taxRate){
					this.$message({
						message: '请先选择供应商！',
						type: 'error'
					});
					return
				}				
				this.contractAdvCost = (this.advDiscountSum - this.otherDiscount) / (this.taxRate.split("%")[0]*1 + 100) * 100;
				this.contractAdvTax = this.contractAdvCost*(this.taxRate.split("%")[0]*1)/100;
				this.contractAdvCost = Math.round(this.contractAdvCost * 100) / 100;
				this.contractAdvTax = Math.round(this.contractAdvTax * 100) / 100;
				this.allSum = this.contractAdvCost + this.contractAdvTax;
				this.allSum = Math.round(this.allSum * 100) / 100;
			},
			gettype(){
				this.$http({
				    url: "/market/cfgDataDict/queryList",
				    method: "post",
				    headers: {
				        "Content-Type": "application/json",
				    },
				    data: {
				        dictCode: 'mediaType'
				    },
				}).then((res) => {
				    this.mediaType = res.data;
				});
			},
			getname(v){
				for (let i = 0; i < this.mediaType.length; i++) {
					if(this.mediaType[i].dataCode == v.row.mediaTypeCode){
						this.infodata[v.$index].mediaTypeName = this.mediaType[i].dataName
					}
				}
			}
		},
		mounted() {},
		created() {
			this.infodata = [{
				pubPrice: 0,
				discountRate: 0,
				discountPrice: 0
			}, {
				pubPrice: 0,
				discountRate: 0,
				discountPrice: 0
			}];
			this.gettype();
			if(this.status){
				this.infodata = this.infodatas;
				this.allSum = this.allSumnum;
				this.advPriceSum = this.otherinfo.advPriceSum;
				this.advDiscountSum = this.otherinfo.advDiscountSum;
				this.contractAdvCost = this.otherinfo.contractAdvCost;
				this.contractAdvTax = this.otherinfo.contractAdvTax;
				this.otherDiscount = this.otherinfo.otherDiscount;
			}
		},
		watch: {
			allSum(v) {
				let x= {
					advPriceSum: this.advPriceSum,
					advDiscountSum: this.advDiscountSum,
					contractAdvCost: this.contractAdvCost,
					contractAdvTax: this.contractAdvTax,
					otherDiscount: this.otherDiscount
				}
				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"):'';
				}
				this.$emit('backsum', this.allSum,this.infodata,x)
			},
			taxRate(){
				this.sumadd();
			},
			status(v){
				this.infodata = this.infodatas;
				this.allSum = this.allSumnum;
				this.advPriceSum = this.otherinfo.advPriceSum;
				this.advDiscountSum = this.otherinfo.advDiscountSum;
				this.contractAdvCost = this.otherinfo.contractAdvCost;
				this.contractAdvTax = this.otherinfo.contractAdvTax;
				this.otherDiscount = this.otherinfo.otherDiscount;
			}
		}
	};
</script>

<style scoped lang="scss">
	.box {
		display: flex;
		justify-content: space-between;
		background: aliceblue;
		margin: 20px 0;
		align-items: center;
		flex-wrap: wrap;
	}

	.sumbox {
		// width: 200px;
		float: right;
		padding: 5px;
		font-size: 18px;
	}
	.el-date-editor{
		width: 178px!important;
	}
</style>
