<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" @change="resetList">
            <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" v-if="type == 'import'">
            <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-20">
                        <!-- <el-button type="primary" @click.stop="handleUpload">选择文件</el-button> -->
                        <el-upload
                            class="upload-demo"
                            ref="upload"
                            action="http://www.gicdev.com/haoban-manage-web/emp/upload"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-change="getChange"
                            :multiple="false"
                            :file-list="fileList"
                            :auto-upload="false">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <div slot="tip" class="el-upload__tip">文件格式必须为xls或xlsx格式</div>
                        </el-upload>
                        <!-- <p class="warming">文件格式必须为xls或xlsx格式</p> -->
                    </div>
            </div>
            <div class="up-btn-div">
                <el-button type="primary" @click="submitUpload" :disabled="fileList.length == 0">上传</el-button>
            </div>
        </div>
        <div class="handle-area import" v-else-if="type == 'export'">
            <div class="step-div" style="margin-bottom :90px;">
                <span class="ft-large">①</span>导出所有员工信息
                <a class="d-u-btn">
                    <el-button type="primary" @click="downloadClerks">下载<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-20">
                        <!-- <el-button type="primary" @click.stop="handleUpload">选择文件</el-button> -->
                        <el-upload
                            class="upload-demo"
                            ref="uploadEdit"
                            :action="url"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-change="getChange"
                            :multiple="false"
                            :file-list="fileList"
                            :auto-upload="false">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <div slot="tip" class="el-upload__tip">文件格式必须为xls或xlsx格式</div>
                        </el-upload>
                        <!-- <p class="warming">文件格式必须为xls或xlsx格式</p> -->
                    </div>
            </div>
            <div class="up-btn-div">
                <el-button type="primary" @click="submitUpload" :disabled="fileList.length == 0">上传</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import uploadExcelComponent from "components/uploadExcel/index";
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default {
    name: "employee-io",
    components: {
        uploadExcelComponent
    },
    data() {
        var local = window.location.origin;
        if (local.indexOf('localhost')!= -1) {
        local = 'http://www.gicdev.com';
        }
        return {
            type: "import",
            fileList: [],
            url: local + "/haoban-manage-web/emp/upload"
        };
    },
    methods: {
        resetList(val) {
            this.fileList = [];
        },
        getErrorNote() {
            let ths = this;
            let params = {
                departmentId: ths.$route.query.departmentId
            };
            getRequest("/haoban-manage-web/error-log-page", params)
            .then(res => {
                console.log(res);
            })
            .catch(e => {
                ths.$message.error({
                    message: e.message
                })
            });
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        submitUpload() {
            this.$refs.upload.submit();
        },
        getChange(file, fileList) {
            console.log(file, fileList);
            this.fileList = fileList;
        },
        downloadClerks() {
            let ths = this;
            let params = {
                departmentId: ths.$route.query.departmentId
            };
            getRequest("/haoban-manage-web/emp/export", params)
            .then(res => {
                console.log(res);
            })
            .catch(e => {
                ths.$message.error({
                    message: e.message
                })
            });
        }
    },
    beforeMount() {
        this.getErrorNote();
    }
}
</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;
                margin-right: 10px;
                vertical-align: middle;
                .iconfont {
                    margin-left: 5px;
                }
                .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;
            }
        }
        .up-btn-div {
            text-align: center;
            margin-top: 20px;
        }
    }
}
</style>


