<style>
.my-special-class {
    width: 200px;
    margin-right: 6px;
}

.input_label {
    width: 200px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid rgb(0 0 0 / 24%);
    font-size: 14px;
    padding: 0 10px 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.right_select {
    width: 40px;
    position: absolute;
    left: 0;
    top: 20px;
}

.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;
}

.tag-select-input {
    padding: 4px 10px;
    border-radius: 5px;
    background-color: #f6f6f6;
    font-size: 14px;
}
</style>
<template>
    <div class="requestgroup">
        <div :style="{ 'position': 'relative', 'padding-left': addMsg.length > 1 ? '40px' : '0' }">
            <div class="row" v-for="(x,y) in addMsg" :key="y" style="margin-bottom: 8px">
                <!-- name -->
                <q-select
                    outlined
                    v-model="x.Name"
                    :options="filedList"
                    dense
                    class="my-special-class"
                    label="请选择客户信息"
                    option-value="Id"
                    option-label="Name"
                    option-disable="disable"
                    emit-value
                    map-options
                    @update:model-value="changeName($event, y)"
                />
                <!-- Direction -->
                <q-select
                    v-if="x.Type === 1 || x.Type === 2 || x.Type === 5 || x.Type == ''"
                    outlined
                    v-model="x.Direction"
                    :options="x.directionList"
                    dense
                    label="请选择"
                    class="my-special-class"
                    option-value="Id"
                    option-label="Name"
                    emit-value
                    map-options
                />
                <div class="cascader" v-if="x.Type == 3">
                    <a-cascader
                        v-model:value="birthday"
                        :options="dateOptions"
                        placeholder="请选择"
                        expandTrigger="hover"
                        size="large"
                        @change="changeDate($event, y)"
                    />
                </div>
                <div v-if="x.Type == 4">
                    <a-range-picker
                        style="width:auto"
                        v-model:value="x.rangeArr"
                        size="large"
                        :locale="locale"
                        format="YYYY/MM/DD HH:mm:ss"
                        showTime
                        @change="changeRange($event, y)"
                    />
                </div>
                <!-- StartValue -->
                <div
                    v-if="x.Name == '标签' && (x.Direction == 1 || x.Direction == 2 || x.Direction == 3 || x.Direction == '')"
                    class="input_label"
                    @click="showlabel(y)"
                >
                    <div style="display: flex;" v-if="x.StartValue && x.StartValue.length > 0">
                        <div
                            class="text-clamp-1 tag-select-input"
                            style="max-width:110px;"
                        >{{ x.StartValue[0].Name }}</div>
                        <div
                            v-if="x.StartValue.length > 1"
                            class="tag-select-input"
                            style="margin-left: 5px;"
                        >{{ x.StartValue.length - 1 }}+</div>
                    </div>

                    <div v-if="x.StartValue && x.StartValue.length > 0" class="lablec">
                        <i
                            style="font-size: 16px;"
                            class="el-icon-error"
                            @click.stop="addMsg[y].StartValue = []"
                        ></i>
                    </div>
                </div>
                <div
                    v-if="(x.Type === 1 || x.Type === 2 || x.Type === 5 || x.Type == '') && x.Name !== '标签'"
                >
                    <div v-if="x.isSelect">
                        <q-select
                            v-if="x.Name == '客户阶段' && (x.Direction == 1 || x.Direction == 2 || x.Direction == '')"
                            outlined
                            v-model="x.StartValue"
                            :options="x.OptionsList"
                            dense
                            label="请选择"
                            class="my-special-class"
                            option-value="Id"
                            option-label="Name"
                            emit-value
                            map-options
                        />
                        <q-select
                            v-if="x.Name !== '客户阶段'"
                            outlined
                            v-model="x.StartValue"
                            :options="x.OptionsList"
                            dense
                            label="请选择"
                            class="my-special-class"
                            option-value="Id"
                            option-label="Name"
                            emit-value
                            map-options
                        />
                    </div>

                    <div v-if="!x.isSelect">
                        <q-input
                            v-if="x.Type == 1 && (x.Direction == 1 || x.Direction == 2 || x.Direction == 3 || x.Direction == '')"
                            outlined
                            v-model="x.StartValue"
                            label="请输入"
                            dense
                        />
                        <q-input
                            v-if="x.Type == 2 && (x.Direction == 1 || x.Direction == 2 || x.Direction == '')"
                            outlined
                            v-model="x.StartValue"
                            label="请输入"
                            dense
                        />
                        <q-input
                            v-if="x.Type == 5 || x.Type == ''"
                            outlined
                            v-model="x.StartValue"
                            label="请输入"
                            dense
                        />
                    </div>
                </div>

                <!-- 新增和删除 -->
                <div style="display: flex;align-items: center;">
                    <img
                        src="../../assets/images/customer/delete.png"
                        v-if="addMsg.length > 1"
                        style="width: 20px;height: 20px;margin-left: 10px;"
                        @click="deleteadd(y)"
                    />
                    <img
                        src="../../assets/images/customer/add.png"
                        v-if="addMsg.length == y + 1 && addMsg.length < 10"
                        style="width: 20px;height: 20px;margin-left: 10px;"
                        @click="addsList()"
                    />
                </div>
            </div>
            <div class="right_select" v-if="addMsg.length > 1">
                <div
                    class="border_top"
                    :style="{ height: ((addMsg.length * 48 - 8 - 46 - 40) / 2) + 'px' }"
                ></div>
                <div class="border_mid">
                    <div class="and" :class="{ 'checked': addtion == 1 }" @click="addtion = 1">且</div>
                    <div class="no" :class="{ 'checked': addtion == 2 }" @click="addtion = 2">或</div>
                </div>
                <div
                    class="border-bottom"
                    :style="{ height: ((addMsg.length * 48 - 8 - 46 - 40) / 2) + 'px' }"
                ></div>
            </div>
        </div>
        <labelgroup
            v-if="isshowlabel"
            :list="LableList"
            @close="isshowlabel = false"
            @submit="getlabel"
        ></labelgroup>
    </div>
