<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="请输入考勤组名称" 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">
                <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>
                        <div class="mt10">
                           <el-radio label="">固定班制（固定时间上下班）</el-radio>
                           <div class="tips">考勤组中所有人按照相同的时间打卡，适用于办公室坐班，例如朝九晚五</div>
                        </div>
                        <div class="mt10">
                            <el-radio label="">排班制（按排班上下班）</el-radio>
                            <div class="tips">自定义设置每人的班次，适用于工厂、门店等，例如三班倒</div>
                        </div>
                        <div class="mt10">
                            <el-radio label="">自由工时（不固定时间上下班）</el-radio>
                            <div class="tips">上下班时间不固定，可随时打卡，适用于销售以及装修、家政等计时工</div>
                        </div>
                        
                    </el-radio-group>
                </div>
                
                <div class="mt20" v-if="drawer3">
                    <!-- 固定班次设置 -->
                    <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 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 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="type">
                        <div class="mt10">
                        <el-checkbox label="地点打卡"></el-checkbox>   
                        </div>
                        <div class="mt10">
                        <el-checkbox label="Wi-Fi打卡"></el-checkbox> 
                        </div>
                        <div class="mt10">
                            <el-checkbox label="蓝牙打卡"></el-checkbox>
                        </div>
                        <div class="mt10">
                            <el-checkbox 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
        },
        methods: {
            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
            }
        },
        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:''
                },
                drawer:false,
                weekList:[],
                isshowBanci:false,//班次展示
                isshowgroup:false,//人员选择
                mustDaka:false,//必须打卡设置
                noneedDaka:false,//无需打卡
                areaData:[],
                type:[],
                week:[]
            }
        }
    }
</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>