@extends('layouts.base')

@section('content')
@section('title', '工作时间')
<link rel="stylesheet" href="{{resource_get('plugins/reserve-simple/src/static/index.css')}}">
@include('public.admin.box-item')
<style type="text/css">
    .my-calendar .fc-day{
        cursor: pointer;
    }
    .vue-title-yz-modular{
        margin: 0 10px 10px 10px;
    }
    .el-calendar-table .el-calendar-day{
        padding: 0;
        height: 120px;
    }
    .add .el-dialog__body{
        height:200px;
    }
    .el-table td, .el-table th.is-leaf{
        text-align:center;

    }
    .el-dialog{border-radius: 10px;}
</style>
<div class="all">
    <div>
        <div id="app">
            <div class="vue-crumbs">
                <a @click="goBack()">工作时间管理</a> > 编辑工作时间
            </div>
            <box-item text="编辑工作时间">
                <div>
                    <span>默认工作时间</span>
                    <el-button type="primary" @click="addDate">添加默认工作时间</el-button>
                </div>
                <el-table :data="default_times" style="width: 100%;margin:20px 0;">
                    <el-table-column prop="id" label="ID"></el-table-column>
                    <el-table-column prop="work_hour_start" label="开始时间"></el-table-column>
                    <el-table-column prop="work_hour_end" label="结束时间"></el-table-column>
                    <el-table-column prop="work_hour_end" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="delTime(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-calendar v-model="value" :data="{type:'current-month', isSelected:true, day:' yyyy-MM-dd'}">
                    <template slot="dateCell" slot-scope="{date, data}">
                        <div style="width: 100%;height:100%;padding:8px;overflow-y: auto;" @click="changeDate(date, data)">
                            <div style="text-align:right;">[[data.day.split('-').slice(2).join('-')]]</div>
                            <template v-for="(item,i) in dateData(data).periods">
                                <div style="background-color: #29BA9C;color:#fff;margin:5px 0;padding:2px;border-radius: 4px;"  v-if="item.status==1">[[item.title]]</div>
                                <div style="background-color: #DCDFE6;color:#fff;margin:5px 0;padding:2px;border-radius: 4px;"  v-else>[[item.title +"     休息"]]</div>
                            </template>
                        </div>
                   </template>
                </el-calendar>
            </box-item>
            <div class="add">
                <el-dialog title="默认工作时间" :visible.sync="dialogVisible" width="30%">
                    <div style="display:flex;align-items: center;justify-content: center;">
                        <el-time-picker  v-model="startTime" placeholder="开始时间" format="HH:mm" value-format="HH:mm"></el-time-picker>
                        <div style="margin:0 10px;width:10px;height:1px;border:1px solid #ccc;"></div>
                        <el-time-picker  v-model="endTime" placeholder="结束时间" format="HH:mm" value-format="HH:mm"></el-time-picker>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addTimeEnter">确 定</el-button>
                    </span>
                </el-dialog>
            </div>

            <el-dialog title="编辑" :visible.sync="dateShow" width="1000px" @close="dateClose">
                <box-item text="编辑工作时间">
                    <div style="margin-bottom:20px;">预约对象：[[obj_info.name]]</div>
                    <div style="margin-bottom:20px;">
                        <span>工作时间</span>
                        <el-button type="primary" @click="time_list.push({isEdit:true,work_hour_end_str:'',work_hour_start_str:'',isAdd:true})">添加工作时间</el-button>
                    </div>
                    <el-table :data="time_list" style="width: 100%;margin:20px 0;">
                        <el-table-column prop="id" label="ID" width="50"></el-table-column>
                        <el-table-column prop="work_hour_start_str" label="开始时间" width="240">
                            <template slot-scope="scope">
                                <template v-if="!scope.row.isEdit">[[scope.row.work_hour_start_str]]</template>
                                <el-time-picker  v-model="scope.row.work_hour_start_str" placeholder="开始时间" format="HH:mm" value-format="HH:mm" v-else></el-time-picker>
                            </template>
                        </el-table-column>
                        <el-table-column prop="work_hour_end_str" label="结束时间" width="240">
                            <template slot-scope="scope">
                                <template v-if="!scope.row.isEdit">[[scope.row.work_hour_end_str]]</template>
                                <el-time-picker  v-model="scope.row.work_hour_end_str" placeholder="开始时间" format="HH:mm" value-format="HH:mm" v-else></el-time-picker>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态">
                            <template slot-scope="scope" v-if="!scope.row.isAdd">[[scope.row.status==0?"休息":"正常"]]</template>
                        </el-table-column>
                        <el-table-column label="操作" width="240">
                            <template slot-scope="scope">
                                <template v-if="!scope.row.isEdit">
                                    <el-button type="warning" size="mini" @click="scope.row.isEdit=true" >编辑</el-button>
                                    <el-button type="primary" size="mini" @click="changeEditStatus(scope.row)">[[scope.row.status==1?"休息":"工作"]]</el-button>
                                    <el-button type="danger" size="mini" @click="delteTime(scope.row)" >删除</el-button>
                                </template>
                                <el-button type="primary" size="mini" @click="editEnter(scope.row)" v-if="scope.row.isEdit">[[scope.row.isAdd?"确认添加":"保存"]]</el-button>
                                <el-button type="danger" size="mini" @click="time_list.splice(time_list.length-1,1)" v-if="scope.row.isAdd">取消</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </box-item>
            </el-dialog>
            <div class="vue-page" style="text-align:center;">
                <el-button type="primary" @click="$message.success('提交成功')">提交</el-button>
            </div>
        </div>
    </div>
