<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="drawer1= true">设置</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="drawer2= true">设置</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="drawer3= true">设置</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="drawer4= true">设置</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="考勤人员"
        :visible.sync="drawer"
        direction="rtl"
        :before-close="handleClose">
            <!-- 考勤人员 -->
            <div>
                <div>参与考勤人员(0)</div>
                <el-input @focus="selectGroup()" size="mini" placeholder="请选择"></el-input>
            </div>
            <div>
                <div>无需考勤人员(0)</div>
                <el-input @focus="selectGroup()" size="mini" placeholder="请选择"></el-input>
            </div>
            <!-- 考勤组 -->
            <div>
                <span>考勤组负责人：</span>
                <el-select></el-select>
            </div>
            <div>
                <span>主负责人：</span>
                <el-select></el-select>
            </div>
            <div>
                <span>子负责人：</span>
                <el-select></el-select>
            </div>
            <div>
                <span>子负责人权限：</span>
                <el-select>
                    <el-option></el-option>
                </el-select>
            </div>
            <!-- 考勤时间 -->
            <div>
                <el-radio-group>
                    <el-radio label="">固定班制（固定时间上下班）</el-radio>
                    <el-radio label="">排班制（按排班上下班）</el-radio>
                    <el-radio label="">自由工时（不固定时间上下班）</el-radio>
                </el-radio-group>
            </div>
            <div>
                <div>工作日设置：</div>
                <div>
                    <el-tag type="primary">快捷设置班次</el-tag>
                    <span>班次名称：</span>
                    <el-button type="text">更改班次</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>
                    <el-checkbox>法定节假日自动排休</el-checkbox>
                </div>
                <div>
                    <div>特殊日期</div>
                </div>
                <div class="mt10">
                    <el-button>+新增必须打卡的日期</el-button>
                </div>
                <div class="mt10">
                    <el-button>+新增无需打卡的日期</el-button>
                </div>
                <div>
                    <div>考勤方式</div>
                    <el-checkbox-group v-model="type">
                        <el-checkbox label="地点打卡"></el-checkbox>
                        <el-checkbox label="Wi-Fi打卡"></el-checkbox>
                        <el-checkbox label="蓝牙打卡"></el-checkbox>
                        <el-checkbox label="考勤机打卡"></el-checkbox>
                    </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>
    </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
            }
        },
        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:true,
                weekList:[],
                isshowBanci:false,//班次展示
                isshowgroup:false,
                areaData:[],
                type:[]
            }
        }
    }
</script>
<style lang="less">
.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;
}
</style>