<template>
    <div class="group-set-transfer">
        <div class="flex-1 table-container">
            <div class="input-div">
                <el-input
                    class="w_100"
                    placeholder="请输入关键字搜索人群"
                    prefix-icon="el-icon-search"
                    v-model="dataSearch"
                    @keyup.enter.native="searchEnterFun"
                    clearable
                    @clear="clearSearch('dataSearch')">
                </el-input>
            </div>
            <el-table
                v-loadmore="loadmore"
                ref="originTable"
                :data="tableData"
                tooltip-effect="dark"
                @selection-change="handleSelectionChange"
                :height="height - 72">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    label="分组名称"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-popover
                            placement="top-start"
                            width="200"
                            trigger="hover">
                            <span>{{ scope.row.describle }}</span>
                            <a slot="reference" class="pointer" :href="'/memberGroupDetail?memberTagGroupId='+scope.row.memberTagGroupId">{{ scope.row.groupName }}</a>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                    label="是否实时"
                    width="120px">
                    <template slot-scope="scope">
                        {{scope.row.isRealTime == 1? '实时':'非实时'}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="最近更新时间"
                    width="200px"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.latestUpdateTime | formatTimeYMD }}
                        <p>{{ scope.row.latestUpdateTime | formatTimeHMS  }}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    label="更新频率"
                    width="150px"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                    <!-- {{ scope.row.updateType == 1 ? '每天一次' : scope.row.updateType == 2 ? (scope.row.updateDay ? '每周'+ weekArr[scope.row.updateDay - 1] : '每周一次') : (scope.row.updateDay ? '每月' + scope.row.updateDay + '号' : '每月一次')}} -->
                        <template v-if="scope.row.isRealTime == 0">
                            {{scope.row.updateType, scope.row.updateDay | formatUpdateFrequency}}
                        </template>
                        <template v-else>
                            --
                        </template>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="state"
                    label="状态"
                    width="100px">
                    <template slot-scope="scope">
                        {{scope.row.effectiveStatus == 1? '有效':'失效'}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="recentUpdateDate"
                    label="到期时间"
                    width="200px"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.effectiveDate | formatTimeYMD }}
                        <p>{{ scope.row.effectiveDate | formatTimeHMS }}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <router-link :to="{path:'/memberGroupDetail',query:{memberTagGroupId:scope.row.memberTagGroupId}}" class="edit-btn el-button--text p-r-20">详情</router-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="btn-box" :style="'height:'+height+'px'">
            <div class="icon-container">
                <span class="transfer-icon el-icon-arrow-right m-b-26" @click="selectToTransfer"></span>
                <span class="transfer-icon el-icon-arrow-left" @click="selectToRemove"></span>
            </div>
        </div>
        <div class="selected-list table-container">
            <div class="input-div">
                <el-input
                    class="w_100"
                    placeholder="请输入关键字搜索人群"
                    prefix-icon="el-icon-search"
                    v-model="dataSearchSelected"
                    clearable
                    @clear="clearSearch('dataSearchSelected')">
                </el-input>
            </div>
            <el-table
                ref="selectedTable"
                :data="selectedData.filter(data => !dataSearchSelected || data.groupName.toLowerCase().includes(dataSearchSelected.toLowerCase()))"
                tooltip-effect="dark"
                @selection-change="handleSelectedSelectionChange"
                :height="height - 114">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    label="分组名称"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-popover
                            placement="top-start"
                            trigger="hover">
                            <span>{{ scope.row.describle }}</span>
                            <a slot="reference" class="pointer" :href="'/memberGroupDetail?memberTagGroupId='+scope.row.memberTagGroupId">{{ scope.row.groupName }}</a>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                    label="是否实时"
                    width="116px">
                    <template slot-scope="scope">
                        {{scope.row.isRealTime == 1? '实时':'非实时'}}
                    </template>
                </el-table-column>
            </el-table>
            <p class="cover-count">已选中<span class="count">{{countOfCoverTotal}}</span>人</p>
        </div>
    </div>
