<template>
    <div class="main-contain">
        <div class="position">
            <bread-crumb :crumbs="crumbs"></bread-crumb>
            <div style="display:flex;align-items:center">
                <el-button type="primary" @click="newVisible = true">新增</el-button>
            </div>
        </div>
        <div class="app-container">
            <el-table :data="tableData" border style="width: 100%" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)', color: '#606266'}" :row-style="{ color: '#303133' }">
                <el-table-column prop="name" label="序号" width="80" align="center" type="index"></el-table-column>
                <el-table-column prop="name" label="班种名称" width="100" align="center">
                    <template slot-scope="scope">
                        {{scope.row.class_name}}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="班种属性" width="100" align="center">
                    <template slot-scope="scope">
                        {{scope.row.class_attributes}}
                    </template> 
                </el-table-column>
                <el-table-column prop="name" label="班种时间" width="270" align="center">
                   <template slot-scope="scope">
                     <span>{{scope.row.timeone_start}} - {{scope.row.timeone_type}}{{scope.row.timeone_end}}</span>
                     <span>&nbsp;&nbsp;</span>
                     <span v-if="scope.row.timetwo_start!=''">{{scope.row.timetwo_start}} - {{scope.row.timetwo_type}}{{scope.row.timetwo_end}}</span> 
                    </template> 
                </el-table-column>
                <el-table-column prop="name" label="时长" width="80" align="center">
                    <template slot-scope="scope">
                        {{scope.row.work_time}}
                    </template> 
                </el-table-column>
                <el-table-column prop="name" label="备注" align="center">
                     <template slot-scope="scope">
                        {{scope.row.remarks}}
                    </template> 
                </el-table-column>
                <el-table-column prop="name" label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="primary"
                        @click="handleEdit(scope.row.id)">编辑</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row.id,scope.row.user_org_id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

             <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="10"
                background
                style="margin-top:20px;float: right"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
             ></el-pagination>


            <el-dialog
                title="新建班种"
                width="800px"
                :visible.sync="newVisible"
            >
             <el-form :model="form" :rules="rules" ref="form" label-width="90px">
                <el-form-item label="班种名称 : " required prop="class_name">
                    <el-input v-model.trim="form.class_name" placeholder="" ></el-input>
                </el-form-item>
                <el-form-item label="班种属性 : " required  prop="class_attributes">
                    <el-select v-model="form.class_attributes" placeholder="请选择">
                        <el-option
                        v-for="item in typeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班种时间1 : " required prop="timeone_start" label-width="100px">
                    <el-time-select
                    style="width:140px;"
                    v-model="form.timeone_start"
                    :picker-options="{
                    start: '01:00',
                    step: '00:15',
                    end: '24:00'
                    }"
                    placeholder="选择时间">
                    </el-time-select>
                     ~
                    <el-select style="width:100px;" v-model="form.timeone_type" placeholder="请选择">
                        <el-option
                        v-for="item in dayOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-time-select
                    @change="changtimeTwo"
                    style="width:140px;"
                    v-model="form.timeone_end"
                    :picker-options="{
                    start: '01:00',
                    step: '00:15',
                    end: '24:00'
                    }"
                    placeholder="选择时间">
                    </el-time-select>
                   <div class="el-form-item__error" v-show="showError">
                      请选择班种时间1
                   </div>
                </el-form-item>
              
                <el-form-item label="班种时间2 : " prop="type">
                    <el-time-select
                    style="width:140px;"
                    v-model="form.timetwo_start"
                    :picker-options="{
                    start: '01:00',
                    step: '00:15',
                    end: '24:00'
                    }"
                    placeholder="选择时间">
                    </el-time-select> ~
                    <el-select style="width:100px;" v-model="form.timetwo_type" placeholder="请选择">
                        <el-option
                        v-for="item in dayOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-time-select
                    @change="changtime"
                    style="width:140px;"
                    v-model="form.timetwo_end"
                    :picker-options="{
                    start: '01:00',
                    step: '00:15',
                    end: '24:00'
                    }"
                    placeholder="选择时间">
                    </el-time-select>
                </el-form-item>
                <el-form-item label="上班时长 : ">
                    <el-input v-model="form.work_time" placeholder="" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="备注 : ">
                    <el-input
                    type="textarea"
                    v-model="form.remarks"
                    placeholder=""
                    resize="none"
                    rows="2"
                    ></el-input>
                </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                <el-button @click="newVisible=false">取 消</el-button>
                <el-button type="primary" @click="submitAction('form')">保 存</el-button>
                </div>
            </el-dialog>


             <el-dialog
                title="编辑班种"
                width="800px"
                :visible.sync="EditNewVisible"
            >
             <el-form :model="form" :rules="rules" ref="form" label-width="90px">
                <el-form-item label="班种名称 : " required prop="class_name">
                    <el-input v-model="form.class_name" placeholder="" ></el-input>
                </el-form-item>
                <el-form-item label="班种属性 : " required  prop="class_attributes">
                    <el-select v-model="form.class_attributes" placeholder="请选择">
                        <el-option
                        v-for="item in typeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班种时间1 : " required prop="timeone_start" label-width="100px">
                    <el-time-select
                    style="width:140px;"
                    v-model="form.timeone_start"
                    :picker-options="{
                    start: '01:00',
                    step: '00:15',
                    end: '24:00'
                    }"
                    placeholder="选择时间">
                    </el-time-select>
                     ~
                    <el-select style="width:100px;" v-model="form.timeone_type" placeholder="请选择">
                        <el-option
                        v-for="item in dayOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-time-select
                    @change="changtime"
                    style="width:140px;"
                    v-model="form.timeone_end"
                    :picker-options="{
                    start: '01:00',
                    step: '00:15',
                    end: '24:00'
                    }"
                    placeholder="选择时间">
                    </el-time-select>
                   <div class="el-form-item__error" v-show="showError">
                      请选择班种时间1
                   </div>
                </el-form-item>
              
                <el-form-item label="班种时间2 : " prop="type">
                    <el-time-select
                    style="width:140px;"
                    v-model="form.timetwo_start"
                    :picker-options="{
                    start: '01:00',
                    step: '00:15',
                    end: '24:00'
                    }"
                    placeholder="选择时间">
                    </el-time-select> ~
                    <el-select style="width:100px;" v-model="form.timetwo_type" placeholder="请选择">
                        <el-option
                        v-for="item in dayOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-time-select
                    @change="changtimeTwo"
                    style="width:140px;"
                    v-model="form.timetwo_end"
                    :picker-options="{
                    start: '01:00',
                    step: '00:15',
                    end: '24:00'
                    }"
                    placeholder="选择时间">
                    </el-time-select>
                </el-form-item>
                <el-form-item label="上班时长 : ">
                    <el-input v-model="form.work_time" placeholder="" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="备注 : ">
                    <el-input
                    type="textarea"
                    v-model="form.remarks"
                    placeholder=""
                    resize="none"
                    rows="2"
                    ></el-input>
                </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                <el-button @click="EditNewVisible=false">取 消</el-button>
                <el-button type="primary" @click="UpdateSubmitAction('form')">保 存</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>


