<template>
    <modal-panel
            addChildType="slot"
            :modalTitle="title"
            :OKButton="false"
            :show="showPanel"
            :mask="true"
            modalWidth="60%"
            modalClassName="common-info-content-style"
            @callback="modalCallback"
    >
        <a-spin class="common-info-style" :spinning="spinning">
            <div class="title-content-style">
                <h1>{{clubName}}</h1>
            </div>
            <div class="content-style">
                <vue-scroll :ops="listScroll" style="width: 100%;height:600px">
                    <div class="club-info-style">
                        <div class="title-box-style">社团信息</div>
                        <div class="info-row-style">
                            <div class="left-style">团员人数 / </div>
                            <div class="right-style">{{memberNum + '人'}}</div>
                        </div>
                        <div class="info-row-style">
                            <div class="left-style">社团简介 / </div>
                            <div class="right-style">
                                <vue-scroll :ops="listScroll" style="width: 100%;height:100px">
                                    {{clubDescribe}}
                                </vue-scroll>
                            </div>
                        </div>
                    </div>
                    <div class="img-content-style">
                        <div class="title-box-style">社团图片</div>
                        <swiper class="banner" :options="swiperOption" ref="mySwiper">
                            <swiper-slide v-for="(item, index) in imgList" :key="index"
                                          class="club-box-style">
                                <img-preview :imgObj="item"/>
                            </swiper-slide>
                            <div class="swiper-pagination" slot="pagination"></div>
                        </swiper>
                    </div>
                    <div class="info-content-style">
                        <div class="title-box-style">社团活动</div>
                        <!--<a-table :columns="columns" :dataSource="dataSource"-->
                        <!--:bordered="true" :pagination="false" :scroll="{ y: 120 }"/>-->
                        <div class="table-box-style">
                            <a-row class="header-row">
                                <a-col class="header-col" :span="2">序号</a-col>
                                <a-col class="header-col" :span="4">日期</a-col>
                                <a-col class="header-col" :span="9">活动名称</a-col>
                                <a-col class="header-col" :span="9">地点</a-col>
                            </a-row>
                            <div v-if="showDataSource && dataSource.length > 0" class="activity-list-scroll-style">
                                <vue-scroll :ops="listScroll" style="width: 100%;height:165px">
                                    <a-row v-for="item in dataSource" :key="'activity_'+item.index" class="body-row">
                                        <a-col class="body-col" :span="2">{{item.index}}</a-col>
                                        <a-col class="body-col" :span="4">{{item.activityDate}}</a-col>
                                        <a-col class="body-col" :span="9">{{item.activityName}}</a-col>
                                        <a-col class="body-col" :span="9">{{item.activityPlace}}</a-col>
                                    </a-row>
                                </vue-scroll>
                            </div>
                            <div v-if="showDataSource && dataSource.length === 0" class="no-data-div">
                                <a-empty/>
                            </div>
                        </div>
                    </div>
                </vue-scroll>
            </div>
        </a-spin>
        <div class="logo-content-style">
            <img src="../assets/images/modalLogo.png" alt="" class="title-logo-png">
        </div>
    </modal-panel>
