{extend name="common/common2" /}
{block name="main"}
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            {if condition="$isCalendar neq 1 && $type neq 1"}
            <div class="ibox-title">
                <h5>{$meta_title}</h5>
                <div class="ibox-tools">
                    <a class="toback" href="{:url('index')}">
                        返回上一页
                    </a>
                </div>
            </div>
            {/if}
            <div class="ibox-content">
                <form method="post" action="{:url('add')}" class="form-horizontal">
                    <input type="hidden" name="id" value="{$info['id']|default='0'}">
                    <input type="hidden" name="type" value="{$type|default='0'}">
                    <input type="hidden" name="isCalendar" value="{$isCalendar|default='0'}">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">任务名称<span class="text-danger">*</span></label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="title" value="{$info.title|default=''}" placeholder="请输入任务名称">
                        </div>
                    </div>

                    <div class="form-group" id="vue-plan">
                        <label class="col-sm-2 control-label">地点<span class="text-danger">*</span></label>
                        <div class="col-sm-8">
                            <input type="hidden" name="addrs" value="" id="addrForms">
                            <button class="btn btn-sm btn-primary" type="button" @click="selectAddr()">添加地点</button>
                            <button class="btn btn-sm btn-primary" type="button" @click="selectForm()">设置检查内容</button>
                            <button class="btn btn-sm btn-danger" type="button" @click="delAddrs">移除</button>

                            <el-table
                                    v-if="tableData.length > 0"
                                    :data="tableData"
                                    height="250"
                                    border
                                    @selection-change="handleSelectionChange"
                                    style="width: 100%">
                                <el-table-column
                                        type="selection"
                                        width="60">
                                </el-table-column>
                                <el-table-column
                                        prop="addrTitle"
                                        label="地点名称"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="formTitle"
                                        label="检查内容"
                                >
                                </el-table-column>
                                <el-table-column label="操作" width="130">
                                    <template slot-scope="scope">
                                        <button class="btn btn-sm" type="button" @click="moveUp(scope.$index, scope.row)">上移</button>
                                        <button class="btn btn-sm" type="button" @click="moveDown(scope.$index, scope.row)">下移</button>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <el-dialog
                                    title="选择地点"
                                    :visible.sync="dialogVisibleAddr"
                                    width="500px"
                                    :before-close="handleClose"
                            >
                                <el-input
                                        placeholder="请输入"
                                        v-model="addrkeyword"
                                        @input="searchAddr"
                                        clearable>
                                </el-input>
                                <el-table
                                        ref="singleTable"
                                        :data="addrs"
                                        height="200"
                                        @selection-change="handleSelectionChangeAddr"
                                        style="width: 100%">
                                    <el-table-column
                                            type="selection"
                                            width="60">
                                    </el-table-column>
                                    <el-table-column
                                            property="title"
                                            label="名称"
                                    >
                                    </el-table-column>
                                </el-table>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="dialogVisibleAddr = false">取 消</el-button>
                                    <el-button type="primary" @click="saveAddr">确 定</el-button>
                                </span>
                            </el-dialog>

                            <el-dialog
                                    title="选择检查内容"
                                    :visible.sync="dialogVisibleForm"
                                    width="500px"
                                    :before-close="handleCloseForm"
                            >
                                <el-input
                                        placeholder="请输入"
                                        v-model="formkeyword"
                                        @input="searchForm"
                                        clearable>
                                </el-input>
                                <el-table
                                        ref="singleTable2"
                                        :data="forms"
                                        highlight-current-row
                                        height="200"
                                        @current-change="handleCurrentChange"
                                        style="width: 100%">
                                    <el-table-column
                                            type="index"
                                            label="序号"
                                            width="60">
                                    </el-table-column>
                                    <el-table-column
                                            property="title"
                                            label="名称"
                                    >
                                    </el-table-column>
                                </el-table>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="dialogVisibleAddr = false">取 消</el-button>
                                    <el-button type="primary" @click="saveForm">确 定</el-button>
                                </span>
                            </el-dialog>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">检查人员<span class="text-danger">*</span></label>
                        <div class="col-sm-8">
                            {:widget_view('common/multiselect',['name'=>'user_ids','lists' =>$user, 'val' =>isset($info)?$info['task_user']:[]])}
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">开始时间<span class="text-danger">*</span></label>
                        <div class="col-sm-8">
                            <input  class="form-control" id="date" readonly name="start_time" value="{$info.start_time|default=$start}">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">结束时间<span class="text-danger">*</span></label>
                        <div class="col-sm-8">
                            <input class="form-control" id="date-one" readonly name="end_time" value="{$info.end_time|default=$end}">
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <div class="col-sm-8 col-sm-offset-2">
                            <button class="btn btn-primary ajax-post" target-form="form-horizontal"{if $type==1 && $isCalendar!=1} data-layer="1"{/if} type="submit">确 定</button>
                            {if $type==1}
                            {if $isCalendar==1}
                            <a href="{:url('calendar')}" class="btn btn-default">取 消</a>
                            {else}
                            <button  class="btn cancel-btn btn-default" type="button">取 消</button>
                            {/if}
                            {else}
                            <a href="{:url('index')}" class="btn btn-default">取 消</a>
                            {/if}
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="/static/layDate-v5.0.9/laydate.js"></script>
<script>
    var time =new Date();


    //日期时间选择器
    laydate.render({
        elem: '#date',
        type: 'datetime',
        format:'yyyy-MM-dd HH:mm',
        trigger: 'click' ,
        theme:'#6eb7ff'
        // value:dateFormat(),
    });
    laydate.render({
        elem: '#date-one',
        type: 'datetime',
        trigger: 'click' ,
        format:'yyyy-MM-dd HH:mm',
        theme:'#6eb7ff'

        // value:dateFormatH(),

    });

    //当前日期格式化
    function dateFormat() {
        var  year=time.getFullYear();
        var  mouth=time.getMonth()+ 1;
        if(mouth < 10){
            var  mouths='0'+mouth;
        }else {
            var  mouths=mouth;
        }
        var  day=time.getDate();
        if(day < 10){
            var  days='0'+day;
        }else {
            var  days=day;
        }
        var  hour=time.getHours();
        if(hour < 10){
            var  hours='0'+hour;
        }else {
            var  hours=hour;
        }
        var minute=time.getMinutes();
        if(minute < 10){
            var  minutes='0'+minute;
        }else {
            var  minutes=minute;
        }
        var dateStr=year+'-'+mouths+'-'+days+' '+hours+':'+minutes;
        return dateStr;
    }
    function dateFormatH() {
        var  year=time.getFullYear();
        var  mouth=time.getMonth()+ 1;
        if(mouth < 10){
            var  mouths='0'+mouth;
        }else {
            var  mouths=mouth;
        }
        var  day=time.getDate();
        if(day < 10){
            var  days='0'+day;
        }else {
            var  days=day;
        }
        var  hour=time.getHours();
        if(hour < 10){
            var  hours='0'+hour;
        }else {
            var  hours=hour;
        }
        var minute=time.getMinutes()+20;
        var dateStr=year+'-'+mouths+'-'+days+' '+hours+':'+minute;
        return dateStr;
    }


    var ads = {:json_encode($address)};
    var frs = {:json_encode($greenForm)};
    var addrForms = {:json_encode($info['addrForms'])};
    new Vue({
        el: '#vue-plan',
        data: function() {
            return {
                title: '',
                dialogVisible: false,
                step: 0,
                date: '',
                tableData: [],
                selAddrForms: [], // 选择的地址表单
                addrs: ads,
                selAddrs:[], // 选择地址
                dialogVisibleAddr: false,
                addrkeyword: '',
                forms: frs,
                selForm: null,
                formkeyword: '',
                dialogVisibleForm: false,
            }
        },
        watch: {
            nTableData(){
                console.log('nTableData1111');
                $('#addrForms').val(JSON.stringify(this.tableData));
            }
        },
        computed: {
            addrIds() { // 以保存的地址id
                console.log('111ssss');
                let ids = [];
                this.tableData.forEach((item) => {
                    ids.push(item.addrId);
                });
                return ids;
            },
            nTableData() { // 以保存的地址id
                return JSON.parse(JSON.stringify(this.tableData));
            },
        },
        created(){
            this.tableData = addrForms;
        },
        methods: {
            handleSelectionChange(val){
                console.log(val);
                this.selAddrForms = val;
            },
            handleClose(){
                this.dialogVisibleAddr = false;
            },
            handleSelectionChangeAddr(val){
                console.log(val);
                this.selAddrs = val;
            },
            selectAddr(){
                console.log('aaaaaaaaaaa');
                this.dialogVisibleAddr = true;
                this.addrkeyword = '';
                this.addrs = ads.filter((item) => {
                    return !this.addrIds.includes(item.id);
                });
                this.selAddrs = [];
                console.log('bbbbbbbbb',this.addrs);
            },
            searchAddr(){
                this.addrs= [];
                this.$nextTick(() => {
                    if(this.addrkeyword){
                        this.addrs = ads.filter((item) => {
                            return item.title.indexOf(this.addrkeyword) !== -1;
                        });
                    }else{
                        this.addrs = ads;
                    }
                });
            },
            saveAddr(){
                const tbs = this.tableData;
                this.selAddrs.forEach((item) => {
                    if(!this.addrIds.includes(item.id)){
                        tbs.push({
                            'addrId': item.id,
                            'addrTitle': item.title,
                            'formId': 0,
                            'formTitle': '',
                        });
                    }
                });
                this.dialogVisibleAddr = false;
                this.$nextTick(() => {
                    this.tableData = tbs;
                });
            },
            moveUp(idx,obj){
                console.log(idx,obj);
                if(idx > 0){
                    let old = JSON.parse(JSON.stringify(this.tableData[idx]));
                    let up = JSON.parse(JSON.stringify(this.tableData[idx - 1]));
                    let tbs = this.tableData;
                    this.tableData = [];
                    this.$nextTick(() => {
                        tbs[idx] = up;
                        tbs[idx - 1] = old;
                        this.tableData = tbs;
                    })
                }
                console.log(this.tableData);
            },
            moveDown(idx,obj){ // 下移
                console.log(idx,obj);
                let length = this.tableData.length;
                if(idx < length - 1){
                    let old = JSON.parse(JSON.stringify(this.tableData[idx]));
                    let up = JSON.parse(JSON.stringify(this.tableData[idx + 1]));
                    let tbs = this.tableData;
                    this.tableData = [];
                    this.$nextTick(() => {
                        tbs[idx] = up;
                        tbs[idx + 1] = old;
                        this.tableData = tbs;
                    })
                }
            },
            delAddrs(){ // 移除
                let sids = [];
                this.selAddrForms.forEach((item) => {
                    sids.push(item.addrId);
                });
                if(sids.length == 0){
                    this.$message.error('未选择地点');
                    return false;
                }
                let tbs = this.tableData;
                this.tableData = [];
                this.$nextTick(() => {
                    this.tableData = tbs.filter((item) => {
                        return !sids.includes(item.addrId);
                    });
                });

                console.log(this.selAddrForms,sids,this.tableData);
            },
            handleCurrentChange(val){ // 选中检查内容
                console.log(val);
                this.selForm = val;
            },
            handleCloseForm(){
                this.dialogVisibleForm = false;
            },
            searchForm(){
                this.forms= [];
                this.$nextTick(() => {
                    if(this.formkeyword){
                        this.forms = frs.filter((item) => {
                            return item.title.indexOf(this.formkeyword) !== -1;
                        });
                    }else{
                        this.forms = frs;
                    }
                });
            },
            saveForm(){
                console.log('1111');
                const tbs = this.tableData;
                this.tableData = [];

                let sids = [];
                this.selAddrForms.forEach((item) => {
                    sids.push(item.addrId);
                });
                tbs.forEach((item) => {
                    if(sids.includes(item.addrId)){
                        item.formId = this.selForm?this.selForm.id:0;
                        item.formTitle = this.selForm?this.selForm.title:'';
                    }
                });

                this.dialogVisibleForm = false;
                this.$nextTick(() => {
                    this.tableData = tbs;
                });
            },
            selectForm(){
                let sids = [];
                this.selAddrForms.forEach((item) => {
                    sids.push(item.addrId);
                });
                if(sids.length == 0){
                    this.$message.error('未选择地点');
                    return false;
                }

                this.dialogVisibleForm = true;
                this.forms = frs;
                this.selForm = null;
            },
            getDateAll(starDay, endDay) { // 获取两个时间段的所有日期
                var arr = [];
                var dates = [];
                // 设置两个日期UTC时间
                var db = new Date(starDay);
                var de = new Date(endDay);
                // 获取两个日期GTM时间
                var s = db.getTime() - 24 * 60 * 60 * 1000;
                var d = de.getTime() - 24 * 60 * 60 * 1000;
                // 获取到两个日期之间的每一天的毫秒数
                for (var i = s; i <= d; ) {
                    i = i + 24 * 60 * 60 * 1000;
                    arr.push(parseInt(i));
                }
                // 获取每一天的时间  YY-MM-DD
                for (var j in arr) {
                    var time = new Date(arr[j]);
                    var year = time.getFullYear(time);
                    var mouth =
                        time.getMonth() + 1 >= 10
                            ? time.getMonth() + 1
                            : "0" + (time.getMonth() + 1);
                    var day =
                        time.getDate() >= 10
                            ? time.getDate()
                            : "0" + time.getDate();
                    var YYMMDD = year + "-" + mouth + "-" + day;
                    dates.push(YYMMDD);
                }
                return dates;
            },
            getWeekByDay(dateString,t=0) { // 获取某天是周几
                var dateArray = dateString.split("-");
                date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
                if(t == 1){
                    return "周" + "日一二三四五六".charAt(date.getDay());
                }else{
                    return date.getDay();
                }
            }
        }
    })

</script>

{/block}