<template>
	<view>
		<dHeader :title="$lang.lang.index.price"></dHeader>
		<view class="start-bar"></view>
		<view class="corder bgf">
			<view class="corder-tab1">
				<view class="corder-tab1-item corder-picker">
					<image src="../../static/img/corder-1-3.png" mode=""></image>
					<text><span class="redcolor">*</span>{{$lang.lang.price.startCity}}</text>
					<picker :class="config.tradeCity1.index == 0 ? 'v-picker v-picker-2' : 'v-picker'" :value="config.tradeCity1.index" :range="config.tradeCity1.label" data-config="tradeCity1" data-key="departureId" @change="configChange" v-if="config.tradeCity1.value.length > 0">
						<view class="uni-input">{{config.tradeCity1.label[config.tradeCity1.index]}}</view>
					</picker>
					<image class="rgt" src="../../static/img/rgt.png" mode=""></image>
				</view>
				<view class="corder-tab1-item corder-picker">
					<image src="../../static/img/corder-1-4.png" mode=""></image>
					<text><span class="redcolor">*</span>{{$lang.lang.price.endCity}}</text>
					<picker :class="config.tradeCity2.index == 0 ? 'v-picker v-picker-2' : 'v-picker'" :value="config.tradeCity2.index" :range="config.tradeCity2.label" data-config="tradeCity2" data-key="objectiveId" @change="configChange" v-if="config.tradeCity2.value.length > 0">
						<view class="uni-input">{{config.tradeCity2.label[config.tradeCity2.index]}}</view>
					</picker>
					<image class="rgt" src="../../static/img/rgt.png" mode=""></image>
				</view>
				<view class="corder-tab1-item corder-picker">
					<image src="../../static/img/shop_icon.png" mode=""></image>
					<text><span class="redcolor">*</span>{{$lang.lang.price.name}}</text>
					<cuihai-combox style="width: 57%;" :label="$lang.lang.notices.please" :emptyTips="$lang.lang.create.noSelect" :placeholder="$lang.lang.notices.please" :candidates="config.productZh.label"  @getValue="getValue"></cuihai-combox>
