<template>
	<view>
		<view style="display: flex; flex-wrap: wrap;">
			<view  v-for="(item,i) in hangduanlast" :key="i" @click="onHistoryDetail()">
				<view class='em-history-box-item'
				v-if="item =='ff'" >
				    <span class='ehbi-dot-ak'>{{item}}</span>
				</view>
				<view class='em-history-box-item'
				v-else  >
				     <span class='ehbi-dot'>{{item}}</span>
				     <span class='numbers ehbi-text'>{{0-i}}</span>
				</view>
			</view>
		</view>
	</view>
    
</template>

<script>
	import {
			getHistoryFlightCountDetail
		} from '@/utils/requestahm.js';
	
    export default {
        data() {
            return {
                hangduanlast:[],
				type : '',
				code:'',
				leg :'',
				tailNumber :'',
				
				param :{},

            }
        },
        props: {
			fleet:{
				type:String,
			},
			items:{
				type: true ,
			},
            occurLegList: {
              type: true ,
              default: []
            },
            circleFlag: {
              type: true ,
              default: ''
            },
            occurLegStatusList: {
              type: true ,
              default: []
            }
        },

        computed: {

        },
        methods: {
			// //回退到上一页面
			// clickLeft(){
			//     uni.navigateBack()
			// },
			
			//航段历史详情
			getHistoryFlightCountDetails(){
				
				getHistoryFlightCountDetail({
					code: this.code,
					tailNumber: this.tailNumber,
					leg: this.leg,
					type: this.type ,
				}).then(res =>{
					if(res.code == 200){
						this.param  = res.data
						//跳转事件历史
						uni.navigateTo({
						    url: '/pages/modules/ahm/eventMonitoring/historydetail?param=' +
							 encodeURIComponent(JSON.stringify(this.param)) +'&&leg='+this.leg+'&&fleet='+this.fleet
							 +'&&items='+encodeURIComponent(JSON.stringify(this.items))+'&&types='+this.type
						       
						})
					}
					
				})
				
				
			},
			
			onHistoryDetail(){
				
				 this.getHistoryFlightCountDetails()
			},
            
            //航段历史圈内值
            upperDotType(items) {
		
                if (items == 1) {
                    this.hangduanlast.push('A')
                }else if (items == 2) {
                    this.hangduanlast.push('I')
                }else if (items == 3) {
                    this.hangduanlast.push('L')
                }else {
					 this.hangduanlast.push('')
				}
            },
            //处理航段数
            getDate(){
                //处理航段数据
                const dList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
                for (const i of dList) {
                    const infoI = this.occurLegList?.findIndex(item => (item === String(i) || item === i || item === (0 - i))) ?? -1;
                   
                    if (infoI > -1) {
                        if (this.circleFlag && this.circleFlag === 1) {
                            this.hangduanlast.push('M')
                        } else {
                            this.upperDotType(this.occurLegStatusList[infoI])
                        }
                    } else {
                        //不存在
                        this.hangduanlast.push('ff')
                        //itemStatusList.push('ff')
                    }
                }

            }

        },
        created() {
           
			if(this.items.eventType =='Alert'){
				this.type = 'Alert'
			}else if (this.items.eventType !='Alert'){
				this.type = this.items.name
			}else{
				this.type = ''
			}
            this.code  = this.items.code
			this.leg  = this.items.leg
			this.tailNumber  = this.items.tailnumber
         
            this.getDate();

        },
    }
</script>

<style scoped lang="scss">
    .em-history-box-item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      // margin-right: 3px;
      padding-left:60rpx;
      width: 28rpx;
      min-width: 28rpx;
      align-items: center;
    }
    .ehbi-text {
      // margin-left: -3px;
     //padding-left:5px;
      margin-top: 4rpx;
      line-height: 1;
      white-space: nowrap;
    }
    .ehbi-dot {
      //padding-left:5px;
      width: 24rpx;
      height: 24rpx;
      background-color: #9e9e9e;
      border-radius: 100%;
      text-align: center;
      line-height:24rpx;
      color: #ffffff;
      font-weight: bold;
      font-size: 24rpx;
      overflow: hidden;
      // margin-right: 3px;
    }
    .ehbi-dot-ak {
      width: 24rpx;
      height:24rpx;
      background-color: transparent;
      border: 1px solid #9e9e9e;
      border-radius: 100%;
      text-align: center;
      line-height: 11px;
      color: #ffffff;
      font-weight: bold;
      font-size: 24rpx;
    }


    .panel-box {
      box-shadow: 1px 1px 10px 4px #eee;
      border-radius: 6px;
      padding: 10px;
      margin-bottom: 10px;
      .d-flex {
        display: flex;
      }
      .a-center {
        align-items: center;
      }
      .j-center {
        justify-content: center;
      }
      .top {
        justify-content: space-between;
        height: 36px;
        align-items: center;
       // border-bottom: 1px solid #eee;
      }
      .content {
        padding-top: 10px;
      }
    }
</style>
