<template>
    <CommonBox title="心理建设" class="psychic-build-style">
        <a-spin class="psychic-build-content-style" :spinning="spinning">
            <div class="psychic-img-box-style">
                <div class="img-change-box-style">
                    <div class="title-box-style">
                        <div class="img-style">
                            <img src="../../../assets/images/moralEducationWork/u4216.png"
                                 style="width: 100%;height: 100%"/>
                        </div>
                        <div class="text-style">心理咨询室</div>
                    </div>
                    <div class="img-list-style">
                        <swiper v-if="showCounsellingRoom && counsellingRoomList.length > 0" class="banner"
                                :options="swiperOption01"
                                ref="mySwiper">
                            <swiper-slide v-for="(item, index) in counsellingRoomList" :key="index"
                                          class="community-box-style">
                                <div class="img-box-style">
                                    <img :src="item.imgUrl"/>
                                </div>
                            </swiper-slide>
                        </swiper>
                        <div v-if="showCounsellingRoom && counsellingRoomList.length === 0"
                             class="no-data-content-style">
                            <!--<a-empty description="暂无数据"/>-->
                            暂无数据~
                        </div>
                    </div>
                    <div class="img-change-style">
                        <!--<a-icon type="right" :style="{fontSize: '30px', color: '#31a8fa'}"/>-->
                        <div v-if="counsellingRoomList.length > 0" class="swiper-button-next" slot="button-next"
                             @click="prev"></div>
                    </div>
                </div>
                <div class="img-change-box-style">
                    <div class="img-change-style">
                        <div v-if="psychicClassroomList.length > 0" class="swiper-button-prev" slot="button-next"
                             @click="next"></div>
                    </div>
                    <div class="img-list-style">
                        <swiper v-if="showPsychicClassroom && psychicClassroomList.length > 0" class="banner"
                                :options="swiperOption02"
                                ref="classRoomSwiper">
                            <swiper-slide v-for="(item, index) in psychicClassroomList" :key="index"
                                          class="community-box-style">
                                <div class="img-box-style">
                                    <img :src="item.imgUrl"/>
                                </div>
                            </swiper-slide>
                        </swiper>
                        <div v-if="showPsychicClassroom && psychicClassroomList.length === 0"
                             class="no-data-content-style">
                            <!--<a-empty description="暂无数据"/>-->
                            暂无数据~
                        </div>
                    </div>
                    <div class="title-box-style">
                        <div class="img-style">
                            <img src="../../../assets/images/moralEducationWork/u4518.png"
                                 style="width: 100%;height: 100%"/>
                        </div>
                        <div class="text-style">心理课堂</div>
                    </div>
                </div>
            </div>
            <div class="psychic-img-box-style">
                <div class="select-top-style">
                <span :class="'select-item-style border-right-style' + (selectType === 1?' select-style':'')"
                      @click="typeChange(1)">心育活动</span>
                    <span :class="'select-item-style' + (selectType === 2?' select-style':'')"
                          @click="typeChange(2)">心育精选</span>
                </div>
                <div class="tab-content-style">
                    <a-tabs :activeKey="paneKey">
                        <a-tab-pane :key="1" tab="Tab 1">
                            <div class="activity-table-box-style">
                                <a-row class="table-header-style">
                                    <a-col class="header-box-style border-right-style" :span="4">日期</a-col>
                                    <a-col class="header-box-style border-right-style" :span="7">课程</a-col>
                                    <a-col class="header-box-style border-right-style" :span="3">主讲人</a-col>
                                    <a-col class="header-box-style border-right-style" :span="7">地点</a-col>
                                    <a-col class="header-box-style" :span="3">参与人员</a-col>
                                </a-row>
                                <vue-scroll v-if="showPsychicActivity && psychicActivityList.length > 0"
                                            class="table-boday-style" :ops="listScroll"
                                            style="height:calc(100% - 40px)">
                                    <a-row class="table-row-style" v-for="item,index in psychicActivityList"
                                           :key="'psychicActivity_'+index">
                                        <a-col class="header-box-style border-right-style light-style" :span="4"
                                               :title="coverTime(item.course_date)">{{coverTime(item.course_date)}}
                                        </a-col>
                                        <a-col class="header-box-style border-right-style light-style italic-style"
                                               :span="7">
                                            <div class="overflow-style" :title="item.course_name">{{item.course_name}}
                                            </div>
                                        </a-col>
                                        <a-col class="header-box-style border-right-style light-style italic-style"
                                               :span="3">
                                            <div class="overflow-style" :title="item.course_speaker">
                                                {{item.course_speaker}}
                                            </div>
                                        </a-col>
                                        <a-col class="header-box-style border-right-style light-style italic-style"
                                               :span="7">
                                            <div class="overflow-style" :title="item.course_place">
                                                {{item.course_place}}
                                            </div>
                                        </a-col>
                                        <a-col class="header-box-style light-style" :span="3">
                                            <div class="overflow-style" :title="item.attendees">{{item.attendees}}</div>
                                        </a-col>
                                    </a-row>
                                </vue-scroll>
                                <div v-if="showPsychicActivity && psychicActivityList.length === 0"
                                     class="no-data-content-style">
                                    <a-empty description="暂无数据" style="font-size: 10px"/>
                                    <!--暂无数据~-->
                                </div>
                            </div>
                        </a-tab-pane>
                        <a-tab-pane :key="2" tab="Tab 2">
                            <div class="selected-content-style">
                                <div v-if="showSelectedData && selectedDataList.length > 0"
                                     class="copywriting-list-style">
                                    <a-row class="table-row-style" v-for="item,index in selectedDataList"
                                           :key="'selectednews_'+index">
                                        <a-col class="header-box-style" :span="24" @click="showInfo(item)">{{'• ' +
                                            item.info_title}}
                                        </a-col>
                                    </a-row>
                                </div>
                                <div v-if="showSelectedData && selectedImgDataList.length > 0"
                                     class="copywriting-img-style">
                                    <div class="img-box-style" v-for="item,index in selectedImgDataList"
                                         :key="'selected_img_'+ index">
                                        <div class="img-style">
                                            <img-preview :imgObj="item.imgObj"/>
                                            <!--<img src="../../../assets/images/moralEducationWork/u4203.svg"-->
                                            <!--style="width: 100%;height: 100%"/>-->
                                        </div>
                                        <div class="text-style" @click="showInfo(item)">
                                            {{item.info_title}}
                                        </div>
                                    </div>
                                </div>
                                <div v-if="showSelectedData && selectedDataList.length === 0 && selectedImgDataList.length === 0"
                                     class="no-data-content-style">
                                    <a-empty description="暂无数据" style="font-size: 10px"/>
                                    <!--暂无数据~-->
                                </div>
                            </div>
                        </a-tab-pane>
                    </a-tabs>
                </div>
            </div>
        </a-spin>
        <common-info :infoObj="infoObj" :show="visible" @cancel="closeInfo"/>
    </CommonBox>
