<template>
    <div class="ent-info" >
        <i class="ei-close" @click="handleClose"></i>
        <div class="Tool-Headers"  v-on:mouseleave="handerShowList(false)" ><span class="title-dialog">饼图显示</span>



            <div class="jhmain"  >
                <div class="inputJH" v-on:mouseover="handerShowList(true)"  ><span>{{findChick()}}</span><i></i></div>
                <div class="BodyJH"  v-if="showList">
                    <!--                <ul>-->
                    <li v-for="item,index in checkBody" @click="handerShowBingTu(item,index)"><i></i><span>{{item.name}}</span></li>
                    <!--                </ul>-->
                 </div>
           </div>



        </div>
         <div id="chart_sjxm"  ></div>
    </div>
</template>

<script>
    export default {
        name: "BingTu",
    }
</script>
<script  setup>

    import {onBeforeMount, onMounted, defineProps, watch, nextTick, ref} from 'vue';
    import { setBingtu } from '@/echarts/options'

    const  propsData=defineProps(['datas','types'])
    let trafficWay=[]

    watch(propsData,(n,o)=>{
        nextTick(()=>{

            dataFind(propsData.datas,propsData.types)
        })
    },{immediate:true})

function dataFind(values,types) {
    console.log("入参：",values)
    trafficWay=[]
       values.forEach(i=>{
                let value=null;
                let danwei='万方';
                if (types  == '计划方量')
                {
                    value= fidexd(i.quantities,10000,2)
                }else if (types == '实际方量')
                {
                    value=Math.floor(i.tonnage)
                }
                else if (types == '总投资')
                {
                    value=Math.floor(i.investment)
                    danwei='万元'
                }
                let thisData={name:i.prjName,value:Number(value),danwei:danwei}
                trafficWay.push(thisData)
            })


    setBingtu(document.getElementById('chart_sjxm'), trafficWay)
}
    const emit = defineEmits(['closeFun'])

function handleClose() {
    emit('closeFun')
}

    function fidexd(arg1,arg2,digit){
      var result=  arg1/arg2
        console.log("出于：",result)
       var  zheng=result.toString().split(".")
        console.log("入参：",zheng)
        if (zheng[1])
        {
            var  xiaoshu=  zheng[1].length
            console.log("小数：",xiaoshu)
            if (xiaoshu>=digit)
            {
                return  Number(zheng[0]+'.'+zheng[1].slice(0,digit))
            }else {
                return  Number(zheng[0]+'.'+zheng[1])
            }
        }else {
            return  Number(zheng[0])
        }

    }




    const type =ref('计划方量')
    // const  propsData=defineProps(['datas','types'])
    // const  propsData=defineProps(['datas'])

    let checkBody=ref([{name:'计划方量',chick:true},{name:'实际方量',chick:false},{name:'总投资',chick:false}])

    const show =ref(false)

    const showList =ref(false)
    function findChick() {
        return checkBody.value.filter(i=>i.chick)[0].name
    }
    function handleShow(value) {
        show.value=value
    }
    function handerShowList(value) {
        showList.value=value
    }

    function handerShowBingTu(value,index) {
        console.log('点击：'+index)
        type.value=value.name
        dataFind(propsData.datas,value.name)
        checkBody.value.forEach(i=>{
            if (i.name==value.name)
            {
                i.chick=true
            }else {
                i.chick=false
            }
        })
    }
</script>


<style  lang="scss" scoped>
    ::v-deep #chart_sjxm {
         canvas{
               z-index: 1;
           }
    }
    .ent-info {
        box-sizing: border-box;
        position: absolute;
        top: 30vh;
        right: 35vw;
        width: 60vh;
        height: 281px;
        background: url('@/assets/imgs/page_yyjg/cbxx-bg.png') no-repeat;
        background-size: 100% 100%;
        .Tool-Headers{
            padding-top: 20px;
            height: 40px;
            width: 90%;
            /*background: #FFD400;*/
            text-align: left;
            position: relative;
            padding-left: 20px;
            span{
                float: left;
            }

            .jhmain {
                position: relative;
                float: right;
                margin-right: 20px;
                width: 30%;
                height: 40px;
                z-index: 200;
                .inputJH {
                    display: flex;
                    align-items: center;
                    height: 2.8vh;
                    width: 100%;
                    line-height: 2.8vh;
                    background: url('@/assets/imgs/header/xialaKuang.png') no-repeat;
                    background-size: 100% 100%;
                    span {
                        display: block;
                        border: 3px #00EAFF;
                        text-align: center;
                        margin-left: 20%;
                        width: 50%;
                        color: #FFFFFF;
                    }
                    i {
                        display: block;
                        width: 1.8vh;
                        height: 1.8vh;
                        background: url('@/assets/imgs/header/xiala.png') no-repeat;
                        background-size: 100% 100%;
                        background-position: center;
                        cursor: pointer;
                    }
                }

                .BodyJH {
                    padding-top: 20px;
                    height: 3vh;
                    width: 100%;
                    background: url("@/assets/imgs/tool/toolbox-bg.png") no-repeat;
                    background-size: 100% 100%;
                    height: 10vh;
                    li {
                        display: block;
                        list-style: none;
                        width: 100%;
                        height: 3vh;

                        i {
                            display: block;
                            float: left;
                            width: 3vh;
                            height: 3vh;
                            background: url('@/assets/imgs/header/btn-aside.png') no-repeat;
                            background-size: 100% 100%;
                            background-position: center;
                            cursor: pointer;
                        }

                        span {
                            display: block;
                            float: left;
                            width: 50%;
                        }
                    }
                    li:hover{
                        background: #1d63b3;
                        color: #f0d60d;
                        width: 90%;
                        margin: 0 auto;
                        border-radius: 10%;
                    }
                    /*}*/

                }
            }
        }
        div{
            width: 95%;
            height: 200px;
        }
        .ei-close {
            position: absolute;
            top: 8px;
            right: 16px;
            display: block;
            width: 18px;
            height: 18px;
            background: url('@/assets/imgs/common/btn-close.png') no-repeat;
            background-size: 12px 12px;
            background-position: center;
            cursor: pointer;
        }
    }

</style>