{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',['mode'=>$mode])}">-->
                        <!--返回上一页-->
                    <!--</a>-->
                <!--</div>-->
            <!--</div>-->
            <!--{/if}-->
            <div class="ibox-content">
                <form method="post" action="{:url('add',['mode'=>$mode])}" 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'}">
                    <input type="hidden" name="patrol_mode" value="{$mode|default=''}">
                    <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 id="vue-plan">
                        <div class="form-group" {if $mode==4} style="display: block" {else} style="display: none" {/if}>
                            <input type="hidden" name="cate_id" v-model="cate">
                            <label class="col-sm-2 control-label">选择分类<span class="text-danger">*</span></label>
                            <div class="col-sm-8">
                                <el-select clearable multiple filterable v-model="cate" placeholder="请选择分类">
                                    <el-option
                                            v-for="item in cateList"
                                            :key="item.id"
                                            :label="item.title"
                                            :value="item.id.toString()">
                                    </el-option>
                                </el-select>
                            </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 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>
                                <button class="btn btn-sm btn-primary" type="button" @click="sortAddrs">确定排序</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="检查内容">
                                        <template slot-scope="scope">
                                            <span v-for="(item,index) in scope.row.forms" :key="index">{{item.title}};</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="sorts" label="排序">
                                        <template slot-scope="scope">
                                            <input type="number" step="1" class="form-control" v-model="scope.row.sorts">
                                        </template>
                                    </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"
                                            height="200"
                                            @selection-change="handleCurrentChange"
                                            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="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" style="padding-top: 7px;">
                                <input type="hidden" name="in_order" value="" id="inOrder">
                                <el-radio v-model="inOrder" :label="0">否</el-radio>
                                <el-radio v-model="inOrder" :label="1">是</el-radio>
                            </div>
                        </div>

                        <input type="hidden" name="lines" value="" id="addrFormsLines">
                        <div class="form-group" v-if="inOrder === 1 && lines.length > 0">
                            <label class="col-sm-2 control-label">路线时间设置</label>
                            <div class="col-sm-8" style="padding-top: 7px;">
                                <table class="table table-bordered ctable text-center">
                                    <tr>
                                        <th class="text-center">路线</th>
                                        <th class="text-center">时间跨度(分钟)</th>
                                        <th class="text-center">浮动时间(分钟)</th>
                                    </tr>
                                    <tr v-for="(item,index) in lines" :key="index">
                                        <td>{{item.st}} ~ {{item.et}}</td>
                                        <td><el-input type="number" v-model="item.kd" size="small" style="width: 140px" placeholder=""></el-input></td>
                                        <td><el-input type="number" v-model="item.fd" size="small" style="width: 140px" placeholder=""></el-input></td>
                                    </tr>
                                </table>
                            </div>
                        </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" data-layer_c="1" type="submit">确 定</button>
                            {if $type==1}
                            {if $isCalendar==1}

                            <a href="{:url('calendar',['mode'=>$mode])}" class="btn btn-default">取 消</a>
                            {else}
                            <button  class="btn cancel-btn btn-default" type="button">取 消</button>
                            {/if}
                            {else}
                            <button  class="btn cancel-btn btn-default" type="button">取 消</button>

                            <!--<a href="{:url('index',['mode'=>$mode])}" 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:'#148d8f'
        // value:dateFormat(),
    });
    laydate.render({
        elem: '#date-one',
        type: 'datetime',
        trigger: 'click' ,
        format:'yyyy-MM-dd HH:mm',
        theme:'#148d8f'

        // 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($patrolForm)};
    var addrForms = {:json_encode($info['addrForms'])};

    var cateList = {:json_encode($cateList)};
    var lis = {:json_encode($info['lines'])};
    console.log(addrForms);

    var info = {:json_encode($info)};
    new Vue({
        el: '#vue-plan',
        data: function() {
            return {
                title: '',
                dialogVisible: false,
                step: 0,
                date: '',
                tableData: addrForms,
                selAddrForms: [], // 选择的地址表单
                addrs: ads,
                selAddrs:[], // 选择地址
                dialogVisibleAddr: false,
                addrkeyword: '',
                forms: frs,
                selForm: null,
                formkeyword: '',
                dialogVisibleForm: false,
                lines: lis,
                inOrder: {$info.in_order},
                cateList:cateList,
                cate:[],
                frs:frs
            }
        },
        watch: {
            cate: function (newVal, oldVal) {

                var that = this;
                $.post('{:url("PatrolForm/getByCate")}',{id:newVal},function (res) {
                    that.frs = res.data;

                })
            },
            nTableData(){
                console.log('nTableData1111');
                $('#addrForms').val(JSON.stringify(this.tableData));
            },
            nLines(){
                $('#addrFormsLines').val(JSON.stringify(this.lines));
            },
            inOrder(){
                $('#inOrder').val(this.inOrder);
            },
            addrIds() { // 以保存的地址id
                console.log('tableData',this.tableData);
                let lines1 = [];
                if(this.tableData.length >= 2){
                    for (let i in this.tableData){
                        if(i < this.tableData.length - 1){
                            lines1.push({
                                s: this.tableData[i].addrId,
                                st: this.tableData[i].addrTitle,
                                e: this.tableData[Number(i)+1].addrId,
                                et: this.tableData[Number(i)+1].addrTitle,
                                kd: 0,
                                fd: 0,
                            })
                        }
                    }
                }

                this.lines = JSON.parse(JSON.stringify(lines1));
                console.log('lines2222',this.lines);
            },
        },
        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));
            },
            nLines() { // 以保存的地址id
                return JSON.parse(JSON.stringify(this.lines));
            },
        },
        created(){
            // this.tableData = addrForms;
            this.cate = info.cate_id;
            $('#addrForms').val(JSON.stringify(this.tableData));
            $('#addrFormsLines').val(JSON.stringify(this.lines));
            $('#inOrder').val(this.inOrder);
            this.frsList();
        },
        methods: {
            frsList: function () {

                var that = this;
                $.post('{:url("PatrolForm/getByCate")}',{id:that.cate},function (res) {
                    that.frs = res.data;

                })
            },
            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,
                            'forms': []
                        });
                    }
                });
                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);
                    });
                    this.selAddrForms = [];
                });

                console.log(this.selAddrForms,sids,this.tableData);
            },
            sortAddrs(){
                let ll = JSON.parse(JSON.stringify(this.tableData));
                ll.sort((a, b) => {
                    return Number(a.sorts) > Number(b.sorts) ? 1 : -1;
            });
                console.log('ll',ll);
                this.tableData = [];
                this.$nextTick(() => {
                    this.tableData = JSON.parse(JSON.stringify(ll));
            });
            },
            handleCurrentChange(val){ // 选中检查内容
                console.log(val);
                this.selForm = val;
            },
            handleCloseForm(){
                this.dialogVisibleForm = false;
            },
            searchForm(){
                this.forms= [];
                this.$nextTick(() => {
                    if(this.formkeyword){
                        this.forms = this.frs.filter((item) => {
                            return item.title.indexOf(this.formkeyword) !== -1;
                        });
                    }else{
                        this.forms = this.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:'';
                        const ffs = [];
                        this.selForm.forEach((fitem) => {
                            ffs.push({
                                id: fitem.id,
                                title: fitem.title
                            });
                        });
                        item.forms = JSON.parse(JSON.stringify(ffs));
                    }
                });

                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 = this.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}