</template>
<script>
    export default {
        name: "vue-gic-member-group",
        props: {
            defaltSelected: {
                type: Array,
                default() {
                    return [];
                }
            },
            height: {
                type: Number,
                default: 543
            },
            projectName: {
                type: String,
                default: 'memberTag'
            }
        },
        data() {
            return {
                tableData: [],
                pageSize: 20,
                currentPage: 1,
                dataSearch: "",
                baseUrl: "",
                dataSearchSelected: "",
                selectedData: [], // 穿梭窗已选入数据
                selectionToTransfer: [], // 穿梭窗选入数据
                selectionToRemove: [], // 已选的将要删除的选入数据
                countOfCoverTotal: 0,
                totalPage: 1
            };
        },
        directives: {
            loadmore: {
                bind(el, binding) {
                    // 获取element-ui定义好的scroll盒子
                    const SELECTWRAP_DOM = el.querySelector('.el-table__body-wrapper');
                    SELECTWRAP_DOM.addEventListener('scroll', function() {
                    /*
                    * scrollHeight 获取元素内容高度(只读)
                    * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
                    * clientHeight 读取元素的可见高度(只读)
                    * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
                    * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
                    */
                        let sign = 1; // 定义默认的向上滚于乡下滚的边界
                        const CONDITION = ((this.scrollHeight - this.scrollTop === this.clientHeight) && 
                                        this.scrollTop > sign)// 注意: && this.scrollTop
                        
                        if(this.scrollTop > sign) {
                            sign = this.scrollTop;
                            // console.log('向下')
                        }
                        if(this.scrollTop < sign) {
                            sign = this.scrollTop;
                            // console.log('向上')
                        }
                        
                        if(CONDITION) {
                            binding.value();
                        }
                    });
                }
            }
        },
        methods: {
            loadmore() {
                // console.log('loadmore');
                if (this.currentPage < this.totalPage) {
                    this.currentPage += 1;
                    this.getGroupList();
                }
            },

            /**
             * 获取分组列表数据
             */
            getGroupList() {
                const that = this;
                that.axios.get(`${that.baseUrl}/gic-member-tag-web/member-tag-group/findList.json?requestProject=${that.projectName}&pageSize=${that.pageSize}&pageNum=${that.currentPage}&groupName=${that.dataSearch}&effectiveStatus=${1}`)
                .then(res => {
                    if (res.data.errorCode == 1) {
                        that.tableData = that.tableData.concat(res.data.result.result);
                        that.totalPage = res.data.result.totalPage;
                        return;
                    }
                    that.$message.error({
                        duration: 1000,
                        message: res.data.message
                    });
                })
                .catch(error => {
                    that.$message.error({
                        duration: 1000,
                        message: error.message
                    });
                });
            },

            searchEnterFun() {
                this.tableData = [];
                this.getGroupList();
            },

            /**
             * 清除搜索框
             */
            clearSearch(prop) {
                this[prop] = '';
                if (prop == 'dataSearch') {
                    this.getGroupList();
                }
            },

            /**
             * 处理穿梭窗选入数据
             */
            handleSelectionChange(val) {
                this.selectionToTransfer = val;
            },

            selectToTransfer() {
                if (this.selectionToTransfer.length < 1) {
                    this.$message.error({
                        duration: 1000,
                        message: '请选择分组!'
                    });
                    return false;
                }
                this.selectedData = this.uniqueByGroupId(this.selectedData.concat(this.selectionToTransfer)); // 数组拼接并去重
                this.getMemberCountByGroups();
                this.$emit('handleDataTransferred', this.selectedData, this.selectionToTransfer);
                this.$refs.originTable.clearSelection();
            },
            
            /**
             * 根据分组ID去重
             */
            uniqueByGroupId(arr, key = 'memberTagGroupId') {
                // var arr = this;
                var n = [arr[0]];
                for (var i = 1; i < arr.length; i++) {
                    if (key === undefined) {
                        if (n.indexOf(arr[i]) == -1) n.push(arr[i]);
                    } else {
                        inner: {
                            var has = false;
                            for (var j = 0; j < n.length; j++) {
                                if (arr[i][key] == n[j][key]) {
                                    has = true;
                                    break inner;
                                }
                            }
                        }
                        if (!has) {
                            n.push(arr[i]);
                        }
                    }
                }
                return n;
            },

            /**
             * 处理已选的将要删除的选入数据
             */
            handleSelectedSelectionChange(val) {
                this.selectionToRemove = val;
            },

            selectToRemove() {
                if (this.selectionToRemove.length < 1) {
                    this.$message.error({
                        duration: 1000,
                        message: '请选择分组!'
                    });
                    return false;
                }
                let seleced = this.selectedData;
                let setection = this.selectionToRemove;
                let aSet = new Set(seleced);
                let bSet = new Set(setection);
                this.selectedData =  seleced.concat(setection).filter(v => !aSet.has(v) || !bSet.has(v)); // 两数组非交集部分即为剔除后剩下的数据
                this.getMemberCountByGroups();
                this.$emit('handleDataLeft', this.selectedData, this.selectionToRemove);
                this.$refs.selectedTable.clearSelection();
            },

            /**
             * 获取已选分组去重后的分组数据
             */
            getMemberCountByGroups() {
                const that = this;
                let selectedData = that.selectedData;
                if (selectedData.length < 1) {
                    that.countOfCoverTotal = 0;
                    return false;
                }
                let idsArr = [];
                selectedData.forEach(group => {
                    idsArr.push(group.memberTagGroupId);
                });
                let ids = idsArr.join(',');
                that.axios.get(`${that.baseUrl}/gic-member-tag-web/member-tag-member/findMemberListByGroupIds.json?requestProject=${that.projectName}&memberTagGroupIds=${ids}&pageName=memberSign`)
                .then(res => {
                    // console.log(res, "count");
                    if (res.data.errorCode == 1) {
                        that.countOfCoverTotal = res.data.result.page.totalCount;
                    }
                });
            }
        },
        filters: {
            formatTimeYMD(data) {
                return data && data != '- -' ? data.split(' ')[0] : '--';
            },
            formatTimeHMS(data) {
                return data && data != '- -' ? data.split(' ')[1] : '--';
            },
            formatNum(data){
                const reg=/\d{1,3}(?=(\d{3})+$)/g;
                return (data + '').replace(reg, '$&,');
            },
            formatUpdateFrequency(type, day) {
                const that = this;
                switch(type) {
                    case 1:
                        return '每天一次';
                        break;
                    case 2:
                        let weekArr = ['一', '二', '三', '四', '五', '六', '日'];
                        return day ? `每周${weekArr[day - 1]}` : '每周一次';
                    break;
                    case 3:
                        return day ? `每月${day}号` : '每月一次';
                        break;
                    default:
                        return '--';
                }
            }
        },
        beforeMount() {
            var that = this;
            var host = window.location.origin;
            if (host.indexOf("localhost") != "-1") {
                that.baseUrl = "http://gicdev.demogic.com";
            } else {
                that.baseUrl = host;
            }
        },
        mounted() {
            this.getGroupList();
            if (this.defaltSelected.length > 0) {
                this.selectedData = this.uniqueByGroupId(this.selectedData.concat(this.defaltSelected)); // 数组拼接并去重
            }
            this.getMemberCountByGroups();
        }
    };
