<template>
	<view class="technician-commission-detail" v-if="detail.id">
		<view class="mt-md pd-lg fill-base">
			<view class="flex-y-center f-mini-title c-title">
				<view class="dot mr-sm radius" :style="{background:primaryColor}"></view>订单号<view class="ml-sm">
					{{detail.order_code}}
				</view>
			</view>
			<view class="f-mini-title c-title text-bold mt-lg">项目明细</view>
			<view class="flex-between f-paragraph" :class="[{'mt-lg':index==0},{'mt-md':index!=0}]"
				v-for="(item,index) in detail.order_goods" :key="index">
				<span class="c-paragraph max-500">{{item.goods_name}}<span
						class="ml-lg">x{{item.true_num}}</span></span>
				<view class="c-title">¥{{item.true_total_price}}</view>
			</view>
			<view class="flex-between f-paragraph mt-lg">
				<view class="c-paragraph">服务时间</view>
				<view class="c-caption">{{detail.time_text}}</view>
			</view>
			<view class="flex-between f-paragraph mt-lg">
				<view class="c-paragraph">项目总金额</view>
				<view class="c-title">¥{{detail.init_service_price}}</view>
			</view>
			<view class="flex-between f-paragraph mt-lg" v-if="detail.material_type===1">
				<view class="c-paragraph">物料费</view>
				<view class="c-title flex-y-center">¥{{detail.material_price}}
					<view class="ml-sm c-caption text-delete"
						v-if="detail.init_material_price*1>detail.material_price*1">
						¥{{detail.init_material_price}}</view>
				</view>
			</view>
			<view class="flex-between f-paragraph mt-lg">
				<view class="c-paragraph">卡券优惠</view>
				<view class="c-title">-¥{{detail.discount}}</view>
			</view>
			<view class="flex-between f-paragraph mt-lg mb-lg">
				<view class="c-paragraph">分成比例</view>
				<view class="c-title">{{detail.coach_balance}}%</view>
			</view>
			<view class="flex-between pt-lg b-1px-t">
				<view @tap.stop="$refs.show_rule_item.open()" class="f-paragraph c-paragraph flex-y-center">应得收益<i
						class="iconfont iconshuyi_shuoming ml-sm"></i>
				</view>
				<span class="max-500">
					{{`${detail.coach_text} =`}}
					<span class="f-caption ml-sm" :style="{color:primaryColor}">¥<span
							class="f-mini-title">{{detail.coach_cash}}</span>
					</span>
				</span>
			</view>
		</view>

		<view class="mt-md pd-lg fill-base" v-if="detail.add_order && detail.add_order.length > 0">
			<view class="f-mini-title c-title text-bold">加钟明细</view>
			<block v-for="(item,index) in detail.add_order" :key="index">
				<view class="flex-between f-paragraph" :class="[{'mt-lg':aindex==0},{'mt-md':aindex!=0}]"
					v-for="(aitem,aindex) in item.order_goods">
					<span class="c-paragraph max-500">{{aitem.goods_name}}{{aindex==0?` (第${index*1+1}次加钟)`:''}}<span
							class="ml-lg">x{{aitem.num}}</span></span>
					<view class="c-title">¥{{aitem.price}}</view>
				</view>
				<view class="flex-between f-paragraph mt-lg mb-lg">
					<view class="c-paragraph">项目总金额</view>
					<view class="c-title">¥{{item.true_service_price}}</view>
				</view>
				<view class="flex-between f-paragraph mt-lg mb-lg" v-if="detail.material_type===1">
					<view class="c-paragraph">物料费</view>
					<view class="c-title">¥{{item.material_price}}</view>
				</view>
				<view class="flex-between f-paragraph mt-lg mb-lg">
					<view class="c-paragraph">分成比例</view>
					<view class="c-title">{{item.coach_balance}}%</view>
				</view>
				<view class="flex-between f-paragraph mt-lg mb-lg">
					<view class="c-paragraph">分摊扣费</view>
					<view class="c-title">-¥{{item.total_share_cash}}</view>
				</view>
				<view class="flex-between f-paragraph mt-lg mb-lg">
					<view @tap.stop="$refs.show_add_rule_item.open()" class="f-paragraph c-paragraph flex-y-center">
						应得收益<i class="iconfont iconshuyi_shuoming ml-sm"></i>
					</view>
					<span class="max-500">
						{{`${item.add_coach_text} =`}}
						<span class="f-caption ml-sm" :style="{color:primaryColor}">¥<span
								class="f-mini-title">{{item.coach_cash}}</span>
						</span>
					</span>
				</view>
			</block>
			<view class="flex-between pt-lg b-1px-t">
				<view class="f-paragraph c-paragraph flex-y-center">加钟收益</view>
				<span class="max-500">
					{{`${detail.add_coach_text} =`}}
					<span class="f-caption ml-sm" :style="{color:primaryColor}">¥<span
							class="f-mini-title">{{detail.add_coach_cash}}</span>
					</span>
				</span>
			</view>
		</view>

		<!-- <view class="mt-md pd-lg fill-base">
			<view class="f-mini-title c-title text-bold">扣费明细</view>
			<view class="flex-between f-paragraph mt-lg">
				<view class="c-paragraph">经纪人扣费</view>
				<view class="c-title">-¥{{detail.partner_share_cash}}</view>
			</view>
			<view class="flex-between f-paragraph mt-lg">
				<view class="c-paragraph">渠道商扣费</view>
				<view class="c-title">-¥{{detail.channel_share_cash}}</view>
			</view>
			<view class="flex-between f-paragraph mt-lg">
				<view class="c-paragraph">业务员扣费</view>
				<view class="c-title">-¥{{detail.salesman_share_cash}}</view>
			</view>
			<view class="flex-between mt-lg pt-lg b-1px-t">
				<view class="f-paragraph c-paragraph">合计扣费</view>
				<view class="flex-y-center f-caption c-warning">¥<view class="f-mini-title">
						{{detail.total_share_cash}}
					</view>
				</view>
			</view>
		</view> -->


		<view class="mt-md pd-lg fill-base">
			<view class="f-mini-title c-title text-bold">车费明细</view>
			<view class="flex-between f-paragraph mt-lg">
				<view class="c-paragraph">车费收益</view>
				<view class="c-title text-bold" :style="{color:primaryColor}">¥{{detail.true_car_price}}</view>
			</view>
		</view>

		<view class="space-max-footer"></view>

		<fixed position="bottom">
			<view class="pd-lg fill-base flex-between f-paragraph" style="width:100%">
				<view class="f-mini-title c-title text-bold">实际收益</view>
				<span class="max-500 c-warning">
					{{`${detail.total_order_text} =`}}
					<span class="f-caption text-bold ml-sm">¥<span
							class="f-mini-title">{{detail.total_order_cash}}</span>
					</span>
				</span>
			</view>
			<view class="space-safe fill-base"></view>
		</fixed>


		<uni-popup ref="show_rule_item" type="center" :maskClick="false" :zIndex="1000">
			<view class="common-popup-content fill-base pd-lg radius-34">
				<view class="title">应得收益计算规则</view>
				<view class="f-desc c-title mt-lg">
					<block v-if="detail.material_type === 0">
						应得收益 = (项目总金额 - 卡券优惠) * 分成比例
					</block>
					<block v-else>
						应得收益 = (项目总金额 + 物料费 - 卡券优惠) * 分成比例 - 物料费
					</block>
				</view>
				<view class="button">
					<view @tap.stop="$refs.show_rule_item.close()" class="item-child c-base"
						:style="{background: primaryColor,color:'#fff'}">知道了</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="show_add_rule_item" type="center" :maskClick="false" :zIndex="1000">
			<view class="common-popup-content fill-base pd-lg radius-34">
				<view class="title">加钟收益计算规则</view>
				<view class="f-desc c-title mt-lg">
					<block v-if="detail.material_type === 0">
						应得收益 = 项目总金额 * 分成比例 - 分摊扣费
					</block>
					<block v-else>
						应得收益 = (项目总金额 + 物料费) * 分成比例 - 物料费 - 分摊扣费
					</block>
				</view>
				<view class="button">
					<view @tap.stop="$refs.show_add_rule_item.close()" class="item-child c-base"
						:style="{background: primaryColor,color:'#fff'}">知道了</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
				options: {},
				detail: {}
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
		}),
		async onLoad(options) {
			this.options = options
			await this.initIndex()
		},
		methods: {
			...mapMutations([]),
			async initIndex(refresh = false) {
				// #ifdef H5
				if (!refresh && this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					this.$jweixin.wxReady(() => {
						this.$jweixin.hideOptionMenu()
					})
				}
				// #endif 
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				await this.getDetail()
				this.isLoad = true
			},
			initRefresh() {
				this.initIndex(true)
			},
			async getDetail() {
				let {
					id
				} = this.options
				let data = await this.$api.technician.coachCommissionInfo({
					id
				})
				let {
					coach_cash,
					true_car_price,
					total_share_cash,
					init_material_price,
					material_price,
					material_type = 0,
					discount
				} = data
				if (discount * 1 > 0 && init_material_price * 1 > material_price * 1) {
					data.discount = (discount * 1 - (init_material_price * 1 - material_price * 1)).toFixed(2)
				}
				data.order_goods.map(item => {
					item.true_num = item.num - item.refund_num
					item.true_total_price = item.price * item.true_num
				})
				data.coach_text = material_type === 0 ?
					`(${data.init_service_price}-${data.discount})*${data.coach_balance}%` :
					`(${data.init_service_price}+${data.material_price}-${data.discount})*${data.coach_balance}%-${data.material_price}`
				let add_coach_cash = 0
				let add_coach_text = ''
				data.add_order.map((item, index) => {
					add_coach_cash += item.coach_cash * 1
					item.add_coach_text = material_type === 0 ?
						`${item.true_service_price}*${item.coach_balance}%-${item.total_share_cash}` :
						`(${item.true_service_price}+${item.material_price})*${item.coach_balance}%-${item.material_price}-${item.total_share_cash}`
					add_coach_text += `${index==0?'':' + '}${item.coach_cash}`
				})
				data.add_coach_cash = add_coach_cash.toFixed(2)
				data.add_coach_text = add_coach_text


				data.total_order_text = data.add_order && data.add_order.length > 0 ?
					`${coach_cash} + ${add_coach_cash} - ${total_share_cash} + ${true_car_price}` :
					`${coach_cash} - ${total_share_cash} + ${true_car_price} `

				let total_order_cash = coach_cash * 1 + add_coach_cash * 1 + true_car_price * 1 - total_share_cash * 1
				data.total_order_cash = total_order_cash.toFixed(2)
				this.detail = data
			},
		}
	}
</script>


<style lang="scss">
	.technician-commission-detail {
		.dot {
			width: 14rpx;
			height: 14rpx;
		}
	}
</style>