<template>
    <div style="min-height: 100px;">
      <div class="meng" v-if="showMeng" @click.stop="handleNoShow"></div>
            <div class="percentEntry" >
                <div class="progress">
                    <div class="have" >
                        <view class="box" >
                            <div class="min" :style="{width:min+'%'}" @click="handleShow(0)">
                              <div class="text" v-if="rateList[0]" >
                                <div class="icon" style="background: #1E80FF"></div>
                                <text style="margin-right: 4px">小车型</text>
                                <text>{{min}}%</text>
                              </div>
                            </div>
                            <div class="middle" :style="{width:middle+'%',left:min+'%'}" @click="handleShow(1)">
                              <div class="text" v-if="rateList[1]" :style="{left:'50%'}">
                                  <div class="icon" style="background: #00B6FF"></div>
                                  <text style="margin-right: 4px">中型车</text>
                                  <text>{{middle}}%</text>
                                </div>
                            </div>
                            <div class="big" :style="{width:big+'%',right:0+'%'}" @click="handleShow(2)">
                              <div class="text" v-if="rateList[2]" :style="{left:'60%'}">
                                  <div class="icon" style="background: #0FC862"></div>
                                  <text style="margin-right: 4px">大型车</text>
                                  <text>{{big}}%</text>
                              </div>
                            </div>
                        </view>
                    </div>
                </div>

                <div class="list">
                    <div class="listItem" v-for="(item,index) in dataList" :key="index">
                        <div class="left">
                            <div style="margin-right: 4px"  :class="item.title==='小型车'?'icon1':item.title==='中型车'?'icon2':item.title==='大型车'?'icon3':'icon'"></div>
                            <p class="smallTitle">{{item.title}}</p>
                        </div>
                        <div style="display: flex;align-items: center">
                            <p class="smallRate">{{item.value + '%'}}</p>
                            <view class="right" v-if="item.addValue">
                                <image class="arrowTop" :src="Number(item.addValue)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
                                <text class="text">{{item.addValue?Math.abs(item.addValue) + '%':'-' + '%'}}</text>
                            </view>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</template>

<script>
import NoData from "../noData.vue";
import Analyse from "../analyse.vue";

export default {
    name: "percentEntry",
    components: {Analyse, NoData},
    data() {
        return {
            dataList:[{title:'小型车',value:'',addValue:''},{title:'中型车',value:'',addValue:''},{title:'大型车',value:'',addValue:''}],
            progress:0,//入区率总比
            addProgress:0,//总增长
            min:0,//小型车
            middle:0,//中型车
            big:0,//大型车
            isShowData:false,
            analyseInfo:{
                analysisins_type: 1106,
                analysisins_format: 2000
            },
            rateList:[false,false,false],
          showMeng:false
        }
    },
    props: {
        data: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        data: {
            handler(value) {
                this.dataList = [{title:'小型车',value:''},{title:'中型车',value:''},{title:'大型车',value:''}]
                this.handleCarData(value)
            },
            immediate:true,
            deep:true
        }
    },
    methods: {
      handleNoShow(){
        this.showMeng = false
        this.rateList = []
      },
      handleShow(num){
        let list = []
        this.rateList.forEach(()=>{
          list.push(false)
        })
        this.rateList = list
        this.rateList[num] = true
        this.showMeng = true
      },
        // 处理传入的数据
        handleCarData(value) {
            let Vehicle_CountAll=0
            let SectionFlow_CountAll=0
            let minAll = 0
            let middleAll = 0
            let bigAll = 0
            value.forEach(item=>{
                Vehicle_CountAll+= item.Vehicle_Count
                SectionFlow_CountAll+= item.SectionFlow_Count
                minAll+=item.MinVehicle_Count
                middleAll+=item.MediumVehicle_Count
                bigAll+=item.LargeVehicle_Count
            })
            this.progress = ((Vehicle_CountAll/SectionFlow_CountAll)*100).toFixed(2)
            this.min = (minAll / Vehicle_CountAll*100).toFixed(2)
            this.middle = (middleAll / Vehicle_CountAll*100).toFixed(2)
            this.big = (bigAll / Vehicle_CountAll*100).toFixed(2)

            this.dataList[0].value = (minAll / Vehicle_CountAll*100).toFixed(2)
            this.dataList[1].value = (middleAll / Vehicle_CountAll*100).toFixed(2)
            this.dataList[2].value = (bigAll / Vehicle_CountAll*100).toFixed(2)
            this.dataList[0].addValue = value[0].MinVehicleEntry_GrowthRate
            this.dataList[1].addValue = value[0].MediumVehicleEntry_GrowthRate
            this.dataList[2].addValue = value[0].LargeVehicleEntry_GrowthRate
            let list = []
            this.dataList.forEach(item=>{
                if (Number(item.value)===0){

                }else{
                    list.push(item)
                }
            })
            this.dataList = list
            for (let i=1;i<this.dataList.length;i++){
                for (let j=1;j<this.dataList.length - 1;j++){
                    if (Number(this.dataList[i].value)>Number(this.dataList[j].value)){
                        let temp = this.dataList[i]
                        this.dataList[i] = this.dataList[j]
                        this.dataList[j] = temp
                    }
                }
            }
        },
    }
}
</script>