</script>
<style lang="scss">
    .group-set-transfer {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        background: #fff;
        padding: 30px;
        box-sizing: border-box;
        a {
            color: #606266;
        }
        .flex-1 {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }
        .w_100 {
            width: 100%;
        }
        .m-b-26 {
            margin-block-start: 26px;
        }
        .input-div {
            padding: 20px 14px;
        }
        >.table-container {
            height: 100%;
            border: 1px solid #DCDFE6;
            border-radius: 4px;
            .cover-count {
                height: 42px;
                line-height: 42px;
                text-align: center;
                border: none;
                color: #7e8c8d;
                font-size: 14px;
                .count {
                    color: #606266;
                    margin: 0 5px;
                }
            }
        }
        .btn-box {
            display: -webkit-flex;
            display:         flex;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            width: 80px;
            text-align: center;
            .icon-container {
                .transfer-icon  {
                    display: inline-block;
                    width: 43px;
                    height: 43px;
                    line-height: 44px;
                    border-radius: 100%;
                    text-align: center;
                    border: 1px solid #DCDFE6;
                    color: #DCDFE6;
                    font-size: 20px;
                    cursor: pointer;
                    &:hover {
                        border: none;
                        background: #409EFF;
                        color: #fff;
                    }
                }
            }
        }
        .selected-list {
            width: 356px;
            height: 100%;
        }
    }
</style>