<style>
    .customFilter .el-input__inner {
        border: 1px solid #DCDFE6 !important;
    }

    .customFilter .text-clamp-1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .customFilter .tag-select-input {
        padding: 4px 10px;
        border-radius: 5px;
        background-color: #f6f6f6;
        font-size: 14px;
    }

    .customFilter .lablec {
        display: none;
    }

    .customFilter .label-input {
        width: 200px;
        height: 36px;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        font-size: 14px;
        padding: 0 10px 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .customFilter .label-input:hover .lablec {
        display: inline;
    }

    .right_select {
        width: 40px;
        position: absolute;
        left: 0;
        top: 18px;
    }
    .border_top{
        border: 1px solid #d7d7d7;
        width: 29px;
        border-bottom: none;
        border-right: none;
        margin-left: 12px;
    }
    .border-bottom{
        border: 1px solid #d7d7d7;
        width: 29px;
        border-top: none;
        border-right: none;
        margin-left: 12px;
    }
    .right_select .border_mid div{
        width: 23px;
    height: 23px;
    text-align: center;
    line-height: 23px;
    color: #000;
    font-size: 12px;
    cursor: pointer;
    background: #d8d8d8;
    }
    .right_select .border_mid .checked{
        background: #333!important;
        color: #fff!important;
    }
</style>

<template>
    <div style="background: transparent;" class="customFilter">
        <el-dialog title="自定义筛选" :visible.sync="isscreen" width="860" :close-on-click-modal='false'
            :before-close="goclose">
            <div v-if="selectList.length==0" style="color: #606266;">添加筛选条件 <i class="el-icon-circle-plus"
                    style="font-size: 17px;" @click="addsList"></i></div>
            <div v-if="selectList.length>0">
                <div style="margin-bottom: 17px;font-size: 14px;color: #000;font-weight: 700;">当客户符合以下条件时</div>
            </div>
            <div :style="{'position':'relative','padding-left':selectList.length>1?'40px':'0'}">
                <div class="row" v-for="(x,y) in selectList" style="margin-bottom: 8px;">
                    <el-select v-model="x.Name" placeholder="请选择客户信息" @change="getName(x,y)" size='medium'>
                        <el-option v-for="item in filedList" :key="item.Id" :label="item.Name" :value="item.Id">
                        </el-option>
                    </el-select>
    
                    <div v-if="x.Type==1||x.Type==2||x.Type==5 ||x.Type==''" style="margin-left: 10px;">
                        <el-select v-if="x.Type==1" v-model="x.Direction" placeholder="请选择" style="width: 150px;"
                            size='medium'>
                            <el-option v-for="item in directionList1" :key="item.Id" :label="item.Name" :value="item.Id">
                            </el-option>
                        </el-select>
                        <el-select v-if="x.Type==2||  x.Type==''" v-model="x.Direction" placeholder="请选择"
                            style="width: 150px;" size='medium'>
                            <el-option v-for="item in directionList2" :key="item.Id" :label="item.Name" :value="item.Id">
                            </el-option>
                        </el-select>
                        <el-select v-if="x.Type==3" v-model="x.Direction" placeholder="请选择" style="width: 150px;"
                            size='medium'>
                            <el-option v-for="item in directionList5" :key="item.Id" :label="item.Name" :value="item.Id">
                            </el-option>
                        </el-select>
                    </div>
                    <div v-if="x.Name=='标签' && x.Type==1" style="margin-left: 10px;">
                        <div class="label-input" @click="showlabel(y)">
                            <div style="display: flex;" v-if="x.LableIds && x.LableIds.length>0">
                                <div class="text-clamp-1 tag-select-input" style="max-width:110px;">
                                    {{x.LableIds[0].Name}}
                                </div>
                                <div v-if="x.LableIds.length>1" class="tag-select-input" style="margin-left: 5px;">
                                    {{x.LableIds.length-1}}+
                                </div>
                            </div>
                            <div v-if="x.LableIds && x.LableIds.length>0" class="lablec">
                                <i style="font-size: 16px;" class="el-icon-error"
                                    @click.stop="selectList[y].LableIds=[]"></i>
                            </div>
    
                        </div>
                    </div>
                    <el-select v-if="x.Name=='客户阶段' && x.Type==2" v-model="x.StartValue" placeholder="请选择"
                        style="margin-left: 10px;" size='medium'>
                        <el-option v-for="item in StageList" :key="item.Id" :label="item.Name" :value="item.Id">
                        </el-option>
                    </el-select>
                    <el-input v-if="(x.Type==1 && x.Name!='标签')|| x.Type==''" v-model="x.StartValue" placeholder="请输入"
                        style="width: 200px;margin-left: 10px;" size='medium'></el-input>
    
                    <el-select v-if="x.Type==3" v-model="x.StartValue" placeholder="请选择" style="margin-left: 10px;"
                        size='medium'>
                        <el-option v-for="item in x.OptionsList" :key="item.Id" :label="item.Name" :value="item.Id">
                        </el-option>
                    </el-select>
    
    
                    <div style="margin-left: 10px;display: flex;align-items: center;">
                        <i v-if="selectList.length>1" style="font-size: 20px;" class="el-icon-remove"
                            @click="deleteadd(y)"></i>
                        <i v-if="selectList.length==y+1" style="font-size: 20px;margin-left: 10px;"
                            class="el-icon-circle-plus" @click="addsList"></i>
    
                    </div>
    
                </div>
                <div data-v-0dbac2e3="" class="right_select" v-if="selectList.length>1">
                    <div data-v-0dbac2e3="" class="border_top" :style="{height:((selectList.length*44 -8 - 46 - 36 )/2) + 'px'}"></div>
                    <div data-v-0dbac2e3="" class="border_mid">
                        <div data-v-0dbac2e3="" class="and checked">且</div>
                        <div data-v-0dbac2e3="" class="no">或</div>
                    </div>
                    <div data-v-0dbac2e3="" class="border-bottom" :style="{height:((selectList.length*44 -8 - 46 - 36 )/2) + 'px'}"></div>
                </div>
            </div>
            
            
            <span slot="footer" class="dialog-footer">
                <el-button @click="goclose">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <labelPopup v-if="isshowlabel" :list='LableList' @close="isshowlabel=false" @submit='getlabel'></labelPopup>
    </div>

</template>

<script>
    import {
        getCustomerFiledList,//标签
        getCustomerStageList,//阶段

    } from '../../../../api/system/wechat';
    import labelPopup from './labelPopup.vue'
    export default {
        props: {
            selectList: {
                type: Array
            }
        },
        components: {
            labelPopup
        },
        name: "customFilter",
        data() {
            return {
                isscreen: true,
                filedList: [],
                directionList1: [{ Id: 1, Name: '包含所有' }, { Id: 2, Name: '包含任意' }, { Id: 3, Name: '不包含' }, { Id: 4, Name: '为空' }, { Id: 5, Name: '不为空' },],
                directionList2: [{ Id: 1, Name: '等于' }, { Id: 1, Name: '不等于' }, { Id: 1, Name: '为空' }, { Id: 1, Name: '不为空' }, { Id: 1, Name: '模糊' },],
                directionList5: [{ Id: 1, Name: '等于' }, { Id: 1, Name: '大于' }, { Id: 1, Name: '大于等于' }, { Id: 1, Name: '小于' }, { Id: 1, Name: '小于等于' },],
                isshowlabel: false,
                selectindex: 0,
                LableList: [],
                StageList: []
            }
        },
        created() {
            if (this.selectList.length == 0) {//如果进来没有先增加一条
                this.addsList()
                this.selectList[0].Name = '标签'
                this.selectList[0].Type = 1
            }
            this.getCustomerFiledList()
            this.getCustomerStageList()
        },
        methods: {
            goclose() {
                this.$emit('close')
            },
            getCustomerFiledList() {//获取客户字段
                getCustomerFiledList({ Enable: 1 }).then(res => {
                    if (res.Code == 1) {
                        this.filedList = res.Data;
                        let obj = { Id: '客户阶段', Name: '客户阶段', Type: 2 }
                        this.filedList.unshift(obj)
                        let obj2 = { Id: '标签', Name: '标签', Type: 1 }
                        this.filedList.unshift(obj2)
                    }
                })
            },
            getCustomerStageList() {
                getCustomerStageList({}).then(res => {
                    this.loading = false
                    if (res.Code == 1) {
                        this.StageList = res.Data;
                    }
                })
            },
            deleteadd(index) {
                this.selectList.splice(index, 1)
            },
            addsList() {//给msg.SelectList追加
                let obj = {
                    Name: '',
                    Type: '',
                    Direction: '',
                    StartValue: '',
                    EndValue: '',
                    IsCustom: '2',
                    LableIds: [],
                    StageId: '',
                }
                this.selectList.push(obj)
            },
            getName(item, index) {//选择客户信息的变化
                for (var i = 0; i < this.filedList.length; i++) {
                    if (this.selectList[index].Name == this.filedList[i].Id) {
                        this.selectList[index].Type = this.filedList[i].Type;
                        this.selectList[index].StartValue = ''
                        if (this.selectList[index].Type == 3) {
                            this.selectList[index].OptionsList = this.filedList[i].OptionsList;
                        }
                        break
                    }
                }
            },
            showlabel(index) {
                this.isshowlabel = true
                this.selectindex = index;
                this.LableList = this.selectList[index].LableIds
            },
            getlabel(list) {
                this.isshowlabel = false;
                this.selectList[this.selectindex].LableIds = list

            }




        }
    }

</script>