</template>
<script>
    /*
     * 图文详情弹出页面
     *
     * infoObj:{
     *  infoTitle:"",
     *  infoArr:[{'title':'发布人','value':'费利明'},{'title':'发布时间','value':'2022-06-30 16：00'}]
     *  content:""
     * }
     *
     *
     * */
    import {Modal, Table, Row, Col, Empty, Spin} from 'ant-design-vue';
    import ModalPanel from "../../../components/common/modal/centerModalPanel.vue";
    import {swiper, swiperSlide} from "vue-awesome-swiper";
    import "swiper/dist/css/swiper.css";
    import ImgPreview from '../common/imgPreview.vue';
    import moment from 'moment';
    export default{
        props: {
            show: {
                type: Boolean,
                default: false,
            },
            modalTitle: {
                type: String,
                default: "查看详情",
            },
            commonId: {
                type: String,
                default: ""
            },
            clubObj: {
                type: Object,
                default: () => {
                }
            },
            commonQueryId: {
                type: String,
                default: ""
            },
        },
        data(){
            return {
                spinning: false,
                infoId: this.$props.commonId,
                title: this.modalTitle, //弹出框标题
                showPanel: this.show, //是否显示
                listScroll: this.StaticParams.scrollOption,
                //业务相关属性
                clubId: this.$props.clubObj && this.$props.clubObj.club_id ? this.$props.clubObj.club_id : "",
                clubName: this.$props.clubObj && this.$props.clubObj.club_name ? this.$props.clubObj.club_name : "",
                memberNum: this.$props.clubObj && this.$props.clubObj.member_number ? this.$props.clubObj.member_number : 0,
                clubDescribe: this.$props.clubObj && this.$props.clubObj.club_describe ? this.$props.clubObj.club_describe : "",
                optionLeft: {
                    step: 1, // 数值越大速度滚动越快
                    limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 2, // 0向下 1向上 2向左 3向右
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                },
                swiperOption: {
                    autoplay: true,
                    speed: 1000,
                    loop: true,
                    slidesPerView: 5,
                    spaceBetween: 10,
//                    pagination: {
//                        el: ".swiper-pagination", //分页器
//                        clickable: true,
//                    },
                },
                imgList: [],//社团图片数据
                activityList: [],//社团活动数据
                columns: [
                    {
                        title: '序号',
                        dataIndex: 'index',
                        key: 'index',
                        align: "center",
                        width: 100
                    },
                    {
                        title: '日期',
                        dataIndex: 'activityDate',
                        key: 'activityDate',
                        align: "center",
                        width: 150
                    },
                    {
                        title: '活动名称',
                        dataIndex: 'activityName',
                        key: 'activityName',
                        align: "center"
                    },
                    {
                        title: '地点',
                        dataIndex: 'activityPlace',
                        key: 'activityPlace',
                        align: "center",
                    },
                ],//表格header
                dataSource: [],//表格数据
                showDataSource: false,
            }
        },
        watch: {
            commonId: function (newVal) {
                this.infoId = newVal;
                this.getDataInfo();
            },
            modalTitle: function (newData) {
                this.title = newData;
            },
            show: function (newData) {
                this.showPanel = newData;
            },
            clubObj: function (newData) {
                this.clubId = newData.club_id;
                this.clubName = newData.club_name;
                this.memberNum = newData.member_number;
                this.clubDescribe = newData.club_describe;
                this.getDataexReport();
                this.getDataexReport2();
            }
        },
        mounted(){
//            if (this.infoId && this.infoId !== "") {
//                this.getDataInfo();
//            }
            //this.getDataexReport();
        },
        methods: {
            //获取社团风暴图片
            getDataexReport: function () {
                let param = {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "query_deyu_shetuan2",
                        "query_param": [
                            this.clubId + ""
                        ]
                    },
                    "query_cache": 0,
                    "query_count": [],
                    "query_format": "json",
                    "query_group": []
                }
                this.imgList = [];
                this.DataexReportInterface.callInterface([{
                    params: param,
                    method: "post",
                }], (result) => {
                    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, len = dataList.length; i < len; i++) {
                                    let imgJson = dataList[i].attachment_json;
                                    if (imgJson !== "") {
                                        let imgArr = JSON.parse(imgJson);
                                        this.imgList.push(imgArr);
                                    }
                                }
                            }
                        }
                    }
                })
            },
            //获取社团风暴活动
            getDataexReport2: function () {
                let param = {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "query_deyu_shetuan3",
                        "query_param": [
                            this.clubId + ""
                        ]
                    },
                    "query_cache": 0,
                    "query_count": [],
                    "query_format": "json",
                    "query_group": []
                }
                this.spinning = true;
                this.showDataSource = false;
                this.dataSource = [];
                this.DataexReportInterface.callInterface([{
                    params: param,
                    method: "post",
                }], (result) => {
                    this.showDataSource = true;
                    this.spinning = false;
                    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 < dataList.length; i++) {
                                    let dataInfo = dataList[i];
                                    let obj = {
                                        index: i + 1,
                                        activityDate: moment(dataInfo.activity_date.replace('T', ' ').replace('Z', '')).format("YYYY-MM-DD"),
                                        activityName: dataInfo.activity_name,
                                        activityPlace: dataInfo.activity_place,
                                    }
                                    this.dataSource.push(obj);
                                }
                            }
                        }
                    }
                })
            },
            modalCallback: function (ary) {
                if (ary[0] === "ok") {
                    //this.$emit("selectComplete", this.selectedDept);
                } else {
                    this.infoTitle = "";
                    this.$emit("cancel", null);
                }
            },
        },
        components: {
            AModal: Modal,
            ModalPanel,
            swiper,
            swiperSlide,
            ImgPreview,
            ATable: Table,
            ARow: Row,
            ACol: Col,
            AEmpty: Empty,
            ASpin: Spin
        }
    }