</template>
<script lang="ts">
import {
    defineComponent,
    ref,
    watch,
    onMounted
} from 'vue'
import customerService from '@/api/customer'
import labelgroup from './label-group.vue'
import dayjs, { Dayjs } from 'dayjs'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
interface params {
    Name: number | string
    IsCustom: number
    Type: number | string
    Id?: number | string
    Direction?: string
    StartValue?: string | Array<any>
    EndValue?: string
    disable?: boolean
    directionList?: Array<any>
    OptionsList?: Array<any>
    isSelect?: boolean
    rangeArr?: Array<any>
}
interface dateParams {
    value: string | number
    label: string
    children?: Array<dateParams>
}
const format = "YYYY/MM/DD HH:mm:ss"
export default defineComponent({
    props: {
        addCondition: {
            type: Number,
            default: 1
        },
    },
    components: {
        labelgroup,
    },
    setup(props, ctx) {
        let rangeArr = ref<Dayjs[]>([])
        let birthday = ref([])//只有一个
        let addtion = ref(props.addCondition)
        let filedList = ref<Array<params>>([]); //客户字段数组
        let addMsg = ref<Array<params>>([]) //筛选数组
        let isshowlabel = ref(false) //标签弹出显示
        let selectindex = ref(0) //现在筛选数组 索引
        let LableList = ref<Array<any> | string>([]) //标签的数组
        //日期数组
        let dateOptions = ref<Array<dateParams>>([])
        let year: any = new Date().getFullYear()
        for (let i = 1; i <= 12; i++) {
            let obj: dateParams = {
                value: i < 10 ? '0' + i : i,
                label: i + '月',
                children: []
            }
            let day = new Date(year, i, 0).getDate()
            for (let d = 1; d <= day; d++) {
                obj.children?.push({
                    value: d < 10 ? '0' + d : d,
                    label: d + '号',
                })
            }
            dateOptions.value.push(obj)
        }
        const directionList1 = [{
            Id: 1,
            Name: '包含所有'
        }, {
            Id: 2,
            Name: '包含任意'
        }, {
            Id: 3,
            Name: '不包含'
        }, {
            Id: 4,
            Name: '为空'
        }, {
            Id: 5,
            Name: '不为空'
        },]
        const directionList2 = [{
            Id: 1,
            Name: '等于'
        }, {
            Id: 2,
            Name: '不等于'
        }, {
            Id: 3,
            Name: '为空'
        }, {
            Id: 4,
            Name: '不为空'
        }, {
            Id: 5,
            Name: '模糊'
        },]
        const directionList5 = [{
            Id: 1,
            Name: '等于'
        }, {
            Id: 2,
            Name: '大于'
        }, {
            Id: 3,
            Name: '大于等于'
        }, {
            Id: 4,
            Name: '小于'
        }, {
            Id: 5,
            Name: '小于等于'
        },]


        const getCustomerFiledList = () => {
            customerService.getCustomerFiledList({
                Enable: 1
            }).then((res) => {
                let data = res.data.Data
                filedList.value = data;
                filedList.value.forEach((x) => { // IsCustom 是否自定义字段 1是 2标签 3阶段
                    x.IsCustom = 1
                })
                getCustomerStageList(); //获取客户阶段
            })
        }
        const getCustomerStageList = () => {
            customerService.getCustomerStageList({}).then(res => {
                let obj: params = {
                    Id: '客户阶段',
                    Name: '客户阶段',
                    Type: 3,
                    IsCustom: 3,
                    OptionsList: res.data.Data
                }
                filedList.value.unshift(obj)
                let obj2: params = {
                    Id: '标签',
                    Name: '标签',
                    Type: 4,
                    IsCustom: 2
                }
                filedList.value.unshift(obj2)
                addMsg.value.push({
                    Name: '标签',
                    Type: 1,
                    Direction: '',
                    StartValue: '',
                    EndValue: '',
                    IsCustom: 2,
                    directionList: directionList1
                })
                console.log("标签", filedList.value)
            })
        }
        const deleteadd = (index) => { //删除addMsg某一项
            addMsg.value.splice(index, 1)
        }
        const addsList = () => {
            let obj: params = {
                Name: '',
                Type: '',
                Direction: '',
                StartValue: '',
                EndValue: '',
                IsCustom: 2,
                directionList: directionList2
            }
            addMsg.value.push(obj)
        }

        const showlabel = (y) => {

            selectindex.value = y;
            if (addMsg.value[y].StartValue == '') { //为空赋值为数组
                LableList.value = []
            } else {
                LableList.value = addMsg.value[y].StartValue || ''
            }
            isshowlabel.value = true

        }
        const getlabel = (list) => {
            isshowlabel.value = false;
            addMsg.value[selectindex.value].StartValue = list
        }
        //----------------------------------------------------------------------------
        // 禁用标签
        let changeLabel = () => {
            let find: any = addMsg.value.find((e) => {
                return e.Name == '标签'
            })
            if (find) {
                filedList.value.map((_e) => {
                    if (_e.Id == '标签') {
                        _e.disable = true
                    }
                })
            } else {
                filedList.value.map((_e) => {
                    if (_e.Id == '标签') {
                        _e.disable = false
                    }
                })
            }
            //禁用生日
            let find2: any = addMsg.value.find((e) => {
                return e.Name == 26
            })
            if (find2) {
                filedList.value.map((_e) => {
                    if (_e.Id == 26) {
                        _e.disable = true
                    }
                })
            } else {
                filedList.value.map((_e) => {
                    if (_e.Id == 26) {
                        _e.disable = false
                    }
                })
            }
        }

        //标签改变
        let changeName = (val: any, y: number) => {
            addMsg.value[y].StartValue = ''
            addMsg.value[y].EndValue = ''
            switch (val) {
                case "标签": {
                    addMsg.value[y].IsCustom = 2
                    break;
                }
                case "客户阶段": {
                    addMsg.value[y].IsCustom = 3
                    break;
                }
                default: {
                    addMsg.value[y].IsCustom = 1
                }
            }
            let find: any = filedList.value.find((e) => {
                return e.Id == val
            })
            switch (find.Type) {
                case 1: {
                    addMsg.value[y].directionList = directionList2
                    addMsg.value[y].Type = 2
                    addMsg.value[y].isSelect = false
                    break;
                }
                case 2: {
                    addMsg.value[y].directionList = directionList2
                    addMsg.value[y].Type = 2
                    addMsg.value[y].isSelect = false
                    break;
                }
                case 3: {
                    addMsg.value[y].directionList = directionList2
                    addMsg.value[y].Type = 2
                    if (find.OptionsList) {
                        addMsg.value[y].isSelect = true
                        addMsg.value[y].OptionsList = find.OptionsList
                    }
                    break;
                }
                case 4: {
                    addMsg.value[y].directionList = directionList1
                    addMsg.value[y].Type = 1
                    if (find.OptionsList) {
                        addMsg.value[y].isSelect = true
                        addMsg.value[y].OptionsList = find.OptionsList
                    }
                    break;
                }
                case 5: {
                    addMsg.value[y].Type = 3
                    addMsg.value[y].isSelect = false
                    break;
                }
                case 6: {
                    addMsg.value[y].Type = 4
                    addMsg.value[y].isSelect = false
                    addMsg.value[y].rangeArr = []
                    break;
                }
                case 7: {
                    addMsg.value[y].directionList = directionList5
                    addMsg.value[y].Type = 5
                    addMsg.value[y].isSelect = false
                    break;
                }
            }
        }
        let changeDate = (value, y) => {
            console.log(500, value, y)
            addMsg.value[y].StartValue = value.join('-')
        }
        let changeRange = (val, y) => {
            let a = dayjs(val[0]._d).format(format)
            let b = dayjs(val[1]._d).format(format)
            addMsg.value[y].StartValue = a
            addMsg.value[y].EndValue = b

        }
        watch(() => [...addMsg.value], (val) => {
            changeLabel()
            let newVal: Array<params> = []
            val.map((e: params) => {
                let item: params = JSON.parse(JSON.stringify(e))
                if (e.OptionsList) {
                    delete item.OptionsList
                }
                if (e.directionList) {
                    delete item.directionList
                }
                if (e.Name == '标签' && Array.isArray(e.StartValue)) {
                    item.StartValue = e.StartValue.map(e => e.Id).toString()
                }
                delete item.isSelect
                newVal.push(item)
            })
            console.log('watch', newVal)
            ctx.emit('change', newVal)
        }, { deep: true })
        onMounted(() => { //进入页面就调用
            getCustomerFiledList(); //获取客户字段
        })
        return {
            birthday,
            rangeArr,
            dateOptions,
            getCustomerFiledList,
            filedList,
            addMsg,
            deleteadd,
            addsList,
            addtion,
            isshowlabel,
            selectindex,
            LableList,
            showlabel,
            getlabel,
            changeName,
            changeDate,
            changeRange,
            locale,
        }
    }

})
</script>
<style lang="scss" scoped>
::v-deep .ant-cascader-picker {
    border-radius: 4px;
    border-color: rgb(0 0 0 / 24%);
    overflow: hidden;
}
</style>
<style>
/*修改滚动条样式*/
ul::-webkit-scrollbar {
    width: 6px;
    height: 10px;
    /**/
}
ul::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 3px;
}
ul::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 10px;
}
ul::-webkit-scrollbar-thumb:hover {
    background: #333;
}
</style>