{extend name="common/common2" /}
{block name="main"}
<style>
    .select-box{
        position: fixed;
        z-index: 100;
        width: 350px;
        top: 0;
        right: 0;
        background-color: #ffffff;
        bottom: 0;
        overflow: auto;
    }
    .select-img{
        cursor: pointer;
        width: 25px;
        height: 25px;
    }
    .select-title{
        padding: 15px;
    }
</style>
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>{$meta_title}</h5>
                <div class="ibox-tools">
                    <a class="toback" href="{:url('index')}">
                        返回上一页
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <div class="row">
                    <div class="col-xs-8">
                        <form method="post" action="{:url('add')}" class="form-horizontal">
                            <input type="hidden" name="id" value="{$info['id']|default='0'}">
                            <div class="form-group">
                                <label class="col-xs-3 control-label">名称<span class="text-danger">*</span></label>
                                <div class="col-xs-9">
                                    <input type="text" class="form-control" name="title" value="{$info.title|default=''}">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-xs-3 control-label">图片</label>
                                <div class="col-xs-9">
                                    {:widget_view('common/upimg',['name'=>'img','multi'=>0,'val'=>isset($info)?$info['img']:''])}
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-xs-3 control-label">备注</label>
                                <div class="col-xs-9">
                                    <input type="text" class="form-control" name="remark" value="{$info.remark|default=''}">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-xs-3 control-label">大屏类型<span class="text-danger">*</span></label>
                                <div class="col-xs-9">
                                    <select name="type" id="screentype" class="form-control" onchange="changeType()">
                                        <option value="1">项目大屏</option>
                                        <option value="2">自定义大屏</option>
                                        <option value="3">3D大屏</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group" id="screen-url">
                                <label class="col-xs-3 control-label">大屏链接</label>
                                <div class="col-xs-9">
                                    <input type="text" class="form-control" name="url" value="{$info.url|default=''}">
                                </div>
                            </div>

                            <div id="vueapp-module">
                                <div class="form-group">
                                    <label class="col-xs-3 control-label">模板<span class="text-danger">*</span></label>
                                    <div class="col-xs-9">
                                        <input type="hidden" name="tid" id="tid" value="{$info.tid|default='0'}">
                                        <button type="button" class="btn btn-sm btn-primary" @click="selectTemp">选择模板</button>
                                        <div v-if="ttitle">
                                            {{ttitle}}
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-xs-3 control-label">模块绑定</label>
                                    <div class="col-xs-9">
                                        <input type="hidden" id="ele-module" name="content" value="{$info.content|default=''}">
                                        <table class="table table-bordered">
                                            <thead>
                                            <tr>
                                                <th>序号</th>
                                                <th>绑定模块</th>
                                                <th>预览模块</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="(item,index) in contents" :key="index">
                                                <th>{{item.id}}</th>
                                                <th>
                                                    <button type="button" class="btn btn-sm btn-primary" @click="selectModule(item)">选择模块</button>
                                                    {{item.title}}
                                                </th>
                                                <th>
                                                    <img v-if="item.img" :src="item.img" style="width: 40px;height: 40px;" onclick="open_img(this)" alt="">
                                                </th>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>


                                <div class="select-box" v-if="showTemp || showModule">
                                    <div v-if="showTemp">
                                        <div class="select-title">
                                            选择模板
                                            <button type="button" class="btn btn-xs pull-right btn-danger" @click="closeSelect">关闭</button>
                                        </div>
                                        <table class="table table-bordered">
                                            <tr v-for="(item,index) in temps" :key="index">
                                                <td>
                                                    <img v-if="tid == item.id" class="select-img" src="/img/dui.png" alt="" @click="sTemp(item)">
                                                    <img v-if="tid != item.id" class="select-img" src="/img/undui.png" alt="" @click="sdTemp(item)">
                                                    <img onclick="open_img(this)" :src="item.img" style="width: 50px;height: 50px" alt="">
                                                    {{item.title}}
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div v-if="showModule">
                                        <div class="select-title">
                                            选择模块
                                            <button type="button" class="btn btn-xs pull-right btn-danger" @click="closeSelect">关闭</button>
                                        </div>
                                        <table class="table table-bordered">
                                            <tr v-for="(item,index) in options" :key="index">
                                                <td>
                                                    <img v-if="curItem.mid == item.id" class="select-img" src="/img/dui.png" alt="" @click="sModule(item)">
                                                    <img v-if="curItem.mid != item.id" class="select-img" src="/img/undui.png" alt="" @click="sdModule(item)">
                                                    <img onclick="open_img(this)" :src="item.img" style="width: 50px;height: 50px" alt="">
                                                    {{item.title}}
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>

                            </div>

                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <div class="col-xs-9 col-xs-offset-3">
                                    <button class="btn btn-primary ajax-post" target-form="form-horizontal" type="submit">确 定</button>
                                    <a href="{:url('index')}" class="btn btn-default">取 消</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}

