<template>
	<div>
		<el-dialog
			title="创建模板"
			:visible.sync="dialogVisibleTemlate"
			width="60%"
			@close="cancelClick">
			<div>
				<div v-if="showInput"><span>模板名称：</span><el-input style="width:40%" size="small" v-model="templateName"></el-input></div>
				<el-select v-model="templateValue" placeholder="选择模板" size="small" @change="templateSelect" v-else>
					<el-option
						v-for="item in templateOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</div>
			<div class="tab-content border5 m-bottom10 mt20">
				<el-table
					height="400"
					:data="tableDataDetail"
					row-key="countryName"
					:tree-props="{children: 'children'}"
					style="width: 100%">
					<el-table-column
						align="center"
						width="150"
					>
						<template slot="header" slot-scope="scope">
							<el-input
								@input="searchClick"
								v-model="searchCountry"
								size="small"
								placeholder="搜索国家"/>
						</template>
						<template slot-scope="scope">
							<span>{{scope.row.countryName}}</span>
						</template>
					</el-table-column>
					<el-table-column align="center">
						<template slot="header" slot-scope="scope">
							<span>运费及设置<el-tooltip content="使用基于产品运费增加，将按照「产品变种运费最高值基础」+「填写值」；如需减少可以输入负值；" placement="top" effect="light">
								<i class="el-icon-question"/>
								</el-tooltip>
							</span>
							<el-popover
								v-model="visibleParities"
								placement="bottom"
								width="100"
								trigger="hover">
								<div class="parities-change">
									<div class="poi" @click="priceChangeClick(1)">USD转换CNY</div>
									<div class="poi" @click="priceChangeClick(2)">CNY转换USD</div>
									<div style="background:#eee">汇率:   <el-input placeholder="6-7" size="mini" v-model="paritiesVal" style="width:80px" @change="currencyConversion"/></div>
								</div>
								<span slot="reference" class="icon-color r poi">运费转换<i class="el-icon-arrow-down el-icon--right"/></span>
							</el-popover>
						</template>
						<el-table-column
							label="设置"
							align="center"
							width="180"
						>
							<template slot-scope="scope">
								<el-select v-model="scope.row.type" placeholder="请选择" size="small">
									<el-option
										v-for="item in scope.row.isChildren?optionsChildren:options"
										:key="item.value"
										:label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							width="180"
						>
							<template slot="header" slot-scope="scope">
								运费（USD）<i class="el-icon-edit-outline f18 poi gray-nine" @click="changeUsdClick(1)"/>
							</template>
							<template slot-scope="scope">
								<el-input v-model="scope.row.type==1||scope.row.type==3?'':scope.row.freightPriceUs" :disabled="scope.row.type==2||scope.row.type==4||scope.row.type==6?false:true" size="small" type="number" @input="(val)=>inputClick(val,scope.$index,'freightPriceUs')">
									<template slot="append">USD</template>
								</el-input>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							width="180"
						>
							<template slot="header" slot-scope="scope">
								本地运费 <i class="el-icon-edit-outline f18 poi gray-nine" @click="changeUsdClick(2)"/>
							</template>
							<template slot-scope="scope">
								<el-input v-model="scope.row.type==1||scope.row.type==3?'':scope.row.freightPriceCh" :disabled="scope.row.type==2||scope.row.type==4||scope.row.type==6?false:true" size="small" type="number" @input="(val)=>inputClick(val,scope.$index,'freightPriceCh')">
									<template slot="append">USD</template>
								</el-input>
							</template>
						</el-table-column>
					</el-table-column>
					<el-table-column
						prop="date"
						label="操作"
						align="center"
					>
						<template slot-scope="scope">
							<div class="el-dropdown-link" @click="applyCountry(scope.row)" v-if="!scope.row.isChildren">应用给所有国家</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="sureSaveClick" :loading="loading">确 定</el-button>
				<el-button @click="cancelClick">取 消</el-button>
			</span>
		</el-dialog>
		<el-dialog
			:title="priceType==1?'修改运费（USD）':'修改本地运费'"
			:visible.sync="dialogVisiblePrice"
			width="40%"
			@close="dialogVisiblePrice = false">
			<el-input
				type="number"
				style="width:50%"
				placeholder="示例：1.00"
				v-model="priceUs">
			</el-input>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="surePrice">确 定</el-button>
				<el-button @click="cancelPrice">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
