<template>
    <div class="baseDataBox" v-loading="isLoadingData">
        <barList :dataExponentList="dataExponentList"></barList>
        <div class="DataDiv">
            表单流程转化
            <div class="imgArea" style="display: flex;height: 100%;">
                <solid :alldata="dataJ" :alltest="dataExponentList"/>
                <pie2 :alldata="dataJ" :alltest="dataExponentList[0]"/>
            </div>
        </div>
        <div class="DataDiv">
            热门表单人数汇总
            <div class="imgArea" style="display: flex;height: 100%;">
                <barChart :alldata="chartsData"/>
            </div>
        </div>
           
    </div>
</template>
<script>
import solid from './chartList/solid.vue';
import pie2 from './chartList/pie2.vue';
import barChart from './chartList/barChart.vue';

import barList from '../barList.vue';
import { API_CONFIG } from "@/common/apiConfig";

export default {
    name:'TeaMangeChart',
    props: {
        oid: {
            type: String,
        },
        org: {
            type: String,
        }
    },
    components: {
        solid,
        pie2,
        barList,
        barChart
    },
    data() {
        return {
            dataExponentList:[],
            dataJ:{},
            isLoadingData:false,
            chartsData:[],
            // 荔园集团下的学校 
            mergedList: [
                    "3823a6a5-1b6e-11f0-a66a-005056924926",
                    "292e34dc-1b6e-11f0-a66a-005056924926",
                    "21d6b367-1b6e-11f0-a66a-005056924926",
                    "1a1a172d-1b6e-11f0-a66a-005056924926",
                    "1197f86b-1b6e-11f0-a66a-005056924926",
                    "f235659b-1b6d-11f0-a66a-005056924926",
                    "d87b62d3-1b6d-11f0-a66a-005056924926",
                    "c25ea59b-1b6d-11f0-a66a-005056924926",
            ]
        }
    },
    // watch:{
    //     oid(newL){
    //         console.log(newL);
            
    //         this.getData()
    //     }
    // },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            this.isLoadingData = true;
            let params = [{
                functionName: API_CONFIG.getKanbanTeaManagedata.functionName,
                oid: this.oid,
                org: this.org,
            }];
            this.$ajax
                .post(API_CONFIG.baseUrl, params)
                .then((res) => {
                    let test = res.data[2]

                    let dataJ = {
                        doing: 0,    //进行中
                        nodo: 0,     //未进行
                        noLook: 0,    //未发布
                        is: 0,     //已完成
                        no: 0         //已逾期
                    }
                    for (var i = 0; i < test.length; i++) {
                        if (test[i].look == '1') {
                            dataJ.noLook++
                            // console.log('index-----------', i)
                        }
                        let now = new Date().getTime()
                        let isTime = test[i].over_at && new Date(test[i].over_at).getTime()
                        if (test[i].over_at && test[i].look == '2' && now > isTime && ((test[i].isUserCount > 0 && test[i].isUserCount > test[i].isWorkCount) || test[i].isUserCount == 0)) {
                            dataJ.no++
                            // console.log('index-----------', i)
                        }

                        if (((test[i].over_at && test[i].look == '2' && isTime > now) || (!test[i].over_at && test[i].look == '2')) && ((test[i].isUserCount == 0 && test[i].isWorkCount > 0) || (test[i].isUserCount > 0 && 0 < test[i].isWorkCount && test[i].isWorkCount < test[i].isUserCount))) {
                            dataJ.doing++
                            // console.log('index-----------', i)
                        }


                        if (((test[i].over_at && test[i].look == '2' && isTime > now) || (!test[i].over_at && test[i].look == '2')) && test[i].isWorkCount == 0) {
                            dataJ.nodo++
                            // console.log('index-----------', i)
                        }

                        if (test[i].look == '2' && (test[i].isUserCount > 0 && test[i].isUserCount <= test[i].isWorkCount)) {
                            dataJ.is++
                            // console.log('index-----------', i)
                        }
                    }
                    this.dataJ = dataJ
                    let top = [
                        { label: '表单总量', value: 0 },
                        { label: '表单回收率', value: 0 },
                        { label: '智能回答次数', value: 0 }
                    ]

                    top[0].value = res.data[0][0].num

                    if (!this.dataJ.is || !res.data[0][0].num) {
                        top[1].value = '0%'
                    }else{
                        top[1].value = ((this.dataJ.is / res.data[0][0].num).toFixed(0)) * 100 + '%'
                    }
                    top[2].value = res.data[1][0].num //本月新增

                    this.dataExponentList = top
                    this.isLoadingData = false;
                    
                    this.chartsData=res.data.slice(3)
                    console.log('this.chartsData',this.chartsData);
                    

                })
                .catch((err) => {
                    this.isLoadingData = false;
                    console.error(err);
                });
        },
    },

}
</script>
<style scoped>

.baseDataBox{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.DataDiv {
    width: 100%;
    height: 500px;
    border-radius: 5px;
    margin: 0 0 10px 0;
    background-color: #fff;
    border: 2px solid #fff;
    box-sizing: border-box;
    padding: 20px;
    box-sizing: border-box;
}


</style>