<template>
    <div class="io-container">
        <ul class="tip-area">
            <li class="tip">由于你的企业未进行企业认证，通讯录最多只能导入200人以内的员工，如有超出可先进行<a class="a-href">企业认证</a></li>
            <li class="tip">如需更新已存在的员工，可逐个进行修改，或请先导出通讯录，在导出表格里进行修改</li>
            <li class="tip">行政架构通讯录的导入规则和门店架构通讯录的导入规则有些区别，详细请看导入的表格说明</li>
            <li class="tip">姓名必须和好办企业通讯录中的员工姓名保持一致，手机号必须为员工注册好办的手机号</li>
            <li class="tip">员工档案导入时，直接以手机号去做匹配，通讯录中不存在的将无法导入（模板中配置的部门、职位、code，这些字段信息请保持与企业通讯录中一致，这几个字段的信息将不会修改通讯录的信息，直接取该成员对应的通讯录的字段信息）</li>
            <li class="tip">如果想要新增字段，可在后台档案设置中增加，再导入模板</li>
            <li class="tip">字段类型为图片上传、多选的字段无法导入、导出</li>
            <li class="tip">确保导入的表头字段和后台配置表头字段的名称一致（模板下载时间不可修改）</li>
            <li class="tip">由于数据量可能较大，每次最多导入2000条员工档案，若超过只取前2000条，可以分多次导入</li>
        </ul>
        <el-radio-group v-model="type" class="m-t-20">
            <el-radio-button label="import">导入通讯录</el-radio-button>
            <el-radio-button label="export">导出/修改通讯录</el-radio-button>
            <el-radio-button label="note">错误记录</el-radio-button>
        </el-radio-group>
        <div class="handle-area import">
            <!-- <el-steps direction="vertical" :active="2" style="height: 200px;">
                <el-step>
                    <template slot="title">
                        <div>
                            下载员工通讯录模板，统一收集员工信息<a href="http://www.gicdev.com/haoban-manage-web/excel/通讯录-行政架构导入模板.xls"><span class="download-btn">下载<i class="iconfont icon-icon_yunxiazai"></i></span></a>
                        </div>
                    </template>
                    <el-button type="primary">下载<i class="iconfont icon-icon_yunxiazai"></i></el-button>
                </el-step>
                <el-step>
                    <template slot="title">
                        <div>
                            上传收集完毕的员工信息表
                            <div style="display:inline-block;vertical-align: middle;">
                                <span class="download-btn">选择文件</span>
                                <p class="warming">文件格式必须为xls或xlsx格式</p>
                            </div>
                        </div>
                    </template>
                </el-step>
            </el-steps> -->
            <div class="step-div" style="margin-bottom :90px;">
                <span class="ft-large">①</span>下载员工通讯录模板，统一收集员工信息
                <a href="http://www.gicdev.com/haoban-manage-web/excel/通讯录-行政架构导入模板.xls" class="d-u-btn">
                    <el-button type="primary">下载<i class="iconfont icon-icon_yunxiazai m-l-5"></i></el-button>
                </a>
            </div>
            <div class="step-div">
                <span class="ft-large">②</span>上传收集完毕的员工信息表
                    <div class="d-u-btn m-t-30">
                        <el-button type="primary">选择文件</el-button>
                        <p class="warming">文件格式必须为xls或xlsx格式</p>
                    </div>
            </div>
            <div class="up-btn-div">
                <el-button type="primary">上传</el-button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "employee-io",
    data() {
        return {
            type: "import"
        };
    }
}
</script>
<style lang="scss">
.io-container {
    width: 100%;
    height: 538px;
    background: #fff;
    box-sizing: border-box;
    padding: 28px 32px;
    overflow: auto;
    .tip-area {
        width:100%;
        background:rgba(236,245,255,1);
        border:1px solid rgba(179,216,255,1);
        border-radius:4px;
        padding: 10px;
        font-size:13px;
        font-weight:400;
        color:rgba(96,98,102,1);
        .tip {
            line-height: 24px;
            position: relative;
            padding-left: 16px;
            &:last-child {
                margin-bottom: 0;
            }
            .radio {
                width:6px;
                height:6px;
                background:rgba(64,158,255,1);
                border-radius:50%;
            }
            &::before {
                position: absolute;
                content: "";
                width:6px;
                height:6px;
                background:rgba(64,158,255,1);
                border-radius:50%;
                top: 9px;
                left: 0;
            }
        }
    }
    .handle-area {
        height: 310px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(220,223,230,1);
        border-radius:4px;
        padding: 25px 20px;
        margin-top: 24px;
        color: #606266;
        .step-div {
            .d-u-btn {
                display:inline-block;
                margin-left: 10px;
                vertical-align: middle;
                .warming {
                    font-size:12px;
                    font-weight:400;
                    color:rgba(96,98,102,1);
                    line-height:30px;
                    margin-top: 5px;
                }
            }
            .ft-large {
                font-size: 20px;
                margin-right: 10px;
                color: #909399;
            }
        }
        // .el-step__title {
        //     font-size:16px;
        //     font-family:PingFangSC-Regular;
        //     font-weight:400;
        //     color:rgba(96,98,102,1);
        //     .download-btn {
        //         display: inline-block;
        //         width:89px;
        //         height:36px;
        //         background:rgba(64,158,255,1);
        //         border-radius:4px;
        //         color: #fff;
        //         text-align: center;
        //         line-height: 36px;
        //         margin-left: 10px;
        //         cursor: pointer;
        //         .iconfont {
        //             margin-left: 5px;
        //         }
        //     }
        //     .warming {
        //         font-size:12px;
        //         font-weight:400;
        //         color:rgba(96,98,102,1);
        //     }
        // }
        // .el-step__head.is-finish {
        //     color: rgba(96,98,102,1);
        //     border-color: rgba(96,98,102,1);
        // }
        .up-btn-div {
            text-align: center;
            margin-top: 20px;
        }
    }
}
</style>