</script>
<style scoped lang="scss">
    @import "../assets/scss/style";

    /deep/ .dialog-style {
        .ant-modal-content {
            padding-left: 100px;
            padding-right: 10px;
            background: #01123E;
            .ant-modal-header {
                height: 50px;
                display: flex;
                align-items: center;
                background: #01123E;
                border-bottom: 1px solid #1067B0;
                margin-left: 100px;
                .ant-modal-title {
                    color: #fff !important;
                }
            }
            .ant-modal-body {
                .common-info-style {
                    width: 100%;
                    height: 630px;
                    padding-right: 50px;
                    display: flex;
                    flex-direction: column;
                    .title-content-style {
                        width: 100%;
                        min-height: 30px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        h1 {
                            color: #fff !important;
                        }
                    }
                    .content-style {
                        width: 100%;
                        height: 600px;
                        margin-top: 10px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        .club-info-style {
                            width: calc(100% - 40px);
                            min-height: 180px;
                            display: flex;
                            flex-direction: column;
                            background-color: #4d5977;
                            border-radius: 5px;
                            color: white;
                            padding: 20px 10px 20px 30px;
                            position: relative;
                            justify-content: center;
                            margin: auto;
                            .title-box-style {
                                width: 30px;
                                height: 100px;
                                padding: 6px;
                                border-radius: 15px;
                                border: 1px solid $color-default-bright;
                                position: absolute;
                                left: -20px;
                                background-color: #011343;
                                color: $color-default-bright;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                            .info-row-style {
                                width: 100%;
                                display: flex;
                                .left-style {
                                    width: 100px;
                                    text-align: right;
                                }
                                .right-style {
                                    width: calc(100% - 100px);
                                    padding-left: 10px;
                                }
                            }
                        }
                        .img-content-style {
                            width: calc(100% - 40px);
                            min-height: 130px;
                            display: flex;
                            flex-direction: column;
                            background-color: #4d5977;
                            border-radius: 5px;
                            color: white;
                            padding: 20px 10px 20px 30px;
                            position: relative;
                            justify-content: center;
                            margin: 10px auto;
                            .title-box-style {
                                width: 30px;
                                height: 100px;
                                padding: 6px;
                                border-radius: 15px;
                                border: 1px solid $color-default-bright;
                                position: absolute;
                                right: -15px;
                                background-color: #011343;
                                color: $color-default-bright;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                            .banner {
                                width: 100%;
                                height: 90px;
                                padding-right: 20px;
                                .club-box-style {
                                    width: 100px !important;
                                    height: 100%;
                                    display: flex;
                                    flex-direction: column;
                                    background-color: #2c4876;
                                    border-radius: 5px;
                                    position: relative;
                                }
                            }
                        }
                        .info-content-style {
                            width: calc(100% - 40px);
                            min-height: 250px;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            background-color: #4d5977;
                            border-radius: 5px;
                            color: white;
                            padding: 20px 10px 20px 30px;
                            position: relative;
                            margin: auto;
                            .title-box-style {
                                width: 30px;
                                height: 100px;
                                padding: 6px;
                                border-radius: 15px;
                                border: 1px solid $color-default-bright;
                                position: absolute;
                                left: -20px;
                                background-color: #011343;
                                color: $color-default-bright;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                top: 30%;
                            }
                            .table-box-style {
                                width: 100%;
                                height: 200px;
                                display: flex;
                                flex-direction: column;
                                .header-row {
                                    .header-col {
                                        height: 35px;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        background-color: #2b7cad;
                                        color: white;
                                        border: 1px solid $color-default-bright;
                                    }
                                }
                                .activity-list-scroll-style {
                                    width: 100%;
                                    height: 165px;
                                    display: flex;
                                    flex-direction: column;
                                    .body-row {
                                        .body-col {
                                            height: 30px;
                                            display: flex;
                                            justify-content: center;
                                            align-items: center;
                                            background-color: #011344;
                                            color: $color-default-bright;
                                            border: 1px solid $color-default-bright;
                                        }
                                    }
                                }
                                .no-data-div {
                                    width: 100%;
                                    height: 165px;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    background-color: #011344;
                                }
                            }
                            .ant-table-wrapper {
                                .ant-table-body {
                                    table {
                                        .ant-table-thead {
                                            tr th {
                                                background-color: #2b7cad;
                                                color: white;
                                            }
                                        }
                                        .ant-table-tbody {
                                            tr td {
                                                background-color: #011344;
                                                color: $color-default-bright;
                                                padding: 10px 16px !important;
                                            }
                                        }
                                    }
                                }
                                .ant-table-placeholder {
                                    background-color: #011344;
                                    .ant-empty .ant-empty-description {
                                        color: white;
                                    }
                                }
                            }
                        }
                    }
                }

                .logo-content-style {
                    .title-logo-png {
                        vertical-align: middle;
                        border-style: none;
                        width: 240px;
                        height: 150px;
                        position: absolute;
                        top: -10px;
                        left: -10px;
                    }
                }
            }
        }
    }
</style>