<!-- 					<picker :class="config.productZh.index == 0 ? 'v-picker v-picker-2' : 'v-picker'"  :value="config.productZh.index" :range="config.productZh.label" data-config="productZh" data-key="prodId" @change="configChange" v-if="config.productZh.value.length > 0">
						<view class="uni-input">{{config.productZh.label[config.productZh.index]}}</view>
					</picker> -->
					<!-- <image class="rgt" src="../../static/img/rgt.png" mode=""></image> -->
				</view>
				<view class="corder-tab1-item corder-picker">
					<image src="../../static/img/corder-1-1.png" mode=""></image>
					<text>{{$lang.lang.price.transport}}</text>
					<picker :class="config.transport.index == 0 ? 'v-picker v-picker-2' : 'v-picker'"  :value="config.transport.index" :range="config.transport.label" data-config="transport" data-key="transportId" @change="configChange" v-if="config.transport.value.length > 0">
						<view class="uni-input">{{config.transport.label[config.transport.index]}}</view>
					</picker>
					<image class="rgt" src="../../static/img/rgt.png" mode=""></image>
				</view>
				<view class="corder-tab1-item corder-picker" v-if="!channeled">
					<image src="../../static/img/corder-1-2.png" mode=""></image>
					<text>{{$lang.lang.price.channel}}</text>
					<picker :class="config.channel.index == 0 ? 'v-picker v-picker-2' : 'v-picker'" :disabled="channeled" :value="config.channel.index" :range="config.channel.label" data-config="channel" data-key="channelId" @change="configChange" v-if="config.channel.value.length > 0">
						<view class="uni-input">{{config.channel.label[config.channel.index]}}</view>
					</picker>
					<image class="rgt" src="../../static/img/rgt.png" mode=""></image>
				</view>
				<view class="corder-tab1-item corder-picker">
					<image src="../../static/img/weight_icon.png" mode=""></image>
					<text><span class="redcolor">*</span>{{$lang.lang.price.weight}}</text>
					<input  v-model="params.weight" type="number"/>
					<text class="weight_unit">kg</text>
				</view>
				<view class="corder-tab1-item corder-picker">
					<image src="../../static/img/weight_icon.png" mode=""></image>
					<text>{{$lang.lang.price.num}}<span class="redcolor">*</span></text>
					<input  v-model="params.num" type="number"/>
				</view>
				<view class="corder-tab1-item corder-picker">
					<image src="../../static/img/weight_icon.png" mode=""></image>
					<text><span class="redcolor">*</span>{{$lang.lang.price.sum}}</text>
					<input  v-model="params.quantity" type="number"/>
				</view>
				<view class="shop_info">
					<view class="shop_l">
						<text><span class="redcolor">*</span>{{$lang.lang.price.long}}</text>
						<input v-model="params.long" type="number" />
						<text class="shop_unit">cm</text>
					</view>
					<view class="shop_l">
						<text><span class="redcolor">*</span>{{$lang.lang.price.width}}</text>
						<input v-model="params.wide" type="number" />
						<text class="shop_unit">cm</text>
					</view>
					<view class="shop_l">
						<text><span class="redcolor">*</span>{{$lang.lang.price.high}}</text>
						<input v-model="params.high" type="number" />
						<text class="shop_unit">cm</text>
					</view>
				</view>
			</view>
		</view>
		<view class="pirce_btn" @click="toSearch">
			{{$lang.lang.price.price}}
		</view>
		<view class="corder bgf result">
			<view class="result_list" v-for="(item,index) in result" :key="index">
				<view class="result_title">{{index+1}}</view>
				<view class="result_info">
					<view>
						<text>{{$lang.lang.price.transport}} : </text>
						<text>{{getConfigLabel('transport',item.transportId)}}</text>
					</view>
					<view v-if="!channeled">
						<text>{{$lang.lang.price.channel}} : </text>
						<text>{{getConfigLabel('channel',item.channelId)}}</text>
					</view>
					<view>
						<text>{{$lang.lang.price.startLetive}} : </text>
						<text>{{($lang.locale=='zh'?item.startTitleZh:item.startTitleEn)||$lang.lang.orderInfo.no}}</text>
					</view>
					<view>
						<text>{{$lang.lang.price.endLetive}} : </text>
						<text>{{($lang.locale=='zh'?item.destTitleZh:item.destTitleEn)||$lang.lang.orderInfo.no}}</text>
					</view>
					<view>
						<text>{{item.charging==0?$lang.lang.price.fee:$lang.lang.price.allPrice}} : </text>
						<text v-if="item.seaFreight>0">{{item.seaFreight}}{{getCurrencyName(item.seaFreightCurrency)}}/{{getVolume(item.seaFreightVolume)}}</text>
						<text v-else>{{$lang.lang.price.noPrice}}</text>
					</view>
					<view v-if="item.charging==0">
						<text>{{$lang.lang.create.clearFee}} : </text>
						<text v-if="item.seaFreight>0">{{item.clearanceFreight}}{{getCurrencyName(item.clearanceFreightCurrency)}}/{{getVolume(item.clearanceFreightVolume)}}</text>
						<text v-else>{{$lang.lang.price.noPrice}}</text>
					</view>
					<view v-if="item.charging==0" class="price_view">
						<text>{{$lang.lang.price.forecastFee}} : </text>
						<view class="price_list" v-if="item.seaFreightCurrency!=item.clearanceFreightCurrency">
							<text>{{parseInt(item.estSeaFreight)}}{{getCurrencyName(item.seaFreightCurrency)}}</text>
							<text>{{parseInt(item.estClearanceFreight)}}{{getCurrencyName(item.clearanceFreightCurrency)}}</text>
						</view>
						<text v-else>{{parseInt(item.estSeaFreight)+parseInt(item.estClearanceFreight)}}{{getCurrencyName(item.seaFreightCurrency)}}</text>
					</view>
					<view v-if="item.charging==1">
						<text>{{$lang.lang.price.forecastFee}} : </text>
						<text>{{parseInt(item.estSeaFreight)}}{{getCurrencyName(item.seaFreightCurrency)}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="notice_text">{{$lang.lang.price.warmPrompt}}</view>
			<image class="price_notice" src="../../static/img/price_notice.png" mode="widthFix"></image>
			<image class="price_icon" src="../../static/img/price_icon.png" mode="widthFix"></image>
			<view class="notice_content">
				<view class="text" v-html="leviteInfo"></view>
<!-- 				<text>1.以上报价仅供参考，实际计费以装箱打包后的实重或轻泡体积重 来计算。</text>
				<text>2.请注意渠道的选择，不同的东西选择不同的渠道价格就不同。</text>
				<text>3.报价不含目的地关税，不含偏远或超重超长费。</text>
				<text>4.包裹赔偿方法：包裹在运输途中发生丢失，我司将会按照包裹购 买价值原价赔偿，但最高赔偿为包裹USD100/票，若包裹价值比 较昂贵的请自行购买保险。若出现外包装完好，但内件损坏， 我司不予赔偿。若出现外包装破损，请在签收前立即开箱检查包裹， 并向快递员取证，以便后期进行索赔。</text>
				<text>5.本公司拒绝接收国家明令禁止的物品，如：易燃易爆品、毒品、 刀具、枪支弹药及配件、淫秽、反动刊物等，若出现夹带被海关 查获，由此产生的责任由客户自行承担!</text> -->
			</view>
		</view>
	</view>
</template>

<script>
	import dHeader from '../../components/dHeader/index.vue'
	import cuihaiCombox from '../../components/cuihai-combox/cuihai-combox.vue'
	export default {
		components: {
			dHeader,cuihaiCombox
		},
		data() {
			return {
				config: {
					transport:{
						index: 0,
						label: [this.$lang.lang.notices.please],
						value: [''],
						cssClass:['']
					}, 
					channel:{
						index: 0,
						label: [this.$lang.lang.notices.please],
						value: [''],
					},
					tradeCity1: {
						index: 0,
						label: [this.$lang.lang.notices.please],
						value: [''],
					},
					tradeCity2: {
						index: 0,
						label: [this.$lang.lang.notices.please],
						value: [''],
					},
					productZh:{
						index: 0,
						label: [this.$lang.lang.notices.please],
						value: [''],
						labelZh:[''],
						labelEn:['']
					},
				},
				params:{
					departureId:'',
					objectiveId:'',
					prodId:'',
					transportId:'',
					channelId:'',
					weight:null,
					num:null,
					quantity:null,
					long:null,
					wide:null,
					high:null,
				},
				result:[],
				noticeData:'',
				channeled:true,
				currency:[],
				leviteInfo:'',
				volumeList:[]
			}
		},
		onLoad() {
			this.orderConfig('transport_type', 'transport')
			this.getTradeCity('tradeCity1')
			this.getTradeCity('tradeCity2')
			this.getproductData()
			this.getChanel()
			this.getCurrency()
			this.getvolumeData()
			this.getLeviteData()
		},
		methods: {
			getLeviteData () {
				this.$request.get('/app-api/system/need-know/getByKey',{key:'pricequery'}).then(res => {
					if(res.code == 0 && res.data){
						if(this.$lang.locale=='zh'){
							this.leviteInfo = res.data.contentZh
						}else{
							this.leviteInfo = res.data.contentEn
						}
					}
				})
			},
			getValue(e) {
				if(e){
					var sindex = 0
					this.config.productZh.label.forEach((item,index)=>{
						if(item == e){
							sindex = index
						}
					})
					console.log(sindex)
					this.params.prodId = this.config['productZh'].value[sindex]
					console.log(this.params.prodId)
					this.params.prodTitleZh =this.config['productZh'].labelZh[sindex]
					this.params.prodTitleEn =this.config['productZh'].labelEn[sindex]
					this.config['productZh'].index = sindex
					}
			},
			//获取始发、目的城市
			getTradeCity(key){
				let that = this
				let type = key == 'tradeCity1' ? 2 : 1
				that.$request.get('/app-api/ecw/region/getTradeCityList', {type: type}).then(res => {
					if(res.code==0&&res.data.length > 0){
						let d = res.data
						for(let i in d){
							if(that.$lang.locale=='zh'){
								that.config[key].label.push(d[i].titleZh)
							}else{
								that.config[key].label.push(d[i].titleEn)
							}
							that.config[key].value.push(d[i].id)
						}
					}
				})
			},
			getCurrencyName(id){
				let that = this
				var val = that.currency.find(item=>item.id == id)
				if(val) {
					if(that.$lang.locale=='zh'){
						return val.titleZh
					}else{
						return val.titleEn
					}
				}
			},
			getVolume(id){
				let that = this
				var val = that.volumeList.find(item=>item.id == id)
				if(val) {
					if(that.$lang.locale=='zh'){
						return val.titleZh
					}else{
						return val.titleEn
					}
				}
			},
			getvolumeData(){
				this.$request.get('/app-api/app/unit/list').then(res => {
					if(res.code==0&&res.data&&res.data.length>0){
						this.volumeList = res.data
					}
				})
			},
			getCurrency(){
				this.$request.get('/app-api/ecw/currency/list').then(res => {
					if(res.code==0&&res.data&&res.data.length>0){
						this.currency = res.data
					}
				})
			},
			getConfigLabel(key,data){
				var indexs = 0
				this.config[key].value.forEach(function(item,index){
					if(item == data){
						indexs = index
					}
				})
				return this.config[key].label[indexs]
			},
			orderConfig (field, key) {
				let that = this
				that.$request.getConfig(field).then(res => {
					if(res.data.list.length > 0){
						let d = res.data.list
						for(let i in d){
							if(that.$lang.locale=='zh'){
								that.config[key].label.push(d[i].label)
							}else{
								that.config[key].label.push(d[i].labelEn)
							}					
							that.config[key].value.push(d[i].value)
							if(key == 'transport'){
								that.config[key].cssClass.push(d[i].cssClass)
							}
						}						
					}
				})
			},
			configChange (e){
				this.params[e.target.dataset.key] = this.config[e.target.dataset.config].value[e.detail.value]
				this.config[e.target.dataset.config].index = e.detail.value
				if(e.target.dataset.key == 'transportId'){
					if(this.config[e.target.dataset.config].cssClass[e.detail.value] == 'channel'){
						this.channeled = false
					}else{
						this.config.channel.index = 0
						this.channeled = true
					}
				}
			},
			//获取出货渠道
			getChanel(){
				let that = this
				that.$request.get('/app-api/ecw/channel/select').then(res => {
					if(res.code==0&&res.data.length > 0){
						let d = res.data
						for(let i in d){
							if(that.$lang.locale=='zh'){
								that.config['channel'].label.push(d[i].nameZh)
							}else{
								that.config['channel'].label.push(d[i].nameEn)
							}	
							
							that.config['channel'].value.push(d[i].channelId)
						}
					}
				})
			},
			//获取商品名
			getproductData(){
				let that = this
				that.$request.get('/app-api/ecw/product/list').then(res => {
					if(res.code==0&&res.data.length > 0){
						let d = res.data
						that.productData = res.data
						for(let i in d){
							
							that.config['productZh'].label.push(d[i].titleZh+'('+d[i].titleEn+')')
							that.config['productZh'].labelZh.push(d[i].titleZh)
							that.config['productZh'].labelEn.push(d[i].titleEn)
							that.config['productZh'].value.push(d[i].id)							
						}
					}
				})
			},
			toSearch(){
				if(this.params.departureId==''||this.params.departureId==null){
					return uni.showToast({
						title: this.$lang.lang.notices.startCity,
						icon: 'error',
					})
				}				
				if(this.params.objectiveId==''||this.params.objectiveId==null){
					return uni.showToast({
						title: this.$lang.lang.notices.endCity,
						icon: 'error',
					})
				}
				if(!this.params.prodId){
					return uni.showToast({
						title: this.$lang.lang.notices.shopname,
						icon: 'error',
					})
				}

				if(!this.params.weight&&this.params.weight<=0){
					return uni.showToast({
						title: this.$lang.lang.notices.weight,
						icon: 'error',
					})
				}
				if(!this.params.num&&this.params.num<=0){
					return uni.showToast({
						title: this.$lang.lang.notices.num,
						icon: 'error',
					})
				}
				if(!this.params.quantity&&this.params.quantity<=0){
					return uni.showToast({
						title: this.$lang.lang.notices.goodsSum,
						icon: 'error',
					})
				}
				if(!this.params.long&&this.params.long<=0){
					return uni.showToast({
						title: this.$lang.lang.notices.long,
						icon: 'error',
					})
				}
				if(!this.params.wide&&this.params.wide<=0){
					return uni.showToast({
						title: this.$lang.lang.notices.wide,
						icon: 'error',
					})
				}
				if(!this.params.high&&this.params.high<=0){
					return uni.showToast({
						title: this.$lang.lang.notices.height,
						icon: 'error',
					})
				}
				if(this.params.long&&this.params.wide&&this.params.high){
					this.params.boxGauge = this.params.long+'*'+this.params.wide+'*'+this.params.high
				}
				this.$request.post('/app-api/product/line/price/calculation/prod-fee-List',this.params).then(res => {
					if(res.code==0&&res.data){
						
						var transId = this.config['transport'].value[this.config['transport'].index]
						var chanId = this.config['channel'].value[this.config['channel'].index]
						// this.reset()
						this.result = res.data
						if(res.data.length==0){
							uni.showToast({
								title:this.$lang.lang.notices.noLined,
								icon:'none'
							})
						}else{
							this.result.forEach((item,index)=>{
								if(item.lineId){
									this.getLineData(item.lineId,index)
								}
								if(!item.transportId){
									item.transportId = transId
								}
								if(!item.chanId){
									item.channelId = chanId
								}
							})
						}
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			reset(){
				this.result = []
				this.params = {
					departureId:'',
					objectiveId:'',
					prodId:'',
					transportId:'',
					channelId:'',
					weight:null,
					num:null,
					quantity:null,
					long:null,
					wide:null,
					high:null,
				}
				this.config.transport.index = 0
				this.config.channel.index = 0
				this.config.tradeCity1.index = 0
				this.config.tradeCity2.index = 0
				this.config.productZh.index = 0
			},
			getLineData(lineId,index){
				let that = this
				that.$request.post('/app-api/ecw/warehouse/openedRouterList',{lineId:lineId}).then(res => {
					if(res.code==0&&res.data&&res.data.length>0){
						if(that.$lang.locale=='zh'){
							that.result[index].startTitleZh = res.data[0].startTitleZh
							that.result[index].destTitleZh = res.data[0].destTitleZh
						}else{
							that.result[index].startTitleZh = res.data[0].startTitleEn
							that.result[index].destTitleZh = res.data[0].destTitleEn
						}	

					}
				})
			}
		}
	}
</script>

<style>
	@import url(../../static/css/price.css);
</style>