<template>
    <view>
        <div class='oooi-fly-box'>
            <!-- <uni-icons class="fly-ing" :class="addclass(step)" type="plane1" size="20px"></uni-icons> -->
            <view v-if="step==1">
                <image style="width: 108rpx;" src="@/static/img/ahm/hd1.png" mode="widthFix"></image>
            </view>
            <view v-if="step==2">
                <image style="width: 108rpx;" src="@/static/img/ahm/hd2.png" mode="widthFix"></image>
            </view>
			<view v-if="step==3">
			    <image style="width: 108rpx;" src="@/static/img/ahm/hd3.png" mode="widthFix"></image>
			</view>
			<view v-if="step==4">
			    <image style="width: 108rpx;" src="@/static/img/ahm/hd4.png" mode="widthFix"></image>
			</view>
			<view v-if="step==5">
			    <image style="width: 108rpx;" src="@/static/img/ahm/hd5.png" mode="widthFix"></image>
			</view>

            <!-- <svg class='oooi-svg' width='58px' height='25px' viewBox='120 220 520 100' version='1.1'>
                <path stroke-linecap='round' fill='transparent' stroke='#d8dfe8' stroke-width='20'
                    d='M 150 300 Q 200 300 250 300 Q 250 300 325 225 Q 375 225 425 225 Q 500 300 500 300 L 600 300 '
                    class='path'></path>
                <path stroke-linecap='round' fill='transparent' stroke='#336bf6' stroke-width='20'
                    d='M 150 300 Q 200 300 250 300 Q 250 300 325 225 Q 375 225 425 225 Q 500 300 500 300 L 600 300 '
                    class='line2 ' :style="'stroke-dasharray:'+stylestep+', 555'"></path>
                <path stroke-linecap='butt' fill='transparent' stroke='#fff' stroke-width='21'
                    d='M 150 300 Q 200 300 250 300 Q 250 300 325 225 Q 375 225 425 225 Q 500 300 500 300 L 600 300 '
                    class='line1'></path>
            </svg> -->
        </div>
        <view class="oooi-text" v-if="time">
            {{timeName == 'inTime' ? text1 : text2}} {{step == 3 ?'':(step == 4 ? '' : time) }}
        </view>
        <view v-else>undefined</view>

    </view>

</template>

<script>
    export default {
        name: 'oooi',
        data() {
            return {
                stylestep: '',
                setpW: ['85', '180', '290', '400', '555'],
                textT: ['out', 'off', 'Cruise', 'Descent', 'on', 'in'],
                text1: '',
                text2: '',
            }
        },
        onLoad(option) {

        },
        props: {
            step: {
                type: Number,
            },
            time: {
                type: String,
                default: '',
            },
            timeName: {
                type: String,
                default: '',
            },

        },
        methods: {
            addclass(step) {
                switch (step) {
                    case 1:
                        return 'fly-1';
                    case 2:
                        return 'fly-2';
                    case 3:
                        return 'fly-3';
                    case 4:
                        return 'fly-4';
                    case 5:
                        return 'fly-5';
                }
            },
        },
        created() {
            this.stylestep = this.setpW[this.step - 1]
            //this.stylestep = '400'
            this.text1 = this.textT[this.step]
            this.text2 = this.textT[this.step - 1]
            //this.step=4
        }
    }
</script>

<style scoped lang="scss">
    .oooi-svg {
        display: block;
        margin: 0 auto;
        margin-top: -3px;

        .line1 {
            stroke-dasharray: 18 89;
            stroke-dashoffset: 236;
        }

        .line2 {
            stroke-dasharray: 155 555;
            stroke-dashoffset: 0;

        }

        // @keyframes dash {
        //   from {
        //     stroke-dashoffset: 360;
        //   }
        //   to {
        //     stroke-dashoffset: 40;
        //   }
        // }

        // @keyframes dash2 {
        //   from {
        //     stroke-dashoffset: 705;
        //   }
        //   to {
        //     stroke-dashoffset: 0;
        //   }
        // }
    }

    .oooi-text {
        margin-top: -3px;
        display: block;
        z-index: 99;
        font-size: 20rpx;
    }

    .oooi-fly-box {
        width: 69px;
        margin: 0 auto;
        position: relative;

        .fly-ing {
            font-size: 24px;
            position: absolute;
            z-index: 9999;
        }

        .fly-5 {
            left: 43px;
            top: -2px;
            transform: rotate(21deg);
        }

        .fly-4 {
            font-size: 24px;
            position: absolute;
            left: 40px;
            top: -4px;
            transform: rotate(43deg);
        }

        .fly-3 {
            font-size: 24px;
            position: absolute;
            left: 22px;
            top: -11px;
            transform: rotate(21deg);
        }

        .fly-2 {
            font-size: 24px;
            position: absolute;
            left: 5px;
            top: -4px;
            transform: rotate(-7deg);
        }

        .fly-1 {
            font-size: 24px;
            position: absolute;
            left: 1px;
            top: -2px;
            transform: rotate(21deg);
        }
    }
</style>