</template>
<script>
    /*
     * 德育工作
     * */
    import CommonBox from '../../secondPages/commonBox.vue';
    import {Icon, Tabs, row, col, Empty, Spin} from 'ant-design-vue';
    import {swiper, swiperSlide} from "vue-awesome-swiper";
    //    import "swiper/dist/css/swiper.css";
    import moment from 'moment';
    import ImgPreview from '../../../common/imgPreview.vue';
    import CommonInfo from '../../../common/commonInfo.vue';

    export default {
        data() {
            return {
                spinning: false,
                selectType: 1,//1 周历 2 校历
                paneKey: 1,
                listScroll: this.StaticParams.scrollOption,
                swiperOption01: {
                    speed: 1000,
                    loop: true,
                    slidesPerView: 3,
                    spaceBetween: 10,
                    navigation: {
                        nextEl: '.swiper-button-next',
                    },
                },
                swiperOption02: {
                    speed: 1000,
                    loop: true,
                    slidesPerView: 3,
                    spaceBetween: 10,
                    navigation: {
                        nextEl: '.swiper-button-prev',
                    },
                },
                showCounsellingRoom: false,
                counsellingRoomList: [],
                showPsychicClassroom: false,
                psychicClassroomList: [],
                showPsychicActivity: false,
                psychicActivityList: [],
                showSelectedData: false,
                selectedDataList: [],
                selectedImgDataList: [],
                visible: false,
                infoObj: {},
            }
        },
        mounted() {
            //获取心理咨询室数据
            this.getPsychologyCounsellingRoom();
            //获取心理课堂数据
            this.getPsychologyClassroom();
            //获取心育活动数据
            this.getMentalEducationActivities();
            //获取心育精选数据
            this.getMentalEducationSelected();
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.$swiper
            },
            classRoomSwiper() {
                return this.$refs.classRoomSwiper.$swiper
            }
        },
        methods: {
            //获取心理咨询室数据
            getPsychologyCounsellingRoom: function () {
                let param = {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "query_deyu_xinli",
                        "query_param": [
                            this.BaseConfig.person_info_my.bureau_id + ""
                            // "900008135"
                        ]
                    },
                    "query_cache": 0,
                    "query_count": [],
                    "query_format": "json",
                    "query_group": []
                }
                this.showCounsellingRoom = false;
                this.counsellingRoomList = [];
                this.DataexReportInterface.callInterface([{
                    params: param,
                    method: "post",
                }], (result) => {
                    // console.log('获取心理咨询室数据', result)
                    this.showCounsellingRoom = true;
                    if (result[0].data.success) {
                        let res = result[0].data.result;
                        if (res !== "") {
                            let dataList = JSON.parse(res);
                            if (dataList && dataList.length > 0) {
                                this.counsellingRoomList.push(...dataList);
                            }
                        }
                    }
                })
            },
            //获取心理课堂数据
            getPsychologyClassroom: function () {
                let param = {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "query_deyu_xinli2",
                        "query_param": [
                            this.BaseConfig.person_info_my.bureau_id + ""
                            // "900008135"
                        ]
                    },
                    "query_cache": 0,
                    "query_count": [],
                    "query_format": "json",
                    "query_group": []
                }
                this.showPsychicClassroom = false;
                this.psychicClassroomList = [];
                this.DataexReportInterface.callInterface([{
                    params: param,
                    method: "post",
                }], (result) => {
                    // console.log('获取心理课堂数据', result)
                    this.showPsychicClassroom = true;
                    if (result[0].data.success) {
                        let res = result[0].data.result;
                        if (res !== "") {
                            let dataList = JSON.parse(res);
                            if (dataList && dataList.length > 0) {
                                this.psychicClassroomList.push(...dataList);
                            }
                        }
                    }
                })
            },
            getMentalEducationActivities: function () {
                let param = {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "query_deyu_xinyu",
                        "query_param": [
                            this.BaseConfig.person_info_my.bureau_id + ""
                        ]
                    },
                    "query_cache": 0,
                    "query_count": [],
                    "query_format": "json",
                    "query_group": []
                }
                this.spinning = true;
                this.showPsychicActivity = false;
                this.psychicActivityList = [];
                this.DataexReportInterface.callInterface([{
                    params: param,
                    method: "post",
                }], (result) => {
                    this.spinning = false;
                    this.showPsychicActivity = true;
                    if (result[0].data.success) {
                        let res = result[0].data.result;
                        if (res !== "") {
                            let dataList = JSON.parse(res);
                            if (dataList && dataList.length > 0) {
                                this.psychicActivityList.push(...dataList);
                            }
                        }
                    }
                })
            },
            getMentalEducationSelected: function () {
                let param = {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "query_deyu_xinli3",
                        "query_param": [
                            this.BaseConfig.person_info_my.bureau_id + ""
                        ]
                    },
                    "query_cache": 0,
                    "query_count": [],
                    "query_format": "json",
                    "query_group": []
                }
                this.showSelectedData = false;
                this.selectedDataList = [];
                this.DataexReportInterface.callInterface([{
                    params: param,
                    method: "post",
                }], (result) => {
                    this.showSelectedData = true;
                    if (result[0].data.success) {
                        let res = result[0].data.result;
                        if (res !== "") {
                            let dataList = JSON.parse(res);
                            if (dataList && dataList.length > 0) {
                                for (let i = 0; i < 5; i++) {
                                    let dataInfo = dataList[i];
                                    if (dataInfo) {
                                        let cover_json = dataList[i].cover_json;
                                        if (cover_json !== "") {
                                            let imgObj = JSON.parse(cover_json);
                                            dataList[i]["imgObj"] = imgObj[0];
                                        }
                                        this.selectedDataList.push(dataList[i]);
                                    }
                                }
                                for (let i = 5; i < 7; i++) {
                                    let dataInfo = dataList[i];
                                    if (dataInfo) {
                                        let cover_json = dataList[i].cover_json;
                                        if (cover_json !== "") {
                                            let imgObj = JSON.parse(cover_json);
                                            dataList[i]["imgObj"] = imgObj[0];
                                        }
                                        this.selectedImgDataList.push(dataList[i]);
                                    }
                                }
                            }
                        }
                    }
                })
            },
            prev() {
                this.swiper.slidePrev();
            },
            next() {
                this.classRoomSwiper.slideNext();
            },
            changeType: function () {
                this.timing = setInterval(() => {
                    let paneKey = this.paneKey === 1 ? 2 : 1;
                    this.typeChange(paneKey)
                }, 12000)
            },
            typeChange: function (type) {
                if (this.selectType !== type) {
                    this.selectType = type;
                    this.paneKey = type;
                }
            },
            coverTime: function (time) {
                return moment(time.replace('T', ' ').replace('Z', '')).format("YYYY-MM-DD");
            },
            showInfo: function (item) {
                let param = {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "query_dangjian_xiangxi",
                        "query_param": [
                            item.info_id + ""
                        ]
                    },
                    "query_cache": 0,
                    "query_count": [],
                    "query_format": "json",
                    "query_group": []
                }
                this.DataexReportInterface.callInterface([{
                    params: param,
                    method: "post",
                }], (result) => {
                    if (result[0].data.success) {
                        let dataInfo = JSON.parse(result[0].data.result);
                        if (dataInfo && dataInfo.length > 0) {
                            let info = dataInfo[0];
                            let infoObj = {
                                title: info.info_title,
                                infoArr: [
                                    {"title": "发布单位", "value": info.ORG_NAME},
                                    {"title": "发布人", "value": info.person_name},
                                    {"title": "发布时间", "value": info.create_time.replace('T', ' ').replace('Z', '')},
                                ],
                                content: info.info_content
                            }
                            this.infoObj = infoObj;
                            this.visible = true;
                        }
                    }
                })
            },
            closeInfo: function () {
                this.visible = false;
            }
        },
        components: {
            CommonBox,
            AIcon: Icon,
            swiper,
            swiperSlide,
            ATabs: Tabs,
            ATabPane: Tabs.TabPane,
            ARow: row,
            ACol: col,
            AEmpty: Empty,
            ASpin: Spin,
            ImgPreview,
            CommonInfo
        }
    }
