<template>
    <div class="hello">
        <div class="logo">
            <img src="../assets/img/logo.png" alt="" class="mylogo" />
            <p class="mint-ui-title">代码构建系统</p>
            <p class="mint-home-desc">用于快速构建项目或页面的标准结构</p>
            <div class="h"></div>
            <div class="h"></div>
            <el-button size="small" type="danger" @click="popupXmVisible=true">新增项目</el-button>
            <div class="h"></div>
            <div class="h"></div>
            <!-- <el-button size="small" type="primary" @click="popupVisible=true">新增页面</el-button> -->
            <div class="txt">
                <div class="h"></div>
                <!-- <a class="address">http://localhost:端口/#/页面名</a> -->
            </div>
        </div>

        <!--新建项目-->
        <el-dialog :visible.sync="popupXmVisible" position="center" title="新建项目">
            <div class="xm">
                <div class="txt">项目名称</div>
                <el-input size="small" type="text" v-model="xmName" placeholder="请输入项目名称(小写，不使用-)" />
                <br />
                <br />
                <el-select size="small" type="text" v-model="xmType">
                    <el-option value="app" key="app">app</el-option>
                    <el-option value="pc" key="pc">pc</el-option>
                </el-select>
                <br />
                <br />
                <el-button size="small" type="primary" @click="addxm">新增项目</el-button>
            </div>
        </el-dialog>

        <!--新增页面-->
        <el-dialog :visible.sync="popupVisible" position="center" title="新增页面">
            <div class="zj">
                <div class="txt" v-show="false">模板代号</div>
                <div class="flex">
                    <el-select size="small" type="text" v-model="type" v-show="false">
                        <el-option :value="item.name" :key="item.name" v-for="item in tempList">{{item.cName}}</el-option>
                    </el-select>
                </div>
                <div class="txt">项目选择</div>
                <el-select type="text" size="small" v-model="xmName" class="name">
                    <el-option :value="item.path" :key="item.path" v-for="item in xmList">{{item.path}}</el-option>
                </el-select>
                <el-checkbox v-model="isPlImport"></el-checkbox>
                <span class="txt">批量生成页面</span>
                <div class="h"></div>
                <div v-show="!isPlImport">
                    <div class="txt">
                        <el-checkbox v-model="isCreateSub"></el-checkbox>
                        <span class="txt">是否创建子页面</span>
                    </div>
                    <el-input type="text" size="small" style="width: 550px" v-if="isCreateSub" v-model="zjName" placeholder="请输入父页面名称" />
                    <div class="txt" v-if="!isCreateSub">页面生成地址：src/{{xmName?xmName:'xxx'}}/views/</div>
                    <div class="h"></div>
                    <div class="txt" v-if="isCreateSub">子页面生成地址：src/{{xmName?xmName:'xxx'}}/views/{{zjName?zjName:'yyy'}}/subs/</div>
                    <el-input type="text" size="small" style="width: 550px" v-model="config" placeholder="请输入组建配置" />
                    <div class="h"></div>
                    <div class="remark">
                        备注信息：{{remark}}
                    </div>
                    <div class="h"></div>
                    <el-button size="small" type="primary" @click="addzj">新增页面</el-button>
                </div>
                <div v-show="isPlImport">
                    <div class="h"></div>
                    <textarea rows="8" cols="20" style="width:80%" v-model="plConfig" placeholder="请批量输入页面名称,逗号隔开"></textarea>
                    <div class="h"></div>
                    <el-button size="small" type="primary" @click="plAddZj">批量新增页面</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { codeConfig } from '../../construct'
    import app from '../../../../../app.config'
    export default {
        data() {
            return {
                // 项目列表
                xmList: app.appList,
                // 页面列表
                tempList: codeConfig,
                // 项目类型
                xmType: 'app',
                // 是否批量生成页面
                isPlImport: false,
                // 项目配置
                popupXmVisible: false,
                popupGcVisible: false,
                imgsrc: '',
                gcName: '',
                xmName: '',
                zjName: "", // 父页面名称
                // 页面配置
                popupVisible: false,
                type: 1, // 0 pc端   1 移动端
                // 页面配置
                config: '',
                // 批量页面配置
                plConfig: '',
                remark: '',
                isCreateSub: false // 标记创建的页面是否为子页面
            }
        },
        created() {
            if (this.tempList.length) {
                this.type = this.tempList[0].name
                this.config = JSON.stringify(this.tempList[0].config)
                this.remark = JSON.stringify(this.tempList[0].remark)
            }
        },
        watch: {
            type(val) {
                const that = this
                const fn = it => {
                    return it.name === val
                }
                this.config = JSON.stringify(obj.config)
                this.remark = JSON.stringify(obj.remark)
            }
        },
        methods: {
            // 新增页面
            addzj() {
                const that = this
                if (that.isCreateSub) {
                    if (that.zjName === '') {
                        alert('请输入父页面名')
                        return
                    }
                }
                if (that.xmName === '') {
                    alert('请选择项目')
                    return
                }
                $.ajax({
                    type: "POST",
                    url: "/api/createCode?templet=" + that.type + "&xmPath=" + that.xmName + "&isCreateSub=" + that.isCreateSub + "&zjName=" + that.zjName,
                    dataType: "json", //表示返回值类型，不必须           
                    data: {
                        config: JSON.stringify(eval("(" + that.config + ")"))
                    },
                    success: function (res) {
                        alert(JSON.stringify(res))
                    },
                    error: function (data) {
                        alert(data.msg);
                    }
                })
            },
            // 新增项目
            addxm() {
                const that = this
                if (that.xmName === '') {
                    alert('请输入项目名')
                    return
                }
                $.ajax({
                    type: "POST",
                    url: "/api/createXm",
                    dataType: "json", //表示返回值类型，不必须           
                    data: {
                        name: that.xmName,
                        type: that.xmType
                    },
                    success: function (res) {
                        alert(JSON.stringify(res))
                    },
                    error: function (data) {
                        alert(data.msg)
                    }
                })
            },
            plAddZj() {
                const that = this
                if (that.xmName === '') {
                    alert('请选择项目')
                    return
                }
                $.ajax({
                    type: "POST",
                    url: "/api/plCreateCode?templet=" + that.type + "&xmPath=" + that.xmName,
                    dataType: "json", //表示返回值类型，不必须           
                    data: {
                        plConfig: that.plConfig
                    },
                    success: function (res) {
                        alert(JSON.stringify(res))
                    },
                    error: function (data) {
                        alert(data.msg);
                    }
                })
            }
        }
    }

