<template>
    <div class="PsychologicalWarningSmall">
        <div v-if="this.BaseConfig.person_info_my.cur_role.role_id.toString()==='2'" >
            <a-tabs default-active-key="1" class="tab-style"  >
                <a-tab-pane key="1" tab="性别预警">
                    <m-bar-echarts
                            v-if="sexFlag"
                            :echartStyle="sexData.style"
                            :xAxisData="sexData.xAxisData"
                            :legendData="sexData.legendData"
                            :seriesData="sexData.seriesData"
                            :xAxisName="sexData.xAxisName"
                            :yAxisName="sexData.yAxisName"
                    >
                    </m-bar-echarts>
                </a-tab-pane>
                <a-tab-pane key="2" tab="年级预警" >
                    <m-bar-echarts
                            v-if="gradeBarFlag"
                            :echartStyle="gradeData.style"
                            :xAxisData="gradeData.xAxisData"
                            :legendData="gradeData.legendData"
                            :seriesData="gradeData.seriesData"
                            :xAxisName="gradeData.xAxisName"
                            :yAxisName="gradeData.yAxisName"
                    >
                    </m-bar-echarts>
                </a-tab-pane>
            </a-tabs>
        </div>
        <div v-else>
            <div class="teacher">
                <div class="header" style=" margin-left: 2rem;">
                    <div class="condition">
                        <span>选择日期：</span>
                        <a-range-picker @change="timeSelect" style="width:15rem;"/>

                    </div>
                    <div class="condition">
                        <span>年级：</span>
                        <a-select style="width:6rem;"  v-if="gradeFlag" value-key="item.ENTRANCE_YEAR" :default-value=this.classYearList[0].ENTRANCE_YEAR
                                  @change="handleSelectGrade($event)">
                            <a-select-option v-for="item in this.classYearList" :key="item.ENTRANCE_YEAR" :value="item.ENTRANCE_YEAR" >
                                {{ item.ENTRANCE_YEAR_TEXT }}
                            </a-select-option>
                        </a-select>
                    </div>
                    <div class="condition">
                        <span>班级：</span>
                        <a-select style="width:7.5rem;"  v-if="classFlag" value-key="item.CLASS_ID" :default-value=this.classList[0].CLASS_ID
                                  @change="handleSelectClass($event)">
                            <a-select-option v-for="item in this.classList" :key="item.CLASS_ID" :value="item.CLASS_ID" >
                                {{ item.CLASS_NAME }}
                            </a-select-option>
                        </a-select>
                    </div>
                    <div class="condition">
                        <a-input-search placeholder="姓名/预警因子" style="width: 20rem" @search="onSearch" @change="onNameChange" />
                    </div>
                </div>
                <div class="header">
                    <div class="condition">
                        <img src="./image/red.png" class="img-style"/>
                        <span>红色预警</span>
                    </div>
                    <div class="condition">
                        <img src="./image/orange.png" class="img-style"/>
                        <span>橙色预警</span>
                    </div>
                    <div class="condition">
                        <img src="./image/yellow.png" class="img-style"/>
                        <span>黄色预警</span>
                    </div>
                </div>
            </div>
            <a-table :columns="columns" :data-source="tableData" @change="onChange" size="small" style="width:100%;margin-bottom: 1rem"
                     :pagination="{current:page_number,pageSize:page_size,hideOnSinglePage:true,total:total_row}"
            >
                <div slot="pic" slot-scope="text, record" >
                    <div v-if="record.WARNING_LEVEL===1" style="text-align: center">
                        <img src="./image/yellow.png" class="img-style"/>
                    </div>
                    <div v-else-if="record.WARNING_LEVEL===2" style="text-align: center">
                        <img src="./image/orange.png" class="img-style"/>
                    </div>
                    <div v-else style="text-align: center">
                        <img src="./image/red.png" class="img-style"/>
                    </div>
                </div>
            </a-table>

        </div>
    </div>
</template>

