
<template>
<!--<div>-->
<!--    月刊-->
<!--</div>-->
    <div style="display: flex;flex-direction:row;flex-wrap: nowrap">
        <div style="display: flex;flex-direction:column;flex-wrap: nowrap">
            <div class="PageHeader">
                <br/>
                <el-page-header  @back="goBack" style="justify-content:left;display: flex;">
                    <div slot="title" style="font-size:23px;font-weight: 600;"></div>
                    <div slot="content" style="font-size:23px;font-weight: 600;">
                        HelloGitHub 月刊
                    </div>
                </el-page-header>
            </div>
            <div class="PageContent">
                <div style="width:50vw;margin-left:20px">
                    <el-carousel :interval="4000" type="card" height="250px">
                        <el-carousel-item v-for="item in 6" :key="item">
                            <h3 class="medium">{{ item }}</h3>
                        </el-carousel-item>
                    </el-carousel>
                </div>

                <div style="margin-top:30px;width:50vw;margin-left:20px">
                    <el-row :gutter="24">
                        <el-col :span="24">
                            <el-card shadow="always" style="font-size: 18px;
                        text-align:left;background-color: #e2f1ec;
                        border-color: rgba(255,243,232,0.89);border-radius:10px">
                                <span style="font-size:20px;font-weight:550">「HelloGitHub 月刊」</span>
                                分享 GitHub 上有趣、入门级的开源项目，每月 1 号发布最新一期。内容包
                                括开发利器、开源书籍、教程、企业级项目等， 让你发现编程的乐趣、爱上开源！
                            </el-card>
                        </el-col>
                    </el-row>
                </div>

                <div style="margin-top:30px;width:50vw;margin-left:20px">
                    <el-row :gutter="24">
                        <el-col :span="8">
                            <el-card shadow="always" class="card_style">
                                <span style="font-size:25px;font-weight:540;color: #676767">已发布</span>
                                <br/><br/>
                                <span style="font-size:55px;font-weight:650;color: #3d8bff">{{Monely}}</span>
                                <br/><br/>
                                <span style="font-size:25px;font-weight:540;color: #676767">期</span>
                                <br/>
                                <br/>
                                <div style="border-top:1.5px solid #ababab;border-bottom:1.5px solid #ababab;">
                                    <br/>
                                    <span style="font-size:18px;font-weight:540;color: #676767">选择期数: &nbsp;</span>
                                    <el-select clearable v-model="selectMonly" filterable placeholder="期数" style="width:80px;">
                                        <el-option
                                            v-for="item of Monely"
                                            :key="item"
                                            :label="item"
                                            :value="item"
                                        >
                                        </el-option>
                                    </el-select>
                                    <br/><br/>
                                </div>
                                <br/>
                                <el-button type="info" @click="ToDetail()">阅读该期</el-button>
                                <br/><br/>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card shadow="always" class="card_style">
                                <span style="font-size:25px;font-weight:540;color: #676767">共包含</span>
                                <br/><br/>
                                <span style="font-size:55px;font-weight:650;color: #3d8bff">{{labelItem.length}}</span>
                                <br/><br/>
                                <span style="font-size:25px;font-weight:540;color: #676767">类</span>
                                <br/>
                                <br/>
                                <div style="border-top:1.5px solid #ababab;border-bottom:1.5px solid #ababab;">
                                    <br/>
                                    <span style="font-size:18px;font-weight:540;color: #676767">选择分类: &nbsp;</span>
                                    <el-select clearable v-model="selectlabelItem" placeholder="分类" style="width:100px;">
                                        <el-option
                                            v-for="item in labelItem"
                                            :key="item"
                                            :label="item"
                                            :value="item"
                                        >
                                        </el-option>
                                    </el-select>
                                    <br/><br/>
                                </div>
                                <br/>
                                <el-button type="info" @click="changePage()">查看分类</el-button>
                                <br/><br/>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card shadow="always" class="card_style" >
                                <span style="font-size:25px;font-weight:540;color: #676767">项目数</span>
                                <br/><br/>
                                <span style="font-size:55px;font-weight:650;color: #3d8bff">{{ProjectNum}}</span>
                                <br/><br/>
                                <span style="font-size:25px;font-weight:540;color: #676767">个</span>
                                <br/>
                                <br/>
                                <div style="border-top:1.5px solid #ababab;border-bottom:1.5px solid #ababab;">
                                    <br/>
                                    <span style="font-size:18px;font-weight:540;color: #676767">欢迎推荐和自荐项目！</span>
                                    <br/><br/>
                                </div>
                                <el-button type="info" @click="backtoHome()" style="margin-top:37px">查看项目</el-button>
                                <br/><br/>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
                <br/>
                <br/>
            </div>
        </div>
        <RightTools></RightTools>



    </div>

</template>

