<template>
    <div class="gd-container">
        <div class="top">
            <div
                    class="tab-item"
                    :class="{ 'select-tab': index == selectTab }"
                    v-for="(item, index) in tabList"
                    :key="index"
                    @click="changeTab(item, index)"
                >
                    {{ item.tabName }}
                </div>
        </div>
        <div class="gd-main">
            <newsTemplate v-if="selectTab == 0" @openCultural="openCultural" :typeCode="typeCode"></newsTemplate>
            <gdPerson v-if="selectTab == 1"></gdPerson>
        </div>
        <commonModal v-model="detaillModal" width="1000" :title="currCultural.title">
            <div class="detail-container">
                <!-- 富文本 -->
                <div class="richText" v-html="currCultural.content" v-if="currCultural.contentType == '0'"></div>
                <!-- 图片列表 -->
                <!-- <carousel-3d
                    :autoplay="true"
                    :autoplayTimeout="3000"
                    :perspective="35"
                    :display="3"
                    :animationSpeed="1000"
                    :width="300"
                    :height="270"
                    controlsVisible
                    :controlsHeight="60"
                    v-if="currCultural.contentType == '1'"
                >
                    <slide v-for="(item, i) in currCultural.imageList" :index="i" :key="i">
                        <template slot-scope="obj">
                            <img style="width: 100%; height: 280px" :src="item" />
                        </template>
                    </slide>
                </carousel-3d> -->
                <div style="width: 100%; display: flex; flex-direction: column;align-items: center;">
                    <img :src="item" v-for="(item, index) in currCultural.imageList" :key="index" style="width: 100%;margin-bottom: 10px;"/>
                </div>
                <!-- 视频 -->
                <LivePlayer
                    v-if="detaillModal && currCultural.contentType == '2'"
                    :videoUrl="currCultural.mediaUrl"
                    :live="false"
                    fluent
                    autoplay
                    stretch
                    :hide-big-play-button="true"
                    :muted="false"
                    alt="正在加载中..."
                ></LivePlayer>
            </div>
        </commonModal>
    </div>
</template>

<script>
import gdPerson from './gdPerson.vue'
import newsTemplate from './news-template.vue'
import commonModal from '@/views/common-components/common-modal.vue'


export default {
    name: "",
    components: {gdPerson, newsTemplate, commonModal},
    data() {
        return {
            tabList: [
                {
                    tabName: "规章制度"
                },
                {
                    tabName: "公服人员"
                }
            ],
            selectTab: 0,
            typeCode: "RULES",
            detaillModal: false,
            currCultural: {}
        };
    },
    watch: {},
    created() {},
    computed: {},
    mounted () {
    },
    beforeDestroy() {},
    computed: {},
    watch: {},
    methods: {
        changeTab (item, index) {
            if (this.selectTab == index) return
            this.selectTab = index
        },
        openCultural (data) {
            this.detaillModal = true
            this.currCultural = data
        }
    }
};
</script>

<style lang="less" scoped>
.gd-container {
    width: 100%;
    // height: 100%;

    .top {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;

        .tab-item {
                width: 200px;
                height: 50px;
                background: url("../../../assets/pbImage/tab-bg.png") no-repeat;
                background-size: 100% 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-family: PingFang SC;
                font-size: 20px;
                font-weight: 400;
                color: #ffffff;
                margin-bottom: 20px;
                margin-right: 10px;
            }

            .select-tab {
                background: url("../../../assets/pbImage/tab-select.png") no-repeat;
                background-size: 100% 100%;
                color: #a59e68;
            }
    }

    .gd-main {
        width: 100%;
    }

}
</style>