</div>
<script>
    let vm = new Vue({
        el:"#app",
        delimiters: ['[[', ']]'],
        data(){
            let obj_id = "{{ request()-> obj_id }}";
            return {
                value:new Date(),
                dialogVisible:false,
                startTime:"",
                endTime:"",
                obj_id,
                date_times:[],
                default_times:[],
                obj_info:{},
                time_list:[],
                dateShow:false,
                work_date:"",
            }
        },
        created(){
            this.getData();
        },
        methods:{
            goBack(){
                window.history.go(-1);
            },
            addTimeEnter(){
                if (this.startTime=="") {
                    this.$message.error("开始时间不能为空");
                    return false;
                }else if(this.endTime==""){
                    this.$message.error("结束时间不能为空");
                    return false;
                }else if(this.endTime==this.startTime){
                    this.$message.error("开始时间不能和结束时间相同");
                    return false;
                }else{
                    let s = this.startTime.split(":");
                    let e = this.endTime.split(":");
                    if(s[0]<e[0] || (s[0]==e[0] && s[1]<e[1])) this.addDefaultWorkTimes(this.startTime,this.endTime)
                    else this.addDefaultWorkTimes(this.endTime,this.startTime)
                }
            },
            addDefaultWorkTimes(time_start,time_end){
                let json = {obj_id:this.obj_id,time_start,time_end};
                this.$http.post("{!!yzWebFullUrl('plugin.reserve-simple.admin.workTime.addDefaultWorkTimes')!!}",json).then(({data:{result,msg}})=>{
                    if(result==1){
                        this.$message.success("设置成功");
                        this.startTime="";
                        this.endTime="";
                        this.getData();
                        this.dialogVisible = false;
                    }else  this.$message.error(msg);
                })
            },
            delteTime({id:time_id}){
                this.$confirm('确定删除吗', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                    let loading = this.$loading({ lock: true,text: '删除中',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});
                    this.$http.post("{!!yzWebFullUrl('plugin.reserve-simple.admin.workTime.deleteWorkTime')!!}",{time_id}).then(({data:{result,msg,data}})=>{
                        loading.close();
                        if(result==1){
                            this.$message.success("删除成功");
                            this.getTime_list();
                        }else  this.$message.error(msg);
                    })
                })
            },
            delTime(time_id){
                this.$confirm('确定删除吗', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                    let loading = this.$loading({ lock: true,text: '删除中',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});
                    this.$http.post("{!!yzWebFullUrl('plugin.reserve-simple.admin.workTime.delDefaultWorkTimes')!!}",{time_id}).then(({data:{result,msg,data}})=>{
                        loading.close();
                        if(result==1){
                            this.$message.success("删除成功");
                            this.dialogVisible = false;
                            this.getData();
                        }else  this.$message.error(msg);
                    })
                })
            },
            getData(){
                this.$http.post("{!!yzWebFullUrl('plugin.reserve-simple.admin.workTime.getAllWorkTimes')!!}",{obj_id:this.obj_id}).then(({data:{result,msg,data}})=>{
                   if(result == 1){
                       this.default_times = data.default_times;
                       this.date_times = data.date_times;
                   }
                })
            },
            dateData({day}){
                for (let index = 0; index < this.date_times.length; index++) {
                    let data = this.date_times[index];
                   if(data.work_date == day){
                        return data
                   }
                }
                return []
            },
            addDate(){
                this.dialogVisible = true;
            },
            changeDate(date,{day}){
                this.dateShow = true;
                this.getTime_list(day);
            },
            getTime_list(day){
                let json = {obj_id:this.obj_id,work_date:day};
                this.$http.post("{!!yzWebFullUrl('plugin.reserve-simple.admin.workTime.getDateWorkTimesDetail')!!}",json).then(({data:{result,msg,data}})=>{
                    if(result==1){
                        this.obj_info = data.obj_info;
                        this.time_list = data.time_list.map(item=>{
                            item.isEdit = false;
                            return item
                        });
                        this.work_date = data.work_date;
                    }else this.$message.error(msg)

                })
            },
            addEnter({work_hour_start_str,work_hour_end_str}){
                if (work_hour_start_str=="") {
                    this.$message.error("开始时间不能为空");
                    return false;
                }else if(work_hour_end_str==""){
                    this.$message.error("结束时间不能为空");
                    return false;
                }else if(work_hour_end_str==work_hour_start_str){
                    this.$message.error("开始时间不能和结束时间相同");
                    return false;
                }else{
                    let s = work_hour_start_str.split(":");
                    let e = work_hour_end_str.split(":");
                    let json = {
                        obj_id:this.obj_id,
                        work_date:this.work_date,
                        hour_start:work_hour_start_str,
                        hour_end:work_hour_end_str
                    }
                    if(s[0]>e[0] || (s[0]==e[0] && s[1]>e[1])){
                        json.hour_start = work_hour_end_str;
                        json.hour_end = work_hour_start_str;
                    }
                    this.$http.post("{!!yzWebFullUrl('plugin.reserve-simple.admin.workTime.addDateWorkTimes')!!}",json).then(({data:{result,msg}})=>{
                        if(result==1){
                            this.getTime_list(this.work_date);
                            this.$message.success(msg);
                        }else  this.$message.error(msg);
                    })
                }
            },
            editEnter(row){
                if(row.isAdd){
                    this.addEnter(row);
                    return false;
                }
                let json = {
                    time_id:row.id,
                    hour_start:row.work_hour_start_str,
                    hour_end:row.work_hour_end_str,
                }
                this.$http.post("{!!yzWebFullUrl('plugin.reserve-simple.admin.workTime.eidtDateWorkTimes')!!}",json).then(({data:{result,msg}})=>{
                    if(result==1){
                        this.$message.success(msg);
                        row.isEdit = false;
                        this.getData();
                    }else  this.$message.error(msg);
                })
            },
            changeEditStatus({id,status}){
                let json = {time_id:id,status:status==0?1:0};
                console.log(json);
                this.$http.post("{!!yzWebFullUrl('plugin.reserve-simple.admin.workTime.changeStatus')!!}",json).then(({data:{result,msg}})=>{
                    if(result==1){
                        this.$message.success(msg);
                        this.getTime_list(this.work_date);
                    }
                    else  this.$message.error(msg);
                })
            },
            dateClose(){
                this.getData();
                this.$forceUpdate();
            }
        }
    })
</script>
@endsection