<style scoped lang="scss">
.meng{
  position: fixed;
  top: 0;left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9;
}
.percentEntry{
    width:100%;
    margin-top: 12px;

    .progress{
        width: 100%;
        height: 20px;
        background: #E5E8EF;
        border-radius: 2px;
        position: relative;
        .have{
            width: 100%;
            position: absolute;
            height: 100%;
            top: 0;left: 0;
            .box{
                position: relative;
                width: 100%;
                height: 100%;
                display: flex;
                .min{
                    box-sizing: border-box;
                    height: 100%;
                    background: #1E80FF;
                    margin-right: 2px;
                    border-radius: 2px 0 0 2px;
                  position: relative;
                  .text{
                    position: absolute;
                    padding: 0 5px;
                    z-index: 9;
                    left: 22%;top: -23px;
                    background: rgba(0,0,0,0.6);
                    color:#fff;
                    border-radius: 2px;
                    display: flex;
                    align-items: center;
                    .icon{
                      width: 10px;
                      height: 10px;
                      background: #1E80FF;
                      margin-right: 4px;
                    }
                  }
                }
                .middle{
                    height: 100%;
                    box-sizing: border-box;
                    background: #00B6FF;
                    margin-right: 2px;
                  .text{
                    position: absolute;
                    padding: 0 5px;
                    z-index: 9;
                    left: 0;top: 0px;
                    background: rgba(0,0,0,0.6);
                    color:#fff;
                    border-radius: 2px;
                    display: flex;
                    align-items: center;
                    .icon{
                      width: 10px;
                      height: 10px;
                      background: #1E80FF;
                      margin-right: 4px;
                    }
                  }
                }
                .big{
                    height: 100%;box-sizing: border-box;
                    background: #0FC862;
                    border-radius: 0 2px 2px 0 ;
                  .text{
                    position: absolute;
                    padding: 0 5px;
                    z-index: 9;
                    left: 22%;top: -23px;
                    background: rgba(0,0,0,0.6);
                    color:#fff;
                    border-radius: 2px;
                    display: flex;
                    align-items: center;
                    .icon{
                      width: 10px;
                      height: 10px;
                      background: #1E80FF;
                      margin-right: 4px;
                    }
                  }
                }
            }
        }
    }
    .list{
        width: 100%;
        margin-top: 8px;
        .listItem{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
            .left{
                display: flex;
                align-items: center;
                .icon1{
                    width: 6px;
                    height: 6px;
                    background: #1E80FF;
                    border-radius: 2px;
                }
                .icon2{
                    width: 6px;
                    height: 6px;
                    background: #00B6FF;
                    border-radius: 2px;
                }
                .icon3{
                    width: 6px;
                    height: 6px;
                    background: #0FC862;
                    border-radius: 2px;
                }
                .title{
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                    line-height: 20px;
                }
                .smallTitle{
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786B6C;
                    line-height: 20px;
                }
            }

            .rate{
                font-size: 14px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #160002;
                line-height: 20px;
            }
            .small{
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #160002;
                line-height: 20px;
            }
          .right{
            width: 70px;
            margin-left: 4px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .arrowTop {
              width: 14px;
              height: 14px;
              margin-right: 4px;
            }
            .text {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #782717;
              line-height: 20px;
              margin-right: 4px;
            }
            .compare {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #c97e64;
              line-height: 20px;
            }
          }
        }
    }
}
</style>