</script>
<style scoped lang="scss">
    @import "../../../assets/scss/style";

    .psychic-build-style {
        width: 600px !important;
        height: 380px !important;
        display: flex;
        .psychic-build-content-style {
            width: 100%;
            height: 345px;
            /deep/ .ant-spin-container {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .psychic-img-box-style {
                    width: 100%;
                    height: calc(50% - 5px);
                    display: flex;
                    flex-direction: column;
                    .img-change-box-style {
                        width: 100%;
                        height: 50%;
                        display: flex;
                        .title-box-style {
                            width: 80px;
                            height: 100%;
                            border-radius: 5px;
                            background-color: #3a4670;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            .img-style {
                                width: 30px;
                                height: 30px;
                            }
                            .text-style {
                                margin-top: 5px;
                            }
                        }
                        .img-list-style {
                            width: calc(100% - 130px);
                            height: 100%;
                            display: flex;
                            justify-content: space-between;
                            .banner {
                                .community-box-style {
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                }
                            }
                            .no-data-content-style {
                                width: 100%;
                                height: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                color: white;
                                /deep/ .ant-empty {
                                    .ant-empty-image {
                                        height: 60px !important;
                                    }
                                    .ant-empty-description {
                                        color: white;
                                    }
                                }
                            }
                        }
                        .img-change-style {
                            width: 50px;
                            height: 100%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            .swiper-button-next {
                                position: relative !important;
                                top: auto !important;
                                margin-top: 0 !important;
                                right: auto !important;
                            }
                            .swiper-button-prev {
                                position: relative !important;
                                top: auto !important;
                                margin-top: 0 !important;
                                left: auto !important;
                            }
                        }
                    }
                    .select-top-style {
                        width: 100%;
                        height: 20px;
                        .select-item-style {
                            color: #1379c8;
                            padding: 0 10px;
                            font-size: 16px;
                            cursor: pointer;
                        }
                        .border-right-style {
                            border-right: 1px solid #1379c8;
                        }
                        .select-style {
                            color: $color-default-bright;
                            cursor: default;
                        }
                    }
                    .tab-content-style {
                        width: 100%;
                        height: 100%;
                        .ant-tabs {
                            height: 100%;
                            .ant-tabs-content {
                                width: 100%;
                                height: 100%;
                            }
                            .ant-tabs-bar {
                                display: none !important;
                            }
                        }
                        .activity-table-box-style {
                            width: 100%;
                            height: 100%;
                            .table-header-style {
                                width: 100%;
                                height: 30px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                border: 1px solid $color-default-bright;
                                background-color: #18356a;
                                color: white;
                                .header-box-style {
                                    height: 30px;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                }
                                .border-right-style {
                                    border-right: 1px solid $color-default-bright;
                                }
                            }
                            .table-boday-style {
                                width: 100%;
                                height: calc(100% - 50px);
                                display: flex;
                                flex-direction: column;
                                .table-row-style {
                                    width: 100%;
                                    height: 30px;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    border: 1px solid $color-default-bright;
                                    .header-box-style {
                                        height: 30px;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    .border-right-style {
                                        border-right: 1px solid $color-default-bright;
                                    }
                                    .light-style {
                                        color: $color-default-bright;
                                        .overflow-style {
                                            width: 100%;
                                            text-align: center;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                        }
                                    }
                                    .default-style {
                                        color: #F59A23;
                                    }
                                    .danger-style {
                                        color: #EC808D;
                                    }
                                    .italic-style {
                                        font-style: italic;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                    }
                                }
                            }
                            .no-data-content-style {
                                width: 100%;
                                height: calc(100% - 50px);
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                color: white;
                                .ant-empty {
                                    .ant-empty-image {
                                        height: 60px !important;
                                    }
                                    .ant-empty-description {
                                        color: white;
                                    }
                                }
                            }
                        }
                        .selected-content-style {
                            width: 100%;
                            height: 100%;
                            display: flex;
                            .copywriting-list-style {
                                width: 60%;
                                height: 100%;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                                color: $color-default-bright;
                                .table-row-style {
                                    .header-box-style {
                                        cursor: pointer;
                                    }
                                }
                            }
                            .copywriting-img-style {
                                width: 40%;
                                height: 100%;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                                .img-box-style {
                                    width: 100%;
                                    height: calc(50% - 5px);
                                    border-radius: 5px;
                                    display: flex;
                                    .img-style {
                                        width: 50%;
                                        height: 100%;
                                    }
                                    .text-style {
                                        width: 50%;
                                        height: 100%;
                                        background-color: #333333;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        color: white;
                                        cursor: pointer;
                                    }
                                }
                            }
                            .no-data-content-style {
                                width: 100%;
                                height: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                color: white;
                                /deep/ .ant-empty {
                                    .ant-empty-image {
                                        height: 60px !important;
                                    }
                                    .ant-empty-description {
                                        color: white;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>