<template>
    <el-container style="display: flex;flex-direction: row;">
        <el-aside width="22vw" style=" height: calc(80vh - 60px); display: flex;flex-direction: row;justify-content: flex-end;margin-top: 5vh;">
            <template>
                <el-card class="box-card" style="position: fixed;width: 10vw;height: 50vh;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
                    <div slot="header" class="clearfix">
                        <span><i class="el-icon-menu"></i> 热门标签</span>
                    </div>
                    <div class="bottom clearfix">
                        <div v-for="o in 4" :key="o" class="text item">
                            <el-tag style="margin-top: 10px" type="success">{{ '标签 ' + o }}</el-tag>
                        </div>
                        <div style="margin-top: 10px;width: 100%;height: 0;border-top: 1px solid #eee;"></div>
                        <div>
                            <i class="el-icon-setting"></i>
                            <el-button type="text" class="button">管理标签</el-button>
                        </div>
                    </div>
                </el-card>
            </template>
        </el-aside>
        <el-main  style="display: flex;flex-direction: row;flex-wrap: nowrap;">
            <template>
                <div>
                    <el-tabs  v-model="activeName" type="border-card" style="width: 45vw;"  @tab-click="tabChange">
                        <el-tab-pane label="最热" name="first" style="display: flex;justify-content: flex-start">
                                        <ul
                                            class="list"
                                            v-infinite-scroll="load"
                                            infinite-scroll-disabled="disabled">
                                            <ol v-for="i in count" :key="i" class="list-item" style="display: flex;flex-direction: row;margin-left: -80px">
                                                <ProjectList></ProjectList>
                                            </ol>
                                        </ul>
                                        <p v-if="loading">加载中...</p>
                                        <p v-if="noMore">没有更多了</p>
                        </el-tab-pane>
                        <el-tab-pane label="最新" name="second">
                            <div class="lsm-container">
                                <el-scrollbar class="scrollbar-wrapper"  style="position: relative;">
                                    <div class="infinite-list-wrapper">
                                        <ul
                                            class="list"
                                            v-infinite-scroll="load"
                                            infinite-scroll-disabled="disabled">
                                            <ol v-for="i in count" :key="i" class="list-item" style="display: flex;flex-direction: row;margin-left: -80px">
                                                <ProjectList></ProjectList>
                                            </ol>
                                        </ul>
                                        <p v-if="loading">加载中...</p>
                                        <p v-if="noMore">没有更多了</p>
                                    </div>
                                </el-scrollbar>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;">
                    <el-card class="box-card" style="width: 13vw">
                        <el-button type="info" plain @click="openLogin()">登 录</el-button>
                    </el-card>

                    <el-card class="box-card" style="margin-top: 20px;width: 13vw">
                        <div slot="header" class="clearfix">
                            <span>卡片名称</span>
                            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                        </div>
                        <div v-for="o in 4" :key="o" class="text item">
                            {{ '列表内容 ' + o }}
                        </div>
                    </el-card>
                </div>
            </template>
            <!--登录弹框-->
            <el-dialog
                    title="登录"
                    :visible.sync="loginDialogVisible"
                    width="25vw">
                <div>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="form">
                        <el-form-item prop="username">
                            <!-- v-model：双向绑定，placeholder：不输入内容之前提示 -->
                            <el-input
                                    prefix-icon="el-icon-user"
                                    v-model="ruleForm.username"
                                    placeholder="用户名"
                                    auto-complete="off"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <!-- type：密码显示* -->
                            <el-input
                                    prefix-icon="el-icon-unlock"
                                    :type="passwordVisible"
                                    v-model="ruleForm.password"
                                    placeholder="密码"
                                    auto-complete="new-password"
                            >
                                <i slot="suffix" :class="icon" @click="showPass"></i>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="code" style="display: flex;flex-wrap: nowrap;flex-direction: row;">
                            <el-input
                                    prefix-icon="el-icon-mobile-phone"
                                    type="text"
                                    placeholder="点击图片更换验证码"
                                    v-model="ruleForm.code"
                                    class="vertify_code"
                                    auto-complete="false"
                                    style="width: 15.8vw"
                            ></el-input>
                            <!-- <span class="code">验证码</span> -->
                            <img :src="imageUrl" @click="resetImg" class="vertify_img"/>
                        </el-form-item>
                        <div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;align-content: center">
                            <el-form-item prop="remember">
                                <el-checkbox v-model="ruleForm.remember" class="remember">记住我</el-checkbox>
                            </el-form-item>

                            <el-link type="success" @click="registerFun()">没有账户？去注册!</el-link>
                        </div>

                        <div class="login-btn">
                            <el-button type="primary" @click="submitForm('ruleForm')"
                            >登录
                            </el-button
                            >
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </div>
                    </el-form>
                </div>
            </el-dialog>

            <!--注册弹框-->
            <el-dialog
                    title="注册"
                    :visible.sync="registerDialogVisible"
                    width="25vw">
                <div>
                    <el-form :model="resisterRuleForm" :rules="rules" ref="resisterRuleForm" class="form">
                        <el-form-item prop="username">
                            <!-- v-model：双向绑定，placeholder：不输入内容之前提示 -->
                            <el-input
                                prefix-icon="el-icon-user"
                                v-model="resisterRuleForm.username"
                                placeholder="用户名"
                                auto-complete="off"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <!-- type：密码显示* -->
                            <el-input
                                prefix-icon="el-icon-unlock"
                                :type="passwordVisible"
                                v-model="resisterRuleForm.password"
                                placeholder="密码"
                                auto-complete="new-password"
                            >
                                <i slot="suffix" :class="icon" @click="showPass"></i>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="code" style="display: flex;flex-wrap: nowrap;flex-direction: row;">
                            <el-input
                                prefix-icon="el-icon-mobile-phone"
                                type="text"
                                placeholder="点击图片更换验证码"
                                v-model="resisterRuleForm.code"
                                class="vertify_code"
                                auto-complete="false"
                                style="width: 15.8vw"
                            ></el-input>
                            <!-- <span class="code">验证码</span> -->
                            <img :src="imageUrl" @click="resetImg" class="vertify_img"/>
                        </el-form-item>
                        <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;align-content: center">