</script>

<style lang="less" scoped>
    .h {
        height: 10px;
    }

    .xm {
        width: 400px;
        padding: 0 0 0 50px;
        border-radius: 30%;
        padding: 40px 0 40px 70px;
        .textarea {
            margin-top: 10px;
            width: 250px;
            height: 135px;
            border: solid 1px #d9d9d9;
            padding: 0 0 0 10px;
            margin-top: 0px;
        }
    }

    .zj {
        width: 800px;
        padding: 0 0 0 50px;
        border-radius: 30%;
        padding: 40px 0 40px 70px;
        .plcreate {
            font-size: 12px;
        }
        .name {
            width: 250px !important;
        }
        .textarea {
            margin-top: 10px;
            width: 550px;
            height: 225px;
            border: solid 1px #d9d9d9;
            padding: 0 0 0 10px;
            margin-top: 0px;
        }
        .flex {
            width: 550px;
            font-size: 12px;
            display: flex;
            .el-select {
                flex: 1;
                height: 35px;
                border: solid 1px #d9d9d9;
                padding: 0 0 0 10px;
                margin-top: 0px;
                margin-bottom: 10px;
            }
            .preview {
                .showimg {
                    width: 35px;
                    height: 35px;
                    margin-bottom: 5px;
                    border: solid 1px #ddd;
                    margin-left: 10px;
                }
            }
        }
        .remark {
            width: 550px;
            color: #666;
            padding: 10px;
            font-size: 12px;
            background: #efefef;
        }
    }

    .large {
        width: 80%;
    }

    h3 {
        text-align: center;
    }

    h4 {
        padding-left: 10px;
        padding-top: 10px;
    }

    ul {
        padding: 10px 0px 5px 10px;
    }

    ul li:last-child {
        margin-bottom: 40px;
    }

    .txt {
        color: #666;
        font-size: 13px;
        margin-bottom: 5px;
        .address {
            color: #666;
            cursor: pointer;
            text-decoration: underline;
            &:hover {
                color: red;
            }
        }
        span {
            vertical-align: top;
            font-size: 12px;
        }
    }

    .mylogo {
        width: 50px;
    }
</style>