<script>
    import {
        Tabs,
        Input,
        Select,
        DatePicker,
        Table,
    } from 'ant-design-vue'
    import mBarEcharts from './../educationalWisdom/utils/BarEcharts'
    import InterfaceConfig from './utils/interfaceConfig'
    export default {
        name: 'PsychologicalWarningSmall',
        components: {
            mBarEcharts,
            ATabs: Tabs,
            ATabPane: Tabs.TabPane,
            ATable:Table,
            ARangePicker:DatePicker.RangePicker,
            ASelect:Select,
            ASelectOption:Select.Option,
            AInputSearch:Input.Search,
        },
        data:function () {
            return {
                page_number:1,//当前页码
                page_size:10,//每页显示条数
                total_row:1,//共有多少行
                sexFlag:false,
                gradeFlag:false,
                gradeBarFlag:false,
                classFlag:false,
                tableFlag:false,
                year:'',
                class_id:'',
                classYearList:[{
                    ENTRANCE_YEAR_TEXT: "全部",
                    ENTRANCE_YEAR: ""
                }],
                classList:[{
                    CLASS_ID: "",
                    CLASS_NAME: "全部"
                }],

                sexData:{
                    style:{
                        height:''
                    },
                    xAxisData:[],
                    legendData:[],
                    seriesData:[],
                    xAxisName:"",
                    yAxisName:"人数",
                },
                gradeData:{
                    style:{
                        height:''
                    },
                    xAxisData:[],
                    legendData:[],
                    seriesData:[],
                    xAxisName:"",
                    yAxisName:"人数",
                },
                start_date: '',
                end_date:'',
                keyword:'',
                index:1,
                sort_type:1,
                tableData:[],
                columns : [
                    {
                        title: '预警等级',
                        dataIndex: 'WARNING_LEVEL',
                        width: 40,
                        align:'center',
                        scopedSlots: { customRender: 'pic' }
                    },
                    {
                        title: '姓名',
                        dataIndex: 'STUDENT_NAME',
                        width:50,
                        align:'center',
                    },
                    {
                        title: '班级',
                        dataIndex: 'CLASS_NAME',
                        width: 70,
                        align:'center',

                    },
                    {
                        title: '预警来源',
                        dataIndex: 'WARNING_SOURCE',
                        width: 90,
                        align:'center',

                    },  {
                        title: '预警时间',
                        dataIndex: 'CREATE_TIME',
                        defaultSortOrder: 'descend',
                        sorter: (a, b) => a.score - b.score,
                        width: 60,
                        align:'center',
                    },
                ],
            }
        },
        created(){
            // 获取屏幕高度
            this.sexData.style.height = '370px';
            this.gradeData.style.height = '370px';


        },
        mounted() {
            if(this.BaseConfig.person_info_my.cur_role.role_id.toString()==='2'){
                this.getWarningDistribution('gender');
                this.getWarningDistribution('grade');
            }else if(this.BaseConfig.person_info_my.cur_role.role_id.toString()==='4'){
                this.getClassYear();
            }



        },
        methods: {
            //table
            onChange:function (pagination, filters, sorter) {
                this.page_number=pagination.current;
                this.page_size=pagination.pageSize;
                if(sorter.field==="CREATE_TIME"){
                    if(sorter.order==="descend"){
                        this.sort_type=2;
                    }else{
                        this.sort_type=1;
                    }
                    this.getWarningList(this.keyword);
                }
            },
            //姓名，因子搜索
            onSearch:function (value) {
                this.getWarningList(value);
            },

            onNameChange:function (e) {
                this.keyword=e.target.value;
            },
            //选择年级
            handleSelectGrade:function (key) {
                this.year=key;
                this.getClassList();
            },
            //选择班级
            handleSelectClass:function (key) {
                this.class_id=key;
                this.getWarningList(this.keyword);
            },

            //日期选择
            timeSelect:function (date, dateString) {
                this.start_date=dateString[0];
                this.end_date=dateString[1];
                this.getWarningList(this.keyword);

            },
            //处理数据
            dealData:function (data) {
                let datas = [];
                let _xaxis = [];
                let xAxisData = []; //x轴数据
                let yAxisData = []; //y轴数据
                let groupIndex = []; //名称
                for(let i = 0; i < data[0].list.length; i++){
                    _xaxis.push(data[0].list[i].xaxis);
                }
                data.forEach((item)=>{
                    let _count = []; //数值
                    for(let i = 0; i < item.list.length; i++){
                        _count.push(item.list[i].count);
                    }
                    xAxisData = _xaxis;
                    yAxisData.push( _count);
                    groupIndex.push(item.group_index);
                });
                datas = {
                    xAxisData: xAxisData,
                    yAxisData: yAxisData,
                    groupIndex: groupIndex
                };
                return datas;
            },
            //心理预警统计
            getWarningDistribution:function (type) {
                let params={
                    bureau_id:this.BaseConfig.person_info_my.bureau_id,
                    code:type
                };
                this.InterfaceConfig.callInterface([{
                    url:InterfaceConfig.getWarningDistribution.url,
                    params:params,
                    method:InterfaceConfig.getWarningDistribution.method,
                    isTestLogin:InterfaceConfig.getWarningDistribution.isTestLogin,
                    isOfficeInterface:false
                }],(result)=>{
                    if(type==='gender'){
                        this.sexFlag=true;
                        if(result[0].data.list.length!==0){
                            let dom=this.dealData(result[0].data.list);
                            this.sexData.xAxisData=dom.xAxisData;
                            this.sexData.legendData=dom.groupIndex;
                            this.sexData.seriesData=[
                                {
                                    name:dom.groupIndex[0],
                                    type:'bar',
                                    data:dom.yAxisData[0],
                                    itemStyle:{
                                        normal:{
                                            color:'#D43030'
                                        }
                                    }
                                },
                                {
                                    name:dom.groupIndex[1],
                                    type:'bar',
                                    data:dom.yAxisData[1],
                                    itemStyle:{
                                        normal:{
                                            color:'#FF5733'
                                        }
                                    }
                                },
                                {
                                    name:dom.groupIndex[2],
                                    type:'bar',
                                    data:dom.yAxisData[2],
                                    itemStyle:{
                                        normal:{
                                            color:'#FFEB3B'
                                        }
                                    }
                                },
                            ];
                        }else {
                            this.sexData.seriesData=[];
                            this.sexData.xAxisData=[];
                            this.sexData.legendData=[];

                        }


                    }else {
                        this.gradeBarFlag=true;
                        if(result[0].data.list.length!==0){
                            let dom=this.dealData(result[0].data.list);
                            this.gradeData.xAxisData=dom.xAxisData;
                            this.gradeData.legendData=dom.groupIndex;
                            this.gradeData.seriesData=[
                                {
                                    name:dom.groupIndex[0],
                                    type:'bar',
                                    data:dom.yAxisData[0],
                                    itemStyle:{
                                        normal:{
                                            color:'#D43030'
                                        }
                                    }
                                },
                                {
                                    name:dom.groupIndex[1],
                                    type:'bar',
                                    data:dom.yAxisData[1],
                                    itemStyle:{
                                        normal:{
                                            color:'#FF5733'
                                        }
                                    }
                                },
                                {
                                    name:dom.groupIndex[2],
                                    type:'bar',
                                    data:dom.yAxisData[2],
                                    itemStyle:{
                                        normal:{
                                            color:'#FFEB3B'
                                        }
                                    }
                                },
                            ];
                        }else {
                            this.gradeData.seriesData=[];
                            this.gradeData.xAxisData=[];
                            this.gradeData.legendData=[];

                        }
                    }

                })
            },
            //获取年级
            getClassYear:function () {
                let params={
                    org_id:this.BaseConfig.person_info_my.bureau_id,
                    stage:6
                };
                this.InterfaceConfig.callInterface([{
                    url:InterfaceConfig.getClassYear.url,
                    params:params,
                    method:InterfaceConfig.getClassYear.method,
                    isTestLogin:InterfaceConfig.getClassYear.isTestLogin,
                    isOfficeInterface:false
                }],(result)=>{
                    if(result[0].data.success){
                        let data=result[0].data.table_List;
                        this.gradeFlag=true;
                        if(data.length!==0){
                            let _list= [{
                                ENTRANCE_YEAR_TEXT: "全部",
                                ENTRANCE_YEAR: ""
                            }];
                            data.forEach((item,) => {
                                item.columns.ENTRANCE_YEAR_TEXT = item.columns.ENTRANCE_YEAR + "级";
                                _list.push(item.columns);
                            });
                            this.classYearList=_list;
                        }else {
                            this.gradeList=[{
                                ENTRANCE_YEAR_TEXT: "全部",
                                ENTRANCE_YEAR: ""
                            }];
                        }
                        this.getClassList();


                    }
                })

            },
            //获取班级
            getClassList:function () {
                this.classFlag=false;
                let params={
                    org_id:this.BaseConfig.person_info_my.bureau_id,
                    bureau_id: this.BaseConfig.person_info_my.bureau_id,
                    entrance_year: this.year,
                    pageSize: 999,
                    pageNumber: 1,
                    stage_id: 6,
                };
                this.InterfaceConfig.callInterface([{
                    url:InterfaceConfig.getClassList.url,
                    params:params,
                    method:InterfaceConfig.getClassList.method,
                    isTestLogin:InterfaceConfig.getClassList.isTestLogin,
                    isOfficeInterface:false
                }],(result)=>{
                    if(result[0].data.success){
                        this.classFlag=true;
                        let dom = [{
                            CLASS_ID: "",
                            CLASS_NAME: "全部"
                        }];
                        if(result[0].data.table_List.length!==0){
                            result[0].data.table_List.forEach((item) => {
                                dom.push({CLASS_NAME: item.CLASS_NAME, CLASS_ID: item.CLASS_ID});
                            });
                        }
                        this.class_id=dom[0].CLASS_ID;
                        this.classList=dom;
                        this.getWarningList(this.keyword);
                    }
                })

            },
            //获取预警列表
            getWarningList:function (keyword) {
                let params={
                    bureau_id: this.BaseConfig.person_info_my.bureau_id,
                    start_date: this.start_date,
                    end_date: this.end_date,
                    grade_year: this.year,
                    page_size: this.page_size,
                    page_number:keyword!==""?1:this.page_number,
                    class_id: this.class_id,
                    sort_type:this.sort_type,//1是升序，2是降序
                    keyword :keyword,
                    status:''
                };
                this.InterfaceConfig.callInterface([{
                    url:InterfaceConfig.getWarningList.url,
                    params:params,
                    method:InterfaceConfig.getWarningList.method,
                    isTestLogin:InterfaceConfig.getWarningList.isTestLogin,
                    isOfficeInterface:false
                }],(result)=>{
                    if(result[0].data.success){
                        this.tableFlag=true;
                        this.total_row=result[0].data.totalRow;
                        this.tableData=result[0].data.table_List;
                    }
                })

            },
        }
    }
</script>

<style scoped lang="scss">
    .PsychologicalWarningSmall{
        /deep/ .ant-tabs-nav{
            .ant-tabs-tab{
                color: var(--moduleFontColor);
            }
            .ant-tabs-tab-active{
                color: #31a8fa;
            }
        }
        .condition{
            margin-right: 1rem;
            margin-bottom: 1rem;
            display: inline-block;
        }
        .img-style{
            width:18px;
            height:18px;
            vertical-align: top;
        }
        .administrator{
            overflow: hidden;
            margin-bottom: 2rem;
        }
        .teacher{
            .header{

                margin-top: 1rem;
            }
        }
    }
</style>