<!--                            <el-form-item prop="remember">-->
<!--                                <el-checkbox v-model="ruleForm.remember" class="remember">记住我</el-checkbox>-->
<!--                            </el-form-item>-->

                            <el-link type="success" @click="loginFun()">已有账户？去登录!</el-link>
                        </div>

                        <div class="login-btn" style="margin-top: 10px;">
                            <el-button type="primary" @click="resisterForm('resisterRuleForm')"
                            >注册
                            </el-button
                            >
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </div>
                    </el-form>
                </div>
            </el-dialog>
        </el-main>
    </el-container>
</template>

<script>
import axios from 'axios'
import Vue from "vue";
import ProjectList from "@/components/ProjectList.vue";
export default {
    name: "HomeComponent",
    components: {ProjectList},
    data() {
        return {
            activeName:'first',
            count: 10,
            loading: false,
            loginDialogVisible: false,
            registerDialogVisible: false,
            imageUrl: "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getDate(),
            checked: false,
            passwordVisible: "password",
            icon: "el-icon-view",
            ruleForm: {
                username: null,
                password: null,
                code: null,
                remember:null
            },
            resisterRuleForm: {
                username: null,
                password: null,
                code: null,
            },
            rules: {
                username: [
                    // required：规则，trigger：失去焦点触发
                    {required: true, message: "请输入用户名", trigger: "blur"},
                ],
                password: [{required: true, message: "请输入密码", trigger: "blur"}],
                code: [{required: true, message: "请输入验证码", trigger: "blur"}],
            },

        };
    },
    mounted() {
        this.account(); //获取cookie的方法
    },
    computed: {
        noMore () {
            return this.count >= 20
        },
        disabled () {
            return this.loading || this.noMore
        }
    },
    methods: {
        openLogin(){
            this.loginDialogVisible=true;
        },
        closeLogin(){
            this.loginDialogVisible=false;
        },
        openResister(){
            this.registerDialogVisible=true;
        },
        closeRegister(){
            this.registerDialogVisible=false;
        },
        // ******登录*****
        account() {
            // console.log(this.getCookie("username"));
            this.ruleForm.username = this.getCookie("username");
            this.ruleForm.password = this.getCookie("password");
        },
        setCookie(c_name, c_pwd, exdate) {
            //账号，密码 ，过期的天数
            exdate = new Date();
            exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate); //保存的天数
            document.cookie =
                "username=" + c_name + ";path=/;expires=" + exdate.toLocaleString();
            document.cookie =
                "password=" + c_pwd + ";path=/;expires=" + exdate.toLocaleString();
        },
        getCookie(name) {
            var arr = document.cookie.split(";");
            for (var i = 0; i < arr.length; i++) {
                var arr2 = arr[i].split("=");
                if (arr2[0].trim() == name) {
                    return arr2[1];
                }
            }
        },
        clearCookie() {
            this.setCookie("", "",-1); //清除cookie
        },

        // 方法
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //取参数
                    // let params = new URLSearchParams();
                    // params.append("username", this.ruleForm.username);
                    // params.append("password", this.ruleForm.password);
                    // params.append("code", this.ruleForm.code);
                    // params.append("remember",this.ruleForm.remember)
                    if (this.checked == true) {
                        //存入cookie
                        this.setCookie(this.ruleForm.username, this.ruleForm.password,7); //保存7天
                    } else {
                        this.clearCookie();
                    }

                    //调用方法提交
                    axios({
                        method: 'post',
                        // 请求的地址
                        url: 'http://localhost:8082/helloGithub_war_exploded/userLogin',
                        // URL 中的查询参数
                        params: {
                            username: this.ruleForm.username,
                            password: this.ruleForm.password,
                            code: this.ruleForm.code,
                            remember: this.ruleForm.remember,

                        }
                    }).then(function (res){
                        // Vue.prototype.$message({
                        //     message: '成功！',
                        //     type: 'success'
                        // });
                        if(res.data.code===200){
                            Vue.prototype.$notify({
                                title: '成功',
                                message: ('i', { style: 'color: teal'}, res.data.msg),
                                type: 'success',
                                offset: 50
                            });
                        }else{
                            Vue.prototype.$notify.error({
                                title: '错误',
                                message: res.data.msg,
                                offset: 50
                            });
                        }
                        console.log(res);
                    });
                } else {
                    this.closeLogin();
                    return false;
                }
                this.closeLogin();

            });
        },
        //点击图片更换验证码
        resetImg() {
            this.imageUrl = "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getTime();
        },
        //重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        showPass() {
            if (this.passwordVisible === "text") {
                this.passwordVisible = "password";
                //更换图标
                this.icon = "el-icon-view";
            } else {
                this.passwordVisible = "text";
                this.icon = "el-icon-lock";
            }
        },
        loginFun(){
            this.loginDialogVisible = true;
            this.registerDialogVisible = false;
        },
        // ******登录方法结束*****

        // ----------注册------------
        registerFun() {
            this.loginDialogVisible = false;
            this.registerDialogVisible = true;
        },
        resisterForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //取参数
                    // let params = new URLSearchParams();
                    // params.append("username", this.ruleForm.username);
                    // params.append("password", this.ruleForm.password);
                    // params.append("code", this.ruleForm.code);
                    // params.append("remember",this.ruleForm.remember)
                    if (this.checked == true) {
                        //存入cookie
                        this.setCookie(this.ruleForm.username, this.ruleForm.password,7); //保存7天
                    } else {
                        this.clearCookie();
                    }

                    //调用方法提交
                    axios({
                        method: 'post',
                        // 请求的地址
                        url: 'http://localhost:8082/helloGithub_war_exploded/userRegister',
                        // URL 中的查询参数
                        params: {
                            username: this.resisterRuleForm.username,
                            password: this.resisterRuleForm.password,
                            code: this.resisterRuleForm.code,

                        }
                    }).then(function (res){
                        // Vue.prototype.$message({
                        //     message: '成功！',
                        //     type: 'success'
                        // });
                        if(res.data.code===200){
                            Vue.prototype.$notify({
                                title: '成功',
                                message: ('i', { style: 'color: teal'}, res.data.msg),
                                type: 'success',
                                offset: 50
                            });
                        }else{
                            Vue.prototype.$notify.error({
                                title: '错误',
                                message: res.data.msg,
                                offset: 50
                            });
                        }
                        console.log(res);
                    });
                } else {
                    this.closeRegister();
                    return false;
                }
                this.closeRegister();

            });
        },
        //----------注册结束----------
        load () {
            this.loading = true
            setTimeout(() => {
                this.count += 2
                this.loading = false
            }, 2000)
        },
        tabChange(tab, event){
            console.log(tab, event);
            if (tab.name == "first") {
                axios({
                    method: 'get',
                    // 请求的地址
                    url: 'http://localhost:8082/helloGithub_war_exploded/selectLastByCate',
                    // URL 中的查询参数
                    params: {
                        num: 0,
                    }
                }).then(function (res){
                    console.log(res);
                });
        } else if (tab.name == "second") {
                //网络请求2
            }
        }


    }
}
</script>

<style>
.el-scrollbar__wrap {
    overflow-x: hidden;
}
</style>