<template>
    <div class="container">
        <el-card style="min-height:80vh;padding:15px">
            <div class="flex flex_end">
                <el-button type="primary" size="mini" @click="$router.back()">返回上一级</el-button>
            </div>
            <tab-pane :activeName="activeName" :thirdList="thirdList"></tab-pane>
            <div class="mt20">
                <div>考勤组名称</div>
                <el-input placeholder="请输入考勤组名称" v-model="setParams.groupName" style="width:220px" class="mt10"></el-input>
            </div>
            
            <div class="flex flex-align-center mt20">
                <div>考勤人员</div>
                <el-button type="text" class="ml20" @click="drawershow('drawer1')">设置</el-button>
            </div>

            <div class="flex flex-align-center mt10" style="color:#999;font-size:14px">
                <div>参与考勤人员</div>
                <div class="ml20">未设置</div>
            </div>

            <div class="flex flex-align-center mt10" style="color:#999;font-size:14px">
                <div>无需考勤人员</div>
                <div class="ml20">未设置</div>
            </div>
            
            <div style="height:20px"></div>

            <div class="flex flex-align-center mt20">
                <div>考勤组负责人</div>
                <el-button type="text" class="ml20" @click="drawershow('drawer2')">设置</el-button>
            </div>

            <div class="flex flex-align-center mt10" style="color:#999;font-size:14px">
                <div>主负责人</div>
                <div class="ml20">未设置</div>
            </div>
            <div class="flex flex-align-center mt10" style="color:#999;font-size:14px">
                <div>子负责人</div>
                <div class="ml20">未设置</div>
            </div>
            <div class="flex flex-align-center mt10" style="color:#999;font-size:14px">
                <div>子负责人权限</div>
                <div class="ml20">未设置</div>
            </div>
            <div style="height:20px"></div>

            <div class="flex flex-align-center mt20">
                <div>考勤时间</div>
                <el-button type="text"  class="ml20" @click="drawershow('drawer3')">设置</el-button>
            </div>
            <div class="flex flex-align-center mt10" style="color:#999;font-size:14px">
                <div>考勤类型</div>
                <div class="ml20">未设置</div>
            </div>
            <div class="flex flex-align-center mt10" style="color:#999;font-size:14px">
                <div>工作日设置</div>
                <div class="ml20">未设置</div>
            </div>

            <div style="height:20px"></div>

            <div class="flex flex-align-center mt20">
                <div>打卡方式</div>
                <el-button type="text" class="ml20" @click="drawershow('drawer4')">设置</el-button>
            </div>
            
            <div class="flex flex-align-center mt10" style="color:#999;font-size:14px" 
            v-if="setParams.attendanceType.length == 0">
                <div>考勤方式</div>
                <div class="ml20">未设置</div>
            </div>
            <div class="mt20">
                <el-button type="primary">保存设置</el-button>
                <el-button>全部重置</el-button>
            </div>
        </el-card>
        <!-- 设置考勤人员 -->
        <el-drawer
        title="考勤人员"
        :beforeClose="closedrawer"
        :visible.sync="drawer"
        direction="rtl">
            <div style="padding:20px">
                <!-- 考勤人员 -->
                <div v-if="drawer1">
                    <div>参与考勤人员(0)</div>
                    <el-input @focus="selectGroup()" style="width:220px" size="mini" placeholder="请选择"></el-input>
                </div>
                <div class="mt10" v-if="drawer1">
                    <div>无需考勤人员(0)</div>
                    <el-input @focus="selectGroup()" style="width:220px" size="mini" placeholder="请选择"></el-input>
                </div>
                <!-- 考勤组 -->
                <div class="mt10" v-if="drawer2">
                    <div>考勤组负责人：</div>
                    <el-select></el-select>
                </div>
                <div class="mt10" v-if="drawer2">
                    <div>主负责人：</div>
                    <el-select></el-select>
                </div>
                <div class="mt10" v-if="drawer2">
                    <div>子负责人：</div>
                    <el-select></el-select>
                </div>
                <div class="mt10" v-if="drawer2">
                    <div>子负责人权限：</div>
                    <el-select>
                        <el-option></el-option>
                    </el-select>
                </div>
                <!-- 考勤时间 -->
                <div class="mt20" v-if="drawer3">
                    <el-radio-group v-model="setParams.type" @change="changeRadio">
                        <div class="mt10" v-for="(item,index) in paibanType" :key="index">
                           <el-radio :label="item.value">{{item.label}}</el-radio>
                           <div class="tips">{{item.des}}</div>
                        </div> 
                    </el-radio-group>
                </div>
                
                <div class="mt20" v-if="drawer3">
                    
                    <!-- 固定班次设置 -->
                    <div v-if="setParams.type == 1">
                        <div>工作日设置：</div>
                        <div class="mt10">
                            <el-tag type="primary">快捷设置班次</el-tag>
                            <span class="ml20">班次名称：</span>
                            <el-button type="text" @click="changeBanci('1')">更改班次</el-button>
                        </div>
                        <!-- 班次表 -->
                        <el-table :data="weekList">
                            <el-table-column label="工作日"></el-table-column>
                            <el-table-column label="班次时间段"></el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button type="text" @click="changeBanci(scope.row)">更改班次</el-button>
                                </template>
                            </el-table-column>
                        </el-table>                        
                    </div>


                    <!-- 自用工时设置 -->
                    <div v-if="setParams.type == 3">
                        <div class="mt20">工作日</div>
                        <div class="mt10">
                            <el-checkbox-group v-model="week">
                                <el-checkbox label="">周一</el-checkbox>
                                <el-checkbox label="">周二</el-checkbox>
                                <el-checkbox label="">周三</el-checkbox>
                                <el-checkbox label="">周四</el-checkbox>
                                <el-checkbox label="">周五</el-checkbox>
                                <el-checkbox label="">周六</el-checkbox>
                                <el-checkbox label="">周日</el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div class="mt20">工作时长</div>
                        <div class="mt10">
                            <el-input style="width:100px"></el-input>
                            <span class="ml20">小时</span>
                        </div>                        
                    </div>


                    <div class="mt10">
                        <el-checkbox>法定节假日自动排休</el-checkbox>
                    </div>
                    <div class="mt10">
                        <div>特殊日期</div>
                    </div>
                    <div class="mt10">
                        <el-button @click="mustDaka = true">+新增必须打卡的日期</el-button>
                    </div>
                    <div class="mt10">
                        <el-button @click="noneedDaka = true">+新增无需打卡的日期</el-button>
                    </div>
                </div>
                <div class="mt20"  v-if="drawer4">
                    <div>考勤方式</div>
                    <el-checkbox-group v-model="setParams.attendanceType">
                        <div class="mt10" v-for="(item,index) in attendanceType" :key="index">
                            <el-checkbox :label="item.value">{{item.label}}</el-checkbox>   
                        </div>
                    </el-checkbox-group>
                </div>
            </div>
        </el-drawer>        
        <!-- 选择成员 -->
        <el-dialog :visible.sync="isshowgroup" title="选择人员">
            <div>
                <div class="titles">选择部门</div>
                <el-scrollbar style="height: 100%">
                    <el-tree
                        size="mini"
                        ref="siteTree"
                        :data="areaData"
                        id="el-tree"
                        node-key="id"
                        indent="4"
                        :props="treeProps"
                        :load="loadNode"
                        highlight-current
                        default-expand-all
                        :expand-on-click-node="false"
                        :render-content="renderContent"
                        @node-click="handleNodeClick"
                    >
                    </el-tree>
              </el-scrollbar>
            </div>
        </el-dialog>

        <!-- 选择班次 -->
        <el-dialog :visible.sync="isshowBanci" title="选择班次">
            <div>
                选择班次
            </div>
        </el-dialog>

        <!-- 新增必须打卡时间 -->
        <el-dialog :visible.sync="mustDaka" title="新增必须打卡日期">
            <div>
                <span>选择日期</span>
                <el-date-picker type="date" placeholder="年/月/日"></el-date-picker>
            </div>
            <div>
                选择班次
            </div>
        </el-dialog>
        
        <!-- 新增无需打卡时间 -->
        <el-dialog :visible.sync="noneedDaka" title="新增无需打卡日期">
            <div>
                <span>选择添加方式</span>
                <el-radio-group class="ml20">
                    <el-radio label="">单个日期</el-radio>
                    <el-radio label="">时间段</el-radio>
                </el-radio-group>                
            </div>
            <div>
                <span>选择日期</span>
                <!-- 单个日期 -->
                <el-date-picker type="date" class="ml20"></el-date-picker>

                <!-- 日期段 -->
                <el-date-picker
                type="daterange"
                class="ml20"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
                </el-date-picker>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import tabPane from '@/components/tabPane.vue'
    export default {
        components: {
            tabPane
        },
        created(){
            this.getdata()
            this.getresponsiable()
        },
        methods: {
            changeRadio(value){
                console.log(value)
            },
            changeBanci(row){
                console.log(row)
                this.isshowBanci = true
            },
            selectGroup(){
                this.isshowgroup = true
            },
            drawershow(from){
                switch(from){
                    case 'drawer1':
                      this.drawer = true
                      this.drawer1 = true
                      break;
                    case 'drawer2':
                      this.drawer = true
                      this.drawer2 = true
                      break;
                    case 'drawer3':
                      this.drawer = true
                      this.drawer3 = true
                      break;
                    case 'drawer4':
                      this.drawer = true
                      this.drawer4 = true
                      break;
                    default:
                      break;
                }
            },
            closedrawer(){
                this.drawer = false
                this.drawer1 = false
                this.drawer2 = false
                this.drawer3 = false
                this.drawer4 = false
            },
            getdata(){
                this.$post('/attendance/group/add').then(res => {
                    if(res.code == 1){
                        // 打卡类型
                        this.attendanceType = [] 
                        let data = res.data.dict//字典函数
                        for(let key in data.attendanceType){
                            let obj = {
                                label:data.attendanceType[key],
                                value:key
                            }
                            this.attendanceType.push(obj)
                        }
                        // 类型
                        let type = []
                        for(let key in data.type){
                            let obj = {
                                label:data.type[key],
                                value:key
                            }
                            type.push(obj)
                        }

                        type.forEach((item,index) => {
                            let res = this.paibanType.filter(item1 => item1.label.indexOf(item.label) != -1)
                            if(res.length>0){
                                res[0].value = type[index].value
                            }
                        })
                        
                        console.log(this.paibanType)
                    }
                })
            }
        },
        data() {
            return {
                size:"small",
                column:2,
                toString:[
                    "type",
                ],
                toArrays: [

                ],
                toDate: [

                ],
                activeName:'/attendance/group/view',
                thirdList:[
                    {
                        name:'新增考勤组',
                        path:'/attendance/group/view'
                    }
                ],
                drawer1:false,
                drawer2:false,
                drawer3:false,
                drawer4:false,
                setParams:{
                    groupName:'',
                    personNum:'',
                    responsiblePerson:'',
                    type:'',//考勤方式
                    attendanceTime:'',
                    remark:'',
                    attendanceType:[]//打卡类型
                },
                drawer:false,
                weekList:[],
                isshowBanci:false,//班次展示
                isshowgroup:false,//人员选择
                mustDaka:false,//必须打卡设置
                noneedDaka:false,//无需打卡
                areaData:[],
                type:[],
                week:[],
                reqForm:{},
                attendanceType:[],
                paibanType:[
                    {
                        label:'固定班制（固定时间上下班）',
                        value:'1',
                        des:'考勤组中所有人按照相同的时间打卡，适用于办公室坐班，例如朝九晚五'
                    },
                    {
                        label:'排班制（按排班上下班）',
                        value:'2',
                        des:'自定义设置每人的班次，适用于工厂、门店等，例如三班倒'
                    },
                    {
                        label:'自由工时（不固定时间上下班）',
                        value:'3',
                        des:'上下班时间不固定，可随时打卡，适用于销售以及装修、家政等计时工'
                    }
                ]
            }
        }
    }
</script>
<style lang="less">
.container{
    font-size: 15px;
}
.labelClass{
    width: 200px;
}
.el-descriptions__body{
    margin-left: 5px;
    margin-right: 5px;
    color: #606266;
    background-color: #FFF;
}
.contentClass{
    width: 600px;
}
.titles{
  color: #409EFF;
  font-size: 16px;
  display: flex;
  align-items: center;
}
.titles::before{
  content: '';
  width:6px;
  height: 16px;
  background-color: #409EFF;
  display: inline-block;
  margin-right: 10px;
}
.tips{
    color: #999;
    font-size: 12px;
}
</style>