<script>
import {saveDoctorSchedules,getDoctorScheduleList,getScheduleDetail,UpdateSchedule,deleteScheduleById } from '@/api/doctorSchedule'
import BreadCrumb from '@/xt_pages/components/bread-crumb'
import { parseTime } from '@/utils'
export default {
    components:{
        BreadCrumb
    },
    data(){
        return{
            crumbs: [
                { path: false, name: '医护排班' },
                { path: '/medicalScheduling/index', name: '班种列表' }
            ],
            tableData: [],
            newVisible:false,
            EditNewVisible:false,
            form: {
                id: 0,
                class_name: "",
                class_attributes:'',
                timeone_start:'',
                timeone_type:'',
                timeone_end:'',
                timetwo_start:'',
                timetwo_type:'',
                timetwo_end:'',
                work_time:'',
                remarks: "",
                user_org_id:0,
            },
            rules: {
              class_name: [{ required: true, message: "请输入班种名称" }],
              class_attributes: [{ required: true, message: "请选择班种属性"}],  
              timeone_start: [{ required: true, message: "请选择班种时间1"}], 
              timeone_type: [{ required: true, message: "请选择班种时间1类型"}], 
              timeone_end: [{ required: true, message: "请选择班种时间1结束时间"}], 
            },
            typeOptions:[{ value: 1, label: '出勤'},{ value: 2, label: '缺勤'}],
            dayOptions:[{ value: 1, label: '当日'},{ value: 2, label: '次日'}],
            showError:false,
            limit:10,
            page:1,
            total:0,
            minute:0,
        }
    },
    methods:{
        submitAction(formName){
         this.$refs[formName].validate((valid=>{
            if(valid){
                if(this.form.timeone_type ==""){
                    this.showError = true
                    return false
                 }
           
                if(this.form.timeone_end == ""){
                     this.showError = true
                     return false
                 }
                 
                 const params = {
                    class_name:this.form.class_name,
                    class_attributes:this.form.class_attributes,
                    timeone_start:this.form.timeone_start,
                    timeone_type:this.form.timeone_type,
                    timeone_end:this.form.timeone_end,
                    timetwo_start:this.form.timetwo_start,
                    timetwo_type:this.form.timetwo_type,
                    timetwo_end:this.form.timetwo_end,
                    work_time:this.form.work_time,
                    remarks:this.form.remarks,
                    minute:this.minute,
                 }
                 console.log("params",params)
                saveDoctorSchedules(params).then(response=>{
                  if(response.data.state == 1){
                    var schedules = response.data.data.schedules
                    this.newVisible = false
                    this.$message.success("保存成功")
                    this.getList()
                    this.form.class_name = ""
                    this.form.class_attributes = ""
                    this.form.timeone_start = ""
                    this.form.timeone_type =""
                    this.form.timeone_end = ""
                    this.form.timetwo_start = ""
                    this.form.timetwo_type = ""
                    this.form.timetwo_end=""
                    this.form.work_time = ""
                    this.form.remarks = ""
                  }else{
                     this.$message.error("班种名称已存在")
                  }
               })
             }
          }))
        },
        getList(){
            const params = {
              limit:this.limit,
              page:this.page,         
            }
           getDoctorScheduleList(params).then(response=>{
              if(response.data.state == 1){
                 var schedules = response.data.data.schedules
                 for(let i=0;i<schedules.length;i++){
                    if(schedules[i].class_attributes == 1){
                        schedules[i].class_attributes ="出勤"
                    }
                    if(schedules[i].class_attributes == 2){
                        schedules[i].class_attributes ="缺勤"
                    }

                    if(schedules[i].timeone_type == 0){
                       schedules[i].timeone_type = ""
                    }
                    if(schedules[i].timeone_type == 1){
                       schedules[i].timeone_type = "当日"
                    }
                    if(schedules[i].timeone_type == 2){
                       schedules[i].timeone_type = "次日"
                    }
                    if(schedules[i].timetwo_type == 0){
                       schedules[i].timetwo_type = ""
                    }
                    if(schedules[i].timetwo_type == 1){
                       schedules[i].timetwo_type = "当日"
                    }
                    if(schedules[i].timetwo_type == 2){
                       schedules[i].timetwo_type = "次日"
                    }
                 }
             
                 this.tableData = schedules
                 var total =  response.data.data.total
                 this.total = total
              }
           })
        },
       handleSizeChange(limit) {
        this.limit = limit;
        this.getList();
      },
        handleCurrentChange(page) {
         this.page = page;
         this.getList();
      },

      handleEdit(id){
        this.EditNewVisible = true
        getScheduleDetail(id).then(response=>{
           if(response.data.state == 1){
             var scheduleDetail = response.data.data.scheduleDetail
             this.form.id = scheduleDetail.id
             this.form.class_name = scheduleDetail.class_name
             this.form.class_attributes = scheduleDetail.class_attributes
             this.form.timeone_start = scheduleDetail.timeone_start
             this.form.timeone_end = scheduleDetail.timeone_end
             this.minute = scheduleDetail.minute
             if(scheduleDetail.timeone_type == 0){
                this.form.timeone_type = ""
             }else{
                this.form.timeone_type = scheduleDetail.timeone_type
             }       
             this.form.timetwo_start =scheduleDetail.timetwo_start
             this.form.timetwo_end = scheduleDetail.timetwo_end
              if(scheduleDetail.timetwo_type == 0){
                this.form.timetwo_type = ""
             }else{
                this.form.timetwo_type = scheduleDetail.timetwo_type
             }
             this.form.work_time = scheduleDetail.work_time
             this.form.remarks = scheduleDetail.remarks
             this.form.user_org_id = scheduleDetail.user_org_id
             this.$forceUpdate()
           }
        })
      },
      UpdateSubmitAction(formName){
           if(this.form.timeone_type ==""){
              this.showError = true
              return false
           }
           
           if(this.form.timeone_end == ""){
              this.showError = true
              return false
           }
          const params = {
             id:this.form.id,
             class_name:this.form.class_name,
             class_attributes:this.form.class_attributes,
             timeone_start:this.form.timeone_start,
             timeone_type:this.form.timeone_type,
             timeone_end:this.form.timeone_end,
             timetwo_start:this.form.timetwo_start,
             timetwo_type:this.form.timetwo_type,
             timetwo_end:this.form.timetwo_end,
             work_time:this.form.work_time,
             remarks:this.form.remarks,
             user_org_id:this.form.user_org_id,
             minute:this.minute,
         }
        this.$refs[formName].validate(valid=>{
          if(valid){
            UpdateSchedule(params).then(response=>{
             if(response.data.state == 1){
                var schedules =  response.data.data.schedules
                 this.$message.success("修改成功")
                 this.EditNewVisible = false
                 this.getList()
               }else{
                   this.$message.error("班种名称已存在")
               }
             })
          }
        })
      },
      handleDelete(id,orgid){
        this.$confirm(
          '确认要删除所选记录吗? <br>删除后,信息将无法恢复',
          '删除提示',
          {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(()=>{
           deleteScheduleById(id,orgid).then(response=>{
              if(response.data.state == 1){
                var msg = response.data.data.msg
                this.$message.success("删除成功")
                this.getList()
              }else{
                this.$message.error("该班种已存在排班,不能删除")
              }
           }) 
        })
      },
     timeDifference(startTime,endTime){ 
        var start1=startTime.split(":");
        var startAll=parseInt(start1[0]*60)+parseInt(start1[1]);   
        var end1=endTime.split(":");
        var endAll=parseInt(end1[0]*60)+parseInt(end1[1]);
         return endAll - startAll
      },
      timeStamp(StatusMinute){	
        var day=parseInt(StatusMinute/60/24);
        var hour=parseInt(StatusMinute/60%24);
        var min= parseInt(StatusMinute % 60);
        StatusMinute="";
        if (day > 0)
        {
            StatusMinute= day + "天";
        } 
        if (hour>0)
        {
            StatusMinute += hour + "小时";
        } 
        // if(hour == 0){
        //    StatusMinute += hour + "小时"
        // }
        if (min>0)
        {
            StatusMinute += parseFloat(min) + "分钟";
        }
            return StatusMinute;
        },
     changtime(){
         //计算时长
        var longtime = 0
        var timeone = 0
        var timetwo = 0
        //时间选择1的时间差
       if(this.form.timeone_type == 1){
          var timeone = this.timeDifference(this.form.timeone_start,this.form.timeone_end)
           timeone = timeone
       }

       if(this.form.timeone_type == 2){
          var hour = this.form.timeone_end.split(":")
          var hous = parseInt(hour[0]) + 24
          var oneHours = hous.toString() +":"+ hour[1]
          var timeone =  this.timeDifference(this.form.timeone_start,oneHours)
         timeone = timeone
        }
     
                
        //时间选择2的时间差
        if(this.form.timetwo_type == 1){
            var timetwo = this.timeDifference(this.form.timetwo_start,this.form.timetwo_end)
            timetwo = timetwo
        }
        if(this.form.timetwo_type == 2){
            var hour = this.form.timetwo_end.split(":")
            var hous = parseInt(hour[0]) + 24
            var oneHours = hous.toString() +":"+ hour[1]
            var timetwo =  this.timeDifference(this.form.timetwo_start,oneHours)
            timetwo = timetwo
        }
                  
        longtime = timeone + timetwo
        this.minute = longtime
        this.form.work_time = this.timeStamp(longtime)
     },
     changtimeTwo(){
           //计算时长
        var longtime = 0
        var timeone = 0
        var timetwo = 0
        //时间选择1的时间差
       if(this.form.timeone_type == 1){
          var timeone = this.timeDifference(this.form.timeone_start,this.form.timeone_end)
           timeone = timeone
       }
       if(this.form.timeone_type == 2){
          var hour = this.form.timeone_end.split(":")
          var hous = parseInt(hour[0]) + 24
          var oneHours = hous.toString() +":"+ hour[1]
          var timeone =  this.timeDifference(this.form.timeone_start,oneHours)
         timeone = timeone
        }
                
        //时间选择2的时间差
        if(this.form.timetwo_type == 1){
            var timetwo = this.timeDifference(this.form.timetwo_start,this.form.timetwo_end)
            timetwo = timetwo
        }
        if(this.form.timetwo_type == 2){
            var hour = this.form.timetwo_end.split(":")
            var hous = parseInt(hour[0]) + 24
            var oneHours = hous.toString() +":"+ hour[1]
            var timetwo =  this.timeDifference(this.form.timetwo_start,oneHours)
            timetwo = timetwo
        }
                  
        longtime = timeone + timetwo
        console.log('longtime',longtime)
        this.minute = longtime
        this.form.work_time = this.timeStamp(longtime) 
     }
    },
    created(){
        //获取班种列表
        this.getList()
    },
}
</script>
<style scoped>
  .el-form-item__error{
    color: #F56C6C;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 0;
  }
</style>