<script>
import axios from 'axios'
import RightTools from "@/components/Home/RightTools.vue";
import Vue from "vue";
export default {
    name: "MonthlyComponent",
    components: {RightTools},
    data(){
        return{
            // 月刊标号海报：
            currentImg:'',
            // 项目总数
            ProjectNum:0,
            //期刊总数：
            Monely:0,
            //保存用户选择期刊期数：
            selectMonly:null,
            // 保存用户选择的分类：
            selectlabelItem:null,
            //标签：
            labelItem:[],
        };
    },
    // 初始化渲染页面
    mounted(){
        // 绘制最新月刊
        // this.addTextEvent();
        // // // 填充画布：
        // this.$nextTick(() => {
        //     this.drawPage();
        // });
        this.getMonely();
        this.getProjectNum();
        this.getLabel();
    },
    methods: {
        backtoHome(){
            this.$router.push(
                {
                    path:'/home'
                }
            )
        },
        // drawPage(){
        //     var that = this;
        //     var fac = document.getElementsByClassName("3");
        //     fac.style.backgroundImage = that.currentImg;
        // },
        // test(index){
        //   // var that = this;
        //   // console.log(index);
        // },
        goBack() {
            window.history.go(-1);
        },
        // 获取项目总数
        getProjectNum(){
            var that = this;
            axios({
                method: 'post',
                url: 'http://localhost:8082/helloGithub_war_exploded/countNum',
                params: {
                }
            }).then((res)=>{
                that.ProjectNum = parseInt(res.data);
                // console.log(res.data);
            }).catch((error)=>{
                Vue.prototype.$notify.error({
                    title: '错误',
                    message: error,
                    offset: 50
                });
            })
        },
        // 获取月刊总数
        getMonely(){
            var that = this;
            axios({
                method: 'post',
                url: 'http://localhost:8082/helloGithub_war_exploded/latest',
                params: {
                }
            }).then(function (res){
                that.Monely = parseInt(res.data);
                // console.log(res.data);
            }).catch((error)=>{
                Vue.prototype.$notify.error({
                    title: '错误',
                    message: error,
                    offset: 50
                });
            })
        },
        //获取所有标签：
        getLabel(){
            var that = this;
            axios({
                method: 'post',
                url: 'http://localhost:8082/helloGithub_war_exploded/retLabel',
                params: {
                }
            }).then(function (res){
                that.labelItem = [];
                for(let i=0;i<res.data.length;i++){
                    let tmp = res.data[i]['categoryName'];
                    that.labelItem.push(tmp);
                }
            }).catch((error)=>{
                Vue.prototype.$notify.error({
                    title: '错误',
                    message: error,
                    offset: 50
                });
            })
        },
        // 月刊详情页面跳转
        ToDetail(){
            if(this.selectMonly > 0 && this.selectMonly <= this.Monely){
                let pathInfo = this.$router.resolve({
                    path: '/MonthlyDetail',
                    query:{
                        MonethlyId:this.selectMonly
                    }
                })
                window.open(pathInfo.href, '_self');
            }else{
                this.$message({
                    message: '请输入正确的月刊号',
                    type: 'warning',
                    offset:100,
                    duration:700,
                });
            }
        },
        // 月刊分类页跳转
        changePage(){
            if(this.selectlabelItem){
                let pathInfo = this.$router.resolve({
                    path: '/MonthlyByTags',
                    query:{
                        Protype:this.selectlabelItem
                    }
                })
                window.open(pathInfo.href, '_self');
            }else{
                this.$message({
                    message: '请选择分类类型',
                    type: 'warning',
                    offset:100,
                    duration:700,
                });
            }
        },
        openPublishProjects(){
            if(this.$cookie.get('username')){
                this.openPublishProject=true;
            }else{
                Vue.prototype.$notify.error({
                    title: '错误',
                    message: "请先登录!",
                    offset: 50
                });
            }
        },
        // backtoHome(){
        //     let pathInfo = this.$router.resolve({
        //         path: '/Home',
        //         query:{
        //         }
        //     })
        //     window.open(pathInfo.href, '_self');
        // },
        // addTextEvent() {
        //     var _this = this
        //     let canvas = document.createElement("canvas");
        //     canvas.width = 600;
        //     canvas.height = 400;
        //     let myImage = new Image();
        //     myImage.src = "../../assets/images/最新月刊.png";  // 需要添加文字的图片
        //     myImage.crossOrigin = "Anonymous";
        //     let context = canvas.getContext("2d");
        //     myImage.onload = function () {
        //         context.drawImage(myImage, 0, 0, canvas.width, canvas.height);
        //         context.font = "20px Courier New";
        //         context.fillStyle = 'red'
        //         // context.textAlign = 'end' //文字右对齐
        //         context.fillText("我是写入的文字", 250, 350);  // 文字的内容和位置
        //         let base64 = canvas.toDataURL("image/png"); // "image/png" 这里注意一下
        //         console.log(_this.currentImg);
        //         _this.currentImg = base64
        //     }
        // }
    }
}
</script>
<style scoped lang="scss">
::v-deep .el-page-header__left{
    left:-250px;
}
::v-deep .el-icon-back{
    font-size:20px;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item{
    //width:480px;
}

.el-carousel__item:nth-child(3n) {
    background-size: cover;
    width:500px;
    background-image: url("../../assets/images/Post2.png");
}

.el-carousel__item:nth-child(3n+1) {
    background-size: cover;
    width:450px;
    background-image: url("../../assets/svg/WebsiteBanner.svg");
}

.el-carousel__item:nth-child(3n+2) {
    background-size: cover;
    width:450px;
    background-image: url("../../assets/images/最新月刊.png");
}

.card_style{
    height:390px;
    font-size: 18px;
    background-color: #ffffff;
    border-color: rgba(209, 225, 189, 0.89);
    text-align: center;
    border-radius:10px;
}

::v-deep .el-scrollbar{
    max-height:150px;
    overflow: scroll;
}

::v-deep .el-page-header__left{
    left:10px;
}
::v-deep .el-page-header__content{
    flex:1;
}

</style>