<script>
    $(document).ready(function(){
        formSetValue("tid", {$info.tid|default=0});
        formSetValue("type", {$info.type|default=1});

        changeType();
    });

    function changeType() {
        var v = $('#screentype').val();
        if(v == 1){
            $('#vueapp-module').show();
            $('#screen-url').hide();
        }else{
            $('#screen-url').show();
            $('#vueapp-module').hide();
        }
    }
    var options = {:json_encode($moduleList)};
    var temps = {:json_encode($tempList)};
    var tid = {$info.tid|default=0};
    var nums = {$nums|default=0};
    new Vue({
        el: '#vueapp-module',
        data: function() {
            return {
                options: options,
                temps: temps,
                showTemp: false,
                showModule: false,
                contents: [],
                value: '',
                tid: tid,
                nums: nums,
                ttitle: '',
                curItem: null
            }
        },
        computed: {
            scontent() {
                const vals = JSON.parse(JSON.stringify(this.contents));
                return vals;
            },
        },
        watch: {
            scontent: function (newVal, oldVal) {
                this.formatContent();
                const vv = [];
                this.contents.forEach((item) => {
                    vv.push({
                        id: item.id,
                        mid: item.mid,
                    })
                });
                this.value = vv.length > 0 ? JSON.stringify(vv):'';
                $('#ele-module').val(this.value);
            },
            tid: function (newVal, oldVal) {
                $('#tid').val(this.tid);
            }
        },
        created(){
            {if condition="!empty($info)"}
                const vals = '{:json_encode($info["content2"])}';
            {else /}
                const vals = '';
            {/if}
                console.log(vals);
            this.value = vals;
            const valss = vals?JSON.parse(vals):[];
            console.log(valss);
            const cc = [];
            valss.forEach((item) => {
                let img = '';
                let tti = '';
                this.options.forEach((item2) => {
                    if(item.mid == item2.id){
                        img = item2.img;
                        tti = item2.title;
                    }
                });
                cc.push({
                    id: item.id,
                    mid: item.mid,
                    img: img,
                    title: tti,
                })
            });

            if(this.tid > 0){
                this.temps.forEach((item) => {
                    if(item.id == this.tid){
                        this.nums = item.nums;
                        this.ttitle = item.title;
                    }
                });
            }

            if(cc.length == 0 && this.nums > 0){
                let i = 1;
                this.contents = [];
                while (this.nums > i){
                    this.contents.push({
                        id: i,
                        mid: 0,
                        img: '',
                        title: '',
                    });
                    i++;
                }
            }
            if(cc.length > 0){
                this.contents = cc;
            }

            console.log('11111',this.value,this.options, this.contents);
        },
        methods:{
            changeTemp(){

                this.contents = [];
                if(this.tid > 0){
                    this.temps.forEach((item) => {
                        if(item.id == this.tid){
                            this.nums = item.nums;
                        }
                    });

                    if(this.nums > 0){
                        let i = 1;
                        while (this.nums >= i){
                            this.contents.push({
                                id: i,
                                mid: 0,
                                img: '',
                                title: '',
                            });
                            i++;
                        }
                    }
                }
                console.log('contents',this.contents);
            },

            selectTemp(){
                this.showTemp = true;
                this.showModule = false;
            },

            selectModule(obj){
                this.showTemp = false;
                this.showModule = true;
                this.curItem = obj;
            },

            closeSelect(){
                this.showTemp = false;
                this.showModule = false;
            },

            sdTemp(obj) {
                this.tid = obj.id;
                this.ttitle = obj.title;
                this.changeTemp();
                this.closeSelect();
            },

            sTemp(obj) {
                this.tid = 0;
                this.ttitle = '';
                this.changeTemp();
                this.closeSelect();
            },

            sdModule(obj) {
                this.curItem.mid = obj.id;
                this.curItem.title = obj.title;
                this.curItem.img = obj.img;
                this.changeModule();
                this.closeSelect();
            },

            sModule(obj) {
                this.curItem.mid = 0;
                this.curItem.title = '';
                this.curItem.img = '';
                this.changeModule();
                this.closeSelect();
            },

            changeModule(){
                this.contents.forEach((item) => {
                    const info = item;
                    if(item.id == this.curItem.id){
                        info.title = this.curItem.title;
                        info.img = this.curItem.img;
                        info.mid = this.curItem.mid;
                    }
                })
            },

            formatContent(){
                this.contents.forEach((item) => {
                    const info = item;
                    this.options.forEach((item2) => {
                        if(item2.id == item.mid){
                            info.img = item2.img;
                            info.title = item2.title;
                        }
                    });
                })
            },
        }
    })
</script>
{/block}