export default {
	props: {
		dialogVisibleTemlate:{
			type: Boolean,
			default: false,
		},
		showInput: {
			type: Boolean,
			default: true,
		},
		editId:{
			type:String,
			default:''
		},
		tableDataAllDetail:{
			type:Array,
			default:[]
		},
		tableDataDetail:{
			type:Array,
			default:[]
		},
		templateName:{
			type:String,
			default:''
		},
		templateOptions:{
			type:Array,
			default:[]
		},
		id:{
			type:String,
			default:''
		}
	},
	data() {
		return {
			options: [{
					value: 1,
					label: '使用产品运费'
				}, {
					value: 2,
					label: '使用设置运费'
				}, {
					value: 3,
					label: '不运送此国家'
				}, {
					value: 4,
					label: '基于产品运费增加'
				}],
			optionsChildren:[{
					value: 5,
					label: '使用国家运费价格'
				},
				{
					value: 6,
					label: '使用地区运费价格'
				}, {
					value: 7,
					label: '不运送此国家区域'
			}],
			templateValue:'',
			visibleParities:false,
			paritiesVal:7,
			dialogVisiblePrice:false,
			priceType:1,
			priceUs:'',
			searchCountry:'',
			editId:'',
			loading:false
		}
	},
	methods:{
		currencyConversion(val){
			if(val<6){
				this.$message({
					message:'运费转换汇率不能小于6',
					type:'error'
				})
				this.paritiesVal=6
				return
			}
		},
		inputClick(val,index,type){
			if(val<0){
				let absVal=Math.abs(val)
				this.$set(this.tableDataDetail[index],type,absVal)
			}
			if(val>1000){
				this.$set(this.tableDataDetail[index],type,1000)
			}
		},
		templateSelect(val){
			if(val=='add'){
				let routeData = this.$router.resolve({
					name: "templateList",
				});
				window.open(routeData.href, '_blank');
			}else{
				this.editId=val
				this.axios({
					url: 'assistant/product/freightTemplate/findById',
					data:{
						productReleaseId:this.id,
						id:val
					},
					method: "post"
				}).then(res => {
					if(res.success){
						// let shopArry=[]
						// res.module.details.forEach((item)=>{
						// 	if(item.type!=1){
						// 		shopArry.push(item.countryName)
						// 	}
						// })
						// this.templateTableData[0].countrys=shopArry.join(',')
						this.tableDataDetail=res.module.details
            this.tableDataAllDetail=res.module.details
					}
				})
			}
		},
		cancelClick(){
			this.$emit('cancelClick')
		},
		searchClick(){
			const{searchCountry,tableDataAllDetail}=this
			let isChild=false
			this.tableDataDetail=tableDataAllDetail.filter(item=>{
				if(item.children){
					isChild=item.children.some(itemChild => {
						return itemChild.countryName.indexOf(searchCountry)!=-1
					});
				}
				if(item.countryName.indexOf(searchCountry)!=-1 || isChild) return item
			})
      console.log(tableDataAllDetail.length);
		},
		sureSaveClick(){
			const{editId,templateName,tableDataDetail,tableDataAllDetail,showInput,templateValue,paritiesVal}=this
			if(paritiesVal<6){
				this.$message({
					message:'运费转换汇率不能小于6',
					type:'error'
				})
				return
			}
			if(showInput){
				if(!templateName){
					this.$message({
						message:'模板名称不能为空',
						type:'error'
					})
					return
				}
				this.loading=true
				this.axios({
					url: 'assistant/product/freightTemplate/save',
					data:{
						id:editId,
						name:templateName,
						details:JSON.stringify(tableDataAllDetail),
					},
					method: "post"
				}).then(res => {
					if(res.success){
						this.loading=false
						this.$emit('sureSaveClick')
					}else{
						this.loading=false
					}
				})
			}else{
				this.$emit('sureSaveClick',tableDataAllDetail)
				this.templateValue=''
			}
		},
		priceChangeClick(type){
			const {tableDataDetail,paritiesVal}=this
			tableDataDetail.map((item)=>{
				if(item.type==2||item.type==4){
					if(type==1){
						this.$set(item,'freightPriceCh',(paritiesVal*item.freightPriceUs).toFixed(2))
					}else{
						this.$set(item,'freightPriceUs',(item.freightPriceCh/paritiesVal).toFixed(2))
					}
				}
				if(item.children){
					item.children.map((child)=>{
						if(child.type==6){
							if(type==1){
								this.$set(child,'freightPriceCh',(paritiesVal*child.freightPriceUs).toFixed(2))
							}else{
								this.$set(child,'freightPriceUs',(child.freightPriceCh/paritiesVal).toFixed(2))
							}
						}
					})
				}
			})
			this.visibleParities=false
		},
		changeUsdClick(type){
			this.priceType=type
			this.dialogVisiblePrice=true
		},
		surePrice(){
			const {priceType,priceUs,tableDataDetail}=this
			tableDataDetail.map((item)=>{
				if(item.type==2||item.type==4){
					if(priceType==1){
						this.$set(item,'freightPriceUs',priceUs)
					}else{
						this.$set(item,'freightPriceCh',priceUs)
					}
				}
			})
			this.cancelPrice()
		},
		cancelPrice(){
			this.dialogVisiblePrice=false
			this.priceUs=''
		},
		applyCountry(val){
			this.tableDataDetail.map((item)=>{
				this.$set(item,'type',val.type)
				this.$set(item,'freightPriceUs',val.freightPriceUs)
				this.$set(item,'freightPriceCh',val.freightPriceCh)
			})
		},
	},
}
</script>
<style lang="less" scoped>
.el-dropdown-link {
	cursor: pointer;
	color: #367EE2;
	font-size: 13px;
}
</style>
