<style lang="scss" scoped>
@import url("@/asset/css/flex.css");
.cancelProgress{
    padding: 30rpx 30rpx 10rpx 30rpx;
}
.showModalCenter{
	padding: 50rpx 52rpx 85rpx 52rpx;
    background: #fff;
    border-radius: 16rpx;
}
.cancelProgress .showModalCenter{
    padding: 50rpx 32rpx 85rpx 32rpx;
}
.showModalCTitle{
    margin-bottom: 30rpx;
}
.showModalCTitle text{
	font-size:36rpx;
    font-weight: bold;
}
.showModalCTisp{
	padding: 0 0 40rpx 0;
	margin-top: 47rpx;
	
}
.showModalTisp{
	margin-bottom: 34rpx;
	font-size: 28rpx;
	line-height: 42rpx;
}
.showModalTisp text{
	font-weight: bold;
	text-decoration: underline;
}
.showModalCTNK{
	margin-top: 28rpx;
	font-size: 32rpx;
	font-family: PingFang-SC, PingFang-SC;
	font-weight: bold;
    line-height: 42rpx;
}
.showModalCTNK text:first-child{
	color: #FF3367;
}
@font-face {
  font-family: "dinAli";
  src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/BFOHNMvFqM80.woff2") format("woff2");
  font-display: swap;
}
.vip-box-unactive{
	margin: 50rpx 0rpx 0 0;
	padding:0rpx 34rpx 0rpx 34rpx;
	height: 120rpx;
	position: relative;
	border-radius: 18rpx;
}
.vip-box-unactive .vip-logo{
	right: 34rpx;
	width: 87rpx;
	height: 99rpx;
	top: 15rpx;
	position: absolute;
	z-index: 4;
}
.vip-box-unactive .remark{
	
	font-size: 24rpx;
	color: #E2C27A;
	line-height: 1;
	margin-bottom: 16rpx;
}
.vip-box-unactive .step-box{
	position: relative;
	justify-content: space-between;
}
.vip-box-unactive .step-box::after,
.vip-box-unactive .step-box .line{
	height: 8rpx;
	background: #C99E59;
	border-radius: 5rpx;
	left: 0;
	top: 10rpx;
	position: absolute;
	z-index: 2;
}
.vip-box-unactive .step-box::after{
	z-index: 1;
	background: #F3F1EF;
	border-radius: 0;
	right: 0;
	content: ' ';
	display: block;
}
.vip-box-unactive .step-item{
	/* font-weight: 400; */
	font-size: 32rpx;
	color: #BCBCBC;
	width: 50rpx;
	height: 50rpx;
	background: #F3F1EF;
	border-radius: 50%;
	position: relative;
	z-index: 3;
	text-align: center;
	font-family: dinAli;
	text-align: center;
	line-height: 50rpx;
	font-weight: bolder;
	top: -10rpx;
}
.vip-box-unactive .step-item.active{
	background: #C99E59;
	color: #fff;
}
.vip-box-unactive .step-item text{
	width: 120rpx;
	position: absolute;
	bottom: -70rpx;
	left: -31rpx;
	text-align: center;
	font-size: 28rpx;
}
.vip-box-unactive .step-item.active text{
	color: #C99E59;
}
.vip-title{
	font-weight: 800;
	font-size: 36rpx;
	color: #080A0A;
	line-height: 70rpx;
}
</style>
<template>
    <view class="" v-if="datas"
    :class="[type?'cancelProgress':'']">
        <view class="showModalCenter">
            <view class="showModalCTitle column">
                <Text>取消政策</Text>
            </view>
            <view class="showModalCTisp">
                <view class="showModalTisp">
                    旅游者在<text>行程开始前7日以内提出解除合同，</text>
                    将按下列标准扣除必要的费用：
                </view>
                <view class="showModalCTNK column">
                    <Text>行程开始前6日至4日</Text>
                    <Text>按旅游费用总额的20%</Text>
                </view>
                <view class="showModalCTNK column">
                    <Text>行程开始前3日至1日</Text>
                    <Text>按旅游费用总额的40%</Text>
                </view>
                <view class="showModalCTNK column">
                    <Text>行程开始当日</Text>
                    <Text>按旅游费用总额的60%</Text>
                </view>
            </view>
            <view class="vip-box" v-if="datas.OrderStatus==5">
                <view class="vip-title">进度</view>
                    <view class="vip-box-unactive row">
                        <view class="col">
                            <view class="step-box row items-center">
                                <view class="line" :style="{width:`${(vipInfo.progressCount/vipInfo.OrderCount)*100}%`}"></view>
                                <view class="step-item" :class="{'active':datas.AfterSalesOrderStatus>x}" v-for="x in vipInfo.OrderCount">
                                    {{x+1}}
                                    <text v-if="x==0">等待审批</text>
                                    <text v-if="x==1">汇款中</text>
                                    <text v-if="x==2">完成</text>
                                </view>
                            </view>
                        </view>
                    </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props:['datas','type'], 
    data(){
			return{
                vipInfo:{
					progressCount: 0,
					OrderCount:3
				},
            }
    },
	watch: {
		datas: {
			handler (val, oldval) {
				if(val.OrderStatus==5){
					if(val.AfterSalesOrderStatus==1){
						this.vipInfo.progressCount = 0.8
					}else if(val.AfterSalesOrderStatus==2){
						this.vipInfo.progressCount = 2.2
					}else if(val.AfterSalesOrderStatus==3){	
						this.vipInfo.progressCount = 3
					}
				}
				
			},
			deep: true,
			immediate: true,
		},
	},
	created() {
		
	},
	mounted() {
		
    },
    methods:{
		
    },
}
</script>