<template>
    <div class="export-set-container">
        <div class="title">已选择字段<span>导出的列表中将按顺序显示这些字段（可拖拽排序）</span></div>
        <div class="cho-list">
            <draggable v-model="checkedList">
                <template v-for="tem in checkedList">
                    <div class="cho" v-if="tem.checked" :key="tem.fieldCode">{{tem.fieldName}}</div>
                </template>
            </draggable>
        </div>
        <div class="cho-area">
            <div class="title">选择需要导出的字段</div>
            <div class="cho-area-group">
                <div class="group-div">
                    <div class="group-title"></div>
                    <ul class="group-son-list">
                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox></ul>
                </div>
                <div class="group-div" v-for="(group, index) in tempList" :key="group.fieldCode+index">
                    <div class="group-title">{{group.title}}</div>
                    <ul class="group-son-list">
                        <template v-for="items in origin">
                            <li :key="items.fieldCode" v-if="items.parentCode == group.fieldCode">
                                <el-checkbox :label="items.fieldName" :key="items.fieldCode" v-model="items.checked" @change="checkThis(items)">{{items.fieldName}}</el-checkbox>
                            </li>
                        </template>
                    </ul>
                </div>
            </div>
        </div>
        <div class="handle-cho-btn">
            <el-button type="primary" class="export-btn" @click="exportCho" :disabled="checkedList.length < 1">导出<i class="iconfont icon-icon_yunxiazai"></i></el-button>
            <el-button @click="cancelCho">取消</el-button>
        </div>
    </div>
</template>
<script>
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
import { deepClone, formatDate } from '@/utils/index';
import draggable from 'vuedraggable'
export default {
    name: "export-set",
    components: {
        draggable
    },
    data() {
        return {
            tempList: [],
            checkList: [],
            origin: [],
            checkAll: false,
            isIndeterminate: false,
            checkedList: []
        };
    },
    methods: {
        checkThis(items) {
            console.log(items.checked);
            if (items.checked) {
                this.checkedList.push(items);
            }
        },
        handleCheckAllChange(val) {
            console.log(val);
            let ths = this;
            this.checkedList = [];
           this.origin.forEach((tem, idx) => {
                tem.checked = val;
                if (val) {
                    tem.order = idx + 1;
                }
           });
            if (val) {
                ths.checkedList = ths.origin.slice(0);
            }
        },
        getTemplate() {
            let ths = this;
            getRequest("/haoban-manage-web/record/employee-find-template", {})
            .then(res => {
                if (res.data.errorCode == 1) {
                    ths.formatTemplateList(res.data.result);
                } else {
                    ths.$message.error({
                        message: res.data.message
                    });
                }
            })
            .catch(e => {
                ths.$message.error({
                    message: e.message
                });
            });
        },
        formatTemplateList(list) {
            let ths = this;
            let fieldList = [];
            let origin = [];
            let copyData = list;
            list.forEach(tem => {
                tem.title = tem.fieldName;
                tem.name = tem.fieldName;
                tem.checked = false;
                let arr = [];
                copyData.forEach(li => {
                    if (li.parentCode == tem.fieldCode) {
                        arr.push(li);
                    }
                });
                arr.sort(function(a,b){
                    return a.sort*1-b.sort*1;
                });
                if (arr.length > 0) tem["childrens"] = arr;
                if (tem.parentCode == 0) {
                    fieldList.push(tem);
                }
            });
            fieldList.sort(function(a,b){
                return a.sort*1-b.sort*1;
            });
            fieldList.forEach(group => {
               origin = origin.concat(group.childrens); 
            });
            this.origin = origin;
            this.tempList = fieldList;
            console.log(fieldList, "模板");
        },
        cancelCho() {
            this.origin.forEach(tem => {
                tem.checked = false;
            });
            this.$emit("cancelCho");
        },
        exportCho() {
            let arr = [];
            let ths = this;
            this.checkedList.forEach(tem => {
                if (tem.checked) {
                    arr.push({
                        fieldCode: tem.fieldCode,
                        fieldName: tem.fieldName
                    })
                }
            });
            let params = {};
            params["exportTitleContent"] = JSON.stringify(arr);
            console.log(params);
            let  local = window.location.origin;
            if (local.indexOf('localhost')!= -1) {
                local = 'http://www.gicdev.com';
            }
            location.href = local + "/haoban-manage-web/record/define-export?exportTitleContent="+JSON.stringify(arr);
            this.$emit("cancelCho");
        }
    },
    beforeMount() {
        this.getTemplate();
    }
}
</script>
<style lang="scss">
.export-set-container {
    background: #fff;
    padding: 25px;
    .title {
        font-size:16px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(48,49,51,1);
        span {
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(144,147,153,1);
            margin-left: 20px;
        }
    }
    .cho-list {
        >div {
            padding: 34px 0;
            border-bottom: 1px solid #E4E7ED;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 44px;
            .cho {
                padding: 0 15px;
                box-sizing: border-box;
                height:32px;
                background:rgba(236,245,255,1);
                border:1px solid rgba(217,236,255,1);
                border-radius:4px;
                color: #409EFF;
                box-sizing: border-box;
                text-align: center;
                line-height: 32px;
                font-size: 12px;
                margin-right: 10px;
                margin-bottom: 20px;
                cursor: pointer;
                &.osen {
                    background:rgba(64,158,255,1);
                    color: #fff;
                }
            }
        }
    }
    .cho-area {
        margin-top: 60px;
        font-size:14px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(96,98,102,1);
        .group-div {
            display: flex;
            margin-bottom: 50px;
            &:first-child {
                margin-top: 60px;
            }
            .group-title {
                width: 100px;
                font-weight:400;
                color:rgba(96,98,102,1);
            }
            .group-son-list {
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                li {
                    width: 180px;
                    margin-bottom: 25px;
                }
            }
        }
    }
    .handle-cho-btn {
        text-align: center;
        .export-btn{
            margin-right: 10px;
            .iconfont {
                color: #fff;
                margin-left: 5px;
            }
        }
    }
}
</style>


