<template>
    <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" class="test" style="font-size:23px;font-weight: 600;">
                        <div>OneFile</div>
                    </div>
                </el-page-header>
            </div>
            <div class="PageContent" style="display: flex;flex-direction: column;flex-wrap: nowrap">
                <el-card style="border: none">
                    <el-image :src="require('@/assets/images/oneFile.png')"></el-image>
                    <span style="text-align: left;display: flex;flex-direction: row;justify-content: flex-start;margin-top: 15px">
                        OneFile 汇集了一个文件、运行简单、一看就懂的开源项目。 包括：游戏、编译器、服务器、工具、实用库等有趣的开源项目，而且复制代码就能跑，点击即可在线查看源码和试玩。
                    </span>
                    <div style="margin-top: 20px">
                        <template>
                            <el-table
                                @row-click="toDetailPage"
                                border
                                :data="tableData"
                                style="cursor: pointer;width: 100%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border-radius: 10px;border: none">
                                <el-table-column
                                    prop="name"
                                    label="名称"
                                    width="130">
                                </el-table-column>
                                <el-table-column
                                    prop="language"
                                    label="语言"
                                    width="100">
                                </el-table-column>
                                <el-table-column
                                    prop="description"
                                    label="描述">
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>
                    <el-card style="border: none;margin-top: 20px">
                        <div style="display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: flex-start;text-align: left">
                            <b>「OneFile」:</b><span>一个开源项目，在这里你可以找到有趣运行简单的程序。同时它也是一个编程挑战，你也可以提交一个文件接受挑战。快点加入OneFile 编程挑战，一个文件而已就写点有趣的代码吧！</span>
                        </div>
                        <div style="display: flex;flex-direction: row;justify-content: flex-end">
                            <el-button plain  size="small" @click="openSubmit">提交</el-button>
                        </div>
                    </el-card>
                </el-card>

                <el-dialog title="提交" :visible.sync="dialogVisible" width="46%"
                           append-to-body
                           :close-on-click-modal="false"
                >
                    <el-form ref="ruleForm" class="login_container" :model="form" :rules="rules" status-icon  label-width="60px">
                        <el-form-item label="名称" prop="oneFileName">
                            <el-input v-model="form.oneFileName" placeholder='取个名字吧'></el-input>
                        </el-form-item>
                        <el-form-item label="地址" prop="url">
                            <el-input v-model="form.url" placeholder='地址url'></el-input>
                        </el-form-item>
                        <el-form-item label="描述" prop="description" >
                            <el-input v-model="form.description"  placeholder='一句话描述一下' clearable></el-input>
                        </el-form-item>
                        <el-form-item label="内容" prop="Content" >
                            <el-input v-model="form.Content"
                                      type="textarea"
                                      rows="10"
                                      placeholder='代码内容'
                                      clearable></el-input>
                        </el-form-item>
                        <el-form-item label="语言" prop="language" >
                            <el-input v-model="form.language"  placeholder='语言种类' clearable></el-input>
                        </el-form-item>

                        <el-form-item>
                            <div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: flex-end">
                                <el-button @click.native.stop.once="submit('ruleForm')" type="primary" style=";margin-top:10px">提交</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </div>
        </div>
        <RightTools></RightTools>
    </div>
</template>

<script>
import RightTools from "@/components/Home/RightTools.vue";
import axios from "axios";
import Vue from "vue";

export default {
    name: "OneFile",
    components: {RightTools},
    data(){
        return{
            tableData: [],
            dialogVisible:false,
            form:{
                oneFileName:'',
                language:'',
                description:'',
                url:'',
                Content:'',
            },
            rules: {
                oneFileName: [
                    // required：规则，o：失去焦点触发
                    {required: true, message: "请输入名称", trigger: "blur"},
                ],
                language: [{required: true, message: "请输入语言", trigger: "blur"}],
                description: [{required: true, message: "请输入描述", trigger: "blur"}],
                Content: [{required: true, message: "请输入内容", trigger: "blur"}],
            },
        }
    },
    methods:{
        openSubmit(){
          this.dialogVisible=true;
        },
        submit(formName){
            this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios({
                            method: 'post',
                            // 请求的地址
                            url: 'http://localhost:8082/helloGithub_war_exploded/insertFileByAdmin',
                            // URL 中的查询参数
                            params: this.form,
                        }).then(function (res) {
                            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
                                });
                            }

                        }).catch((error)=>{
                            Vue.prototype.$notify.error({
                                title: '错误',
                                message: error,
                                offset: 50
                            });
                        })
                    }else{
                        return false;
                    }
            })

        },
        goBack() {
            window.history.go(-1);
        },
        toDetailPage(row){
            this.$router.push({
                path:'/OneFileDetail',
                query: {
                    id: row.id,
                    refresh: true
                }})
        },
        getOneFile(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/selectFile',
                // URL 中的查询参数
                params: {
                }
            }).then(function (res) {
                that.tableData=res.data;
            }).catch((error)=>{
                Vue.prototype.$notify.error({
                    title: '错误',
                    message: error,
                    offset: 50
                });
            })
        }
    },
    mounted() {
        this.getOneFile();
    },
}
</script>

<style scoped>
::v-deep .el-page-header__left{
    left:10px;
}
::v-deep .el-page-header__content{
    flex:1;
}
::v-deep .el-table {
    tr th,
    tr td {
        border-right: none;
    }
}
</style>