<template>
    <div class="data-analysis-main-style" v-if="showType === 'condition'" ref="main">
        <div v-for="item,index in dataAnalysisCondition" class="condition-container-style" :key="item.id"
             :style="{width:item.id === 'school'?'360px':(item.id === 'report'?'calc(100% - ' + (index * 260 +
             (role !== 'school' && analysisType === 'schoolAnalysis'? 110 : 0)) +'px)':'250px')}">
            <div class="title-style">
               {{item.title}}
            </div>
            <vue-scroll :ops="ops" style="height: calc(100% - 30px)">
                <a-spin :spinning="item.isLoading === true" style="height:100%">
                    <ul class="year-list-style">
                        <li v-for="d,dIndex in item.data" :key="d.id" class="year-li-style" @click="onItemClick(item,index,d,dIndex)"
                            :style="{color:index !== dataAnalysisCondition.length - 1 && d.id === item.selectedId?'#31a8fa':null}"
                            :data-report="index === dataAnalysisCondition.length - 1" :title="d.value">
                            {{d.value}}
                            <a-icon v-if="index !== dataAnalysisCondition.length - 1 && d.id === item.selectedId" type="right" class="icon-style"/>
                            <span v-else-if="index === dataAnalysisCondition.length - 1" style="font-size: 14px;top:0;right:10px"
                                  class="icon-style" @click.stop="onDownload()">
                            下载报表
                        </span>
                        </li>
                        <div v-if="item.data.length === 0 && item.isLoading === false" class="no-data-style">暂无相关数据</div>
                    </ul>
                    <div v-if="index === dataAnalysisCondition.length - 1 && item.data.length > 0" class="download-all-style">下载全部报表</div>
                </a-spin>
            </vue-scroll>
        </div>
    </div>
    <!-- 市级总体分析 -->
    <City_County_01 v-else-if="reportData.id === 'city_01' || reportData.id === 'county_01'"  :countyData="countyData"
                    :yearData="yearData"  :reportData="reportData"/>
    <City_02 v-else-if="reportData.id === 'city_02'"  :countyData="countyData"
                    :yearData="yearData"  :reportData="reportData"/>
    <City_03 v-else-if="reportData.id === 'city_03'"  :countyData="countyData"
             :yearData="yearData"  :reportData="reportData"/>
    <City_04 v-else-if="reportData.id === 'city_04'"  :countyData="countyData"
             :yearData="yearData"  :reportData="reportData"/>
    <City_05 v-else-if="reportData.id === 'city_05'"  :countyData="countyData"
             :yearData="yearData"  :reportData="reportData"/>
    <!-- 县域分析 -->
    <District_02 v-else-if="reportData.id === 'county_02'"  :countyData="countyData"
             :yearData="yearData"  :reportData="reportData"/>
    <District_03 v-else-if="reportData.id === 'county_03'"  :countyData="countyData"
                 :yearData="yearData"  :reportData="reportData"/>
    <District_04 v-else-if="reportData.id === 'county_04'"  :countyData="countyData"
                 :yearData="yearData"  :reportData="reportData"/>
    <District_05 v-else-if="reportData.id === 'county_05'"  :countyData="countyData"
                 :yearData="yearData"  :reportData="reportData"/>
    <District_06 v-else-if="reportData.id === 'county_06'"  :countyData="countyData"
                 :yearData="yearData"  :reportData="reportData"/>
    <!-- 学校分析 -->
    <School_01_02 v-else-if="reportData.id === 'school_01' || reportData.id === 'school_02'" :countyData="countyData"
               :yearData="yearData"  :reportData="reportData" :schoolData="schoolData"/>
    <School_03 v-else-if="reportData.id === 'school_03'" :countyData="countyData"
                  :yearData="yearData"  :reportData="reportData" :schoolData="schoolData"/>
    <School_04 v-else-if="reportData.id === 'school_04'" :countyData="countyData"
               :yearData="yearData"  :reportData="reportData" :schoolData="schoolData"/>
    <School_05 v-else-if="reportData.id === 'school_05'" :countyData="countyData"
               :yearData="yearData"  :reportData="reportData" :schoolData="schoolData"/>
</template>

<script>
    import {Icon,Spin} from 'ant-design-vue';
    import {mapState} from 'vuex';
    import Interface from '../../../global-llibs/axios-config';
    import InterfaceConfig from './interfaceConfig';
    import _ from 'lodash';
    let pageType = "";
    export default {
        name: "DataAnalysisMain",
        data:function () {
            return {
                dataAnalysisCondition:[],
                ops:{
                    vuescroll: {},
                    scrollPanel: {},
                    rail: {
                        keepShow: true
                    },
                    bar: {
                        hoverStyle: true,
                        onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
                        background: "#999999",//滚动条颜色
                        opacity: 0.5,//滚动条透明度
                        "overflow-x": "hidden"
                    }
                },
                analysisType:pageType,
                showType:'condition',
                reportData:null,
                yearData:null,//选择的年度数据
                countyData:null,//选择的县域数据
                schoolData:null,//选择的学校数据
                loadData:true,
            }
        },
        components:{
            AIcon:Icon,
            ASpin:Spin,
            City_County_01:()=>import('./cityAnalysis/City_County_01.vue'),
            City_02:()=>import('./cityAnalysis/City_02.vue'),
            City_03:()=>import('./cityAnalysis/City_03.vue'),
            City_04:()=>import('./cityAnalysis/City_04.vue'),
            City_05:()=>import('./cityAnalysis/City_05.vue'),
            District_02:()=>import('./districtAnalysis/District_02.vue'),
            District_03:()=>import('./districtAnalysis/District_03.vue'),
            District_04:()=>import('./districtAnalysis/District_04.vue'),
            District_05:()=>import('./districtAnalysis/District_05.vue'),
            District_06:()=>import('./districtAnalysis/District_06.vue'),
            School_01_02:()=>import('./schoolAnalysis/School_01_02.vue'),
            School_03:()=>import('./schoolAnalysis/School_03.vue'),
            School_04:()=>import('./schoolAnalysis/School_04.vue'),
            School_05:()=>import('./schoolAnalysis/School_05.vue'),
        },
        mounted(){
          this.$bus.on("ANALYSISRETURN",this.returnBack);
        },
        updated(){
            if (this.loadData === false){//是否加载过数据
                this.loadData = true;
                if(this.role === 'city'){//市教育局角色
                    this.getCountyData();
                }else if (this.role === 'county'){//县域角色
                    this.getSchoolData();
                }else{//学校角色
                    this.isHasReportData();
                }
            }
        },
        beforeDestroy(){
            this.$bus.off("ANALYSISRETURN",this.returnBack)
        },
        methods:{
            /*
            * 获取某年度的县域列表
            * */
            getCountyData:function(){
                Interface.callInterface([{
                    url:InterfaceConfig.getCityBureauList.url,
                    params:{
                        report_year:this.yearData.id,
                        city_id:1
                    },
                    method:InterfaceConfig.getCityBureauList.method,
                    isTestLogin:InterfaceConfig.getCityBureauList.isTestLogin
                }],(result)=>{
                    if (result[0].data.code === 2000){
                        let data = result[0].data.data;
                        if (data && Array.isArray(data) && data.length > 0){//存在县域
                            if(this.analysisType === 'overallAnalysis'){//总体分析
                                this.getReportData();
                            }else{
                                let d = [];
                                data.forEach((item)=>{
                                    d.push({
                                        id:item.bureau_id,
                                        value:item.bureau_name,
                                    })
                                });
                                this.countyData = {id:d[0].id,value:d[0].value};
                                let dataCopy = _.cloneDeep(this.dataAnalysisCondition[1]);
                                dataCopy.data = d;
                                dataCopy.isLoading = false;
                                dataCopy.selectedId = d[0].id;
                                this.$set(this.dataAnalysisCondition,1,dataCopy);
                                if (this.analysisType === 'countyAnalysis'){
                                    this.getReportData();
                                }else{
                                    this.getSchoolData();
                                }
                            }
                        }else{//不存在县域
                            for(let i = 1; i < this.dataAnalysisCondition.length; i++){
                                let data = _.cloneDeep(this.dataAnalysisCondition[i]);
                                data.isLoading = false;
                                data.data = [];
                                this.$set(this.dataAnalysisCondition,i,data);
                            }
                        }
                    }
                })
            },
            /*
           * 获取某年度某县域的学校列表
           * */
            getSchoolData:function(){
                Interface.callInterface([{
                    url:InterfaceConfig.getBureauSchoolList.url,
                    params:{
                        report_year:this.yearData.id,
                        bureau_id:this.countyData && this.countyData.id?this.countyData.id:this.org_id,
                    },
                    method:InterfaceConfig.getBureauSchoolList.method,
                    isTestLogin:InterfaceConfig.getBureauSchoolList.isTestLogin
                }],(result)=>{
                    if (result[0].data.code === 2000){
                        let data = result[0].data.data;
                        if (data && Array.isArray(data) && data.length > 0){//存在学校
                            if (this.role === 'county' && this.analysisType === 'countyAnalysis'){
                                this.getReportData();
                            }else{
                                let d = [];
                                data.forEach((item)=>{
                                    d.push({
                                        id:item.school_id,
                                        value:item.school_name,
                                    })
                                });
                                this.schoolData = {id:d[0].id,value:d[0].value};
                                let index = this.role === 'county'?1:2
                                let dataCopy = _.cloneDeep(this.dataAnalysisCondition[index]);
                                dataCopy.data = d;
                                dataCopy.isLoading = false;
                                dataCopy.selectedId = d[0].id;
                                this.$set(this.dataAnalysisCondition,index,dataCopy);
                                this.getReportData();
                            }
                        }else{//不存在学校
                            let index = this.role === 'county'?1:2;
                            for(let i = index; i < this.dataAnalysisCondition.length; i++){
                                let data = _.cloneDeep(this.dataAnalysisCondition[i]);
                                data.isLoading = false;
                                data.data = [];
                                this.$set(this.dataAnalysisCondition,i,data);
                            }
                        }
                    }
                })
            },
            /*
           * 学校角色 获取当前学校是否有数据分析
           * */
            isHasReportData:function(){
                Interface.callInterface([{
                    url:InterfaceConfig.getSchoolIsExistStatisticReport.url,
                    params:{
                        report_year:this.yearData.id,
                        school_id:this.org_id,
                    },
                    method:InterfaceConfig.getSchoolIsExistStatisticReport.method,
                    isTestLogin:InterfaceConfig.getSchoolIsExistStatisticReport.isTestLogin
                }],(result)=>{
                    if (result[0].data.code === 2000){
                        let data = result[0].data.data;
                        if (parseInt(data.isExist) === 1){//有数据分析数据
                            this.getReportData();
                        }else{//没有数据分析数据
                            let data = _.cloneDeep(this.dataAnalysisCondition[this.dataAnalysisCondition.length - 1]);
                            data.isLoading = false;
                            data.data = [];
                            this.$set(this.dataAnalysisCondition,this.dataAnalysisCondition.length - 1,data);
                        }
                    }
                })
            },

            getReportData:function(){
                let reportData = _.cloneDeep(this.dataAnalysisCondition[this.dataAnalysisCondition.length - 1]);
                reportData.isLoading = false;
                if (this.analysisType === 'overallAnalysis'){
                    reportData.data =  [{id:'city_01',value:'01.全市样本、平均分、等级分布对比分析报告'},{id:'city_02',value:'02.全市各县域样本、平均分、等级对比分析报告'},
                        {id:'city_03',value:'03.全市各学校样本、平均分、等级分布对比分析报告'},{id:'city_04',value:'04.全市各学段学年样本、平均分、等级分布对比分析报告'},
                        {id:'city_05',value:'05.全市的单项样本、平均分、等级分布对比分析报告'},{id:'city_06',value:'06.全市各县域的单项样本、平均分、等级分布对比分析报告'},
                        {id:'city_07',value:'07.全市各学校的单项样本、平均分、等级分布对比分析报告'},{id:'city_08',value:'08.单项横、纵对比分析报告'}];
                }else if (this.analysisType === 'countyAnalysis'){
                    reportData.data = [
                        {id:'county_01',value:'01.县域样本、平均分、等级分布对比分析报告'},{id:'county_02',value:'02.县域各校样本、平均分、等级对比分析报告'},
                        {id:'county_03',value:'03.县域各学段学年样本、平均分、等级分布对比分析报告'},{id:'county_04',value:'04.县域的单项样本、平均分、等级分布对比分析报告'},
                        {id:'county_05',value:'05.县域各学校的单项样本、平均分、等级分布对比分析报告'},{id:'county_06',value:'06.单项横、纵对比分析报告'}
                    ];
                }else{
                    reportData.data = [
                        {id:'school_01',value:'01.学校学年样本、平均分、等级分布对比分析报告'},{id:'school_02',value:'02.各学年班级样本、平均分、等级对比分析报告'},
                        {id:'school_03',value:'03.学校的单项样本、平均分、等级分布对比分析报告'},{id:'school_04',value:'04.各班级的单项样本、平均分、等级分布对比分析报告'},
                        {id:'school_05',value:'05.单项横、纵对比分析报告'},{id:'school_06',value:'06.学生体质健康分析报告'}
                    ]
                }

                this.$set(this.dataAnalysisCondition,this.dataAnalysisCondition.length - 1,reportData);
            },
            /*
            * parent 点击目标的父数据
            * parentIndex 父数据索引
            * clickItem 点击目标
            * clickItemIndex 点击目标索引
            * */
            onItemClick:function (parent,parentIndex,clickItem,clickItemIndex) {
                if(parent.id === 'report'){//点击某个报告分析
                    this.showType = 'report';
                    this.reportData = clickItem;
                    if(clickItem.id.indexOf('county') !== -1){//点击的县域分析报告
                        if(this.role === 'county'){//当前是区角色
                            this.countyData={id:this.district_id,value:this.district_name};
                        }
                    }else if(clickItem.id.indexOf('school') !== -1){//点击的是学校分析的报告
                        if(this.role === 'school'){
                            this.countyData={id:this.district_id,value:this.district_name};
                            this.schoolData={id:this.org_id,value:this.org_name};
                        }
                    }
                    let breadCrumb = this.$store.state.breadCrumb;
                    breadCrumb.push(clickItem.value)
                    this.$store.commit('setSingleParam',{key:'breadCrumb',value:breadCrumb})
                }else if (parent.selectedId !== clickItem.id){//点击其它筛选条件
                    for(let i = parentIndex + 1; i < this.dataAnalysisCondition.length; i ++){
                        let data = _.cloneDeep(this.dataAnalysisCondition[i]);
                        data.isLoading = true;
                        data.data = [];
                        this.$set(this.dataAnalysisCondition,i,data);
                    }
                    if (parent.id === 'year'){
                        this.yearData = _.cloneDeep(clickItem);
                        if (this.role === 'city'){
                            this.getCountyData();
                        }else if (this.role === 'county'){
                            this.getSchoolData();
                        }else{
                            this.isHasReportData();
                        }
                    }else if (parent.id === 'county'){
                        this.countyData = _.cloneDeep(clickItem);
                        if (this.analysisType === 'countyAnalysis'){
                            this.getReportData();
                        }else{
                            this.getSchoolData();
                        }
                    }else if (parent.id === 'school'){
                        this.schoolData = _.cloneDeep(clickItem);
                        this.getReportData();
                    }
                    this.$set(parent,'selectedId',clickItem.id);
                }
                console.log(clickItemIndex)
            },

            onDownload:function(){
                console.log('下载报告')
            },
            returnBack:function () {
                this.showType = 'condition';
                let breadCrumb = this.$store.state.breadCrumb;
                breadCrumb.pop();
                this.$store.commit('setSingleParam',{key:'breadCrumb',value:breadCrumb});
            }
        },
        computed:{
            ...mapState(['role','district_id','district_name','org_id','org_name'])
        },
        beforeRouteEnter(to,from,next){
            pageType = to.name;
            next(vm=>{
                vm.analysisType = to.name;
                vm.showType = 'condition';
                let condition = [{
                    id:'year',
                    title:'选择年度',
                    selectedId:"20202021",
                    data:[{id:"20202021",value:"2020～2021年度"},{id:"20212022",value:"2021～2022年度"}, {id:"20222023",value:"2022～2023年度"}, {id:"20232024",value:"2023～2024年度"},
                        {id:"20242025",value:"2024～2025年度"}, {id:"20252026",value:"2025～2026年度"},{id:"20262027",value:"2026～2027年度"}, {id:"20272028",value:"2027～2028年度"},
                        {id:"20282029",value:"2028～2029年度"},{id:"20292030",value:'2029～2030年度'},{id:"20302031",value:"2030～2031年度"}]
                }];

                vm.yearData = {id:"20202021",value:"2020～2021年度"};


                if ((pageType === 'countyAnalysis' || pageType === 'schoolAnalysis') && vm.$store.state.role === 'city'){
                    //data中的数据需要从接口获取
                    condition.push({id:"county",title:'选择县域',selectedId:"",isLoading:true,data:[]})
                }
                if ( pageType === 'schoolAnalysis' && vm.$store.state.role !== 'school'){
                    //data中的数据需要从接口获取
                    condition.push({id:"school",title:'选择学校',selectedId:'',isLoading:true,data:[]})
                }

                condition.push({id:'report',title:'选择分析报告',isLoading:true,selectedId:'',data:[]});

                if(vm.$store.state.role === 'county'){//
                    vm.countyData = {id:vm.$store.state.org_id,value:vm.$store.state.org_name}
                }else if(vm.$store.state.role === 'school'){
                    vm.countyData = {id:vm.$store.state.district_id,value:vm.$store.state.district_name}
                    vm.schoolData = {id:vm.$store.state.org_id,value:vm.$store.state.org_name}
                }
                vm.dataAnalysisCondition = condition
                vm.loadData = false;
            });
        }
    }
</script>

<style scoped lang="scss">
.data-analysis-main-style{
    height: calc(100vh - 136px);
    display: flex;
    justify-content: space-between;
    .condition-container-style{
        width: 200px;
        background-color: white;
        padding: 20px 0 20px 10px;
        height: 100%;
        .title-style{
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            border-left: 10px solid #31a8fa;
            padding-left: 10px;
        }
        .year-list-style{
            margin-bottom: 0!important;
            padding-left: 0!important;
            /*min-height: 600px;*/
            padding-right: 10px;
            /*padding-top: 20px;*/
            .year-li-style{
                list-style: none;
                height: 50px;
                line-height: 50px;
                /*text-align: center;*/
                padding-left: 30px;
                cursor: pointer;
                position: relative;
                padding-right: 20px;
                overflow: hidden;
                word-break: keep-all;
                white-space: nowrap;
                text-overflow: ellipsis;
                &:hover{
                    background-color: #f2f2f2;
                }
                .icon-style{
                    position: absolute;
                    font-size: 16px;
                    color:#31a8fa;
                    right: 0;
                    top: 17px;
                }
            }
            .year-li-style[data-report=true]{
                height: 75px;
                line-height: 75px;
            }
        }
        .download-all-style{
            width: 8rem;
            margin-top: 20px;
            padding-left: 30px;
            color: #31a8fa;
            cursor:pointer;
        }
        .no-data-style{
            width: 100%;
            height: 10rem;
            line-height: 10rem;
            text-align: center;
            color:#999999;
        }
    }
}
    .analysis-container-style{
        position: relative;
        .back-btn-style{
            position: absolute;
            right: 0;
            top: -5px;
        }
    }
</style>
