<template>
    <div class="search">
        <div class="searchResult">
            <span class="left">您选择的结果: </span>
            <div class="center">
                <!-- <div class="tags">
                    <el-tag
                        v-for="tag in tags"
                        :key="tag.name"
                        class="mx-1"
                        closable
                        @close="handleClose(tag)"
                    >
                        {{ tag.name }}
                    </el-tag>
                </div> -->
                <div class="searchInput">
                    <el-input
                        v-model="params.title"
                        placeholder="在结果中查找"
                    >
                    </el-input>
                    <div class="searchBtn" @click="handleSearch">确定</div>
                </div>
            </div>
            <div class="right">
                <span class="btn" @click="handleClear">清除</span>
            </div>
        </div>
        <div class="searchType commonSearch">
            <span class="left">采购类型</span>
            <div class="center">
                <!-- <div class="item itemCurrent">不限</div>
                <div class="item" v-for="item in typeList" @click="handleAddTag(item)">
                    {{ item.name }}
                </div> -->
                <div class="item" 
                    v-for="item in typeList" 
                    :class="item.dictValue == params.buyType ? 'itemCurrent' : ''"
                    @click="changeClass(item, 1)"
                >
                    {{ item.dictName }}
                </div>
            </div>
            <div class="right">
                <!-- <span class="btn">更多</span> -->
            </div>
        </div>
        <div class="searchIndustry commonSearch">
            <span class="left">所属产业</span>
            <div class="center">
                <!-- <div class="item itemCurrent">不限</div>
                <div class="item" v-for="item in industryList" @click="handleAddTag(item)">
                    {{ item.name }}
                </div> -->
                <div class="item" 
                    v-for="item in industryList" 
                    :class="item.dictValue == params.trade ? 'itemCurrent' : ''"
                    @click="changeClass(item, 2)"
                >
                    {{ item.dictName }}
                </div>
            </div>
            <div class="right">
                <!-- <span class="btn">更多</span> -->
            </div>
        </div>
    </div>
    <div class="searchSort">
        <div class="synthesize" :class="activeSort === 1 ? 'activeSort' : ''" @click="handleSort(1)">
            综合排序
        </div>
        <div class="releaseTime" :class="activeSort === 2 ? 'activeSort' : ''" @click="handleSort(2)">
            发布时间
            <span class="caret-wrapper">
                <i class="sort-caret ascending" :class="releaseTime === 1 ? 'active' : ''"></i>
                <i class="sort-caret descending" :class="releaseTime === 2 ? 'active' : ''"></i>
            </span>
        </div>
        <div class="deadline" :class="activeSort === 3 ? 'activeSort' : ''" @click="handleSort(3)">
            截止时间
            <span class="caret-wrapper">
                <i class="sort-caret ascending" :class="deadline === 1 ? 'active' : ''"></i>
                <i class="sort-caret descending" :class="deadline === 2 ? 'active' : ''"></i>
            </span>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import { ArrowRight } from '@element-plus/icons-vue';
import { ref, reactive, inject, onMounted } from 'vue';
export interface tag {
    id: number;
    name: string;
}
export interface typeDict {
    id: number;
    dictName: string;
    dictValue: string;
}
const $http:any = inject("$http");
const emit = defineEmits(['clearSearch', 'handleSort', 'handleSearch']);
    const { typeListUrl } = defineProps({
        typeListUrl: {
            type: String,
            default: '/mall/webPortal/dictItem/getBuyTypeList'
        },
    });
    const params = reactive({
        buyType: null,
        trade: null,
        title: '',
        orderBy: 0,
    })

    const typeList = ref<typeDict[]>([]);
    const industryList = ref<typeDict[]>([]);
    function getTypeList() {
        $http.get(typeListUrl)
        .then((res:any) => {
            if (res.data && res.data.length) {
                typeList.value = res.data;
                params.buyType = res.data[0].dictValue;
            }
        })
    }

    function getIndustryList() {
        $http.get('/mall/webPortal/dictItem/getTradeTypeList')
        .then((res:any) => {
            if (res.data && res.data.length) {
                industryList.value = res.data;
                params.trade = res.data[0].dictValue;
            }
        })
    }

    onMounted(() => {
        getTypeList();
        getIndustryList();
    });

    

    // const searchValue = ref('');



    function handleClear() {
        params.title = '';
        emit('clearSearch')
    }

    function handleSearch() {
        emit('handleSearch', {
            params,
        })
    }
    function changeClass (param: any, type: number) {
        if (type === 1) {
            params.buyType = param.dictValue;
        } else if (type === 2) {
            params.trade = param.dictValue;
        }
    }

    const activeSort = ref(1); // 当前选中的排序类型 1: 综合排序 2: 发布时间 3: 截止时间
    const releaseTime = ref(0); // 发布时间 0: 默认 1: 升序 2: 倒序
    const deadline = ref(0); // 截止时间 0: 默认 1: 升序 2: 倒序

    function handleSort(val: number) {
        activeSort.value = val;
        if (val === 1) {
            releaseTime.value = 0;
            params.orderBy = 0;
        } else if (val === 2) {
            if (releaseTime.value < 2) {
                releaseTime.value += 1;
            } else {
                releaseTime.value = 1;
            }
            deadline.value = 0;
        } else if (val === 3) {
            if (deadline.value < 2) {
                deadline.value += 1;
            } else {
                deadline.value = 1;
            }
            releaseTime.value = 0;
        }

        // 排序参数
        if (val === 1) {
            params.orderBy = 0;
        } else if (val === 2 && releaseTime.value === 1) {
            params.orderBy = 1;
        } else if (val === 2 && releaseTime.value === 2) {
            params.orderBy = 2;
        } else if (val === 3 && deadline.value === 1) {
            params.orderBy = 3;
        } else if (val === 3 && deadline.value === 2) {
            params.orderBy = 4;
        }
        emit('handleSort', {
            // activeSort: activeSort.value,
            // releaseTime: releaseTime.value,
            // deadline: deadline.value,
            params
        })
    }

    // handleSearch();

</script>
    
<style scoped lang="less">
.search {
    margin: 0 auto;
    width: 1200px;
    background-color: #fff;
    .btn {
        display: block;
        width: 60px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        font-size: 14px;
        color: #333;
        border: 1px solid #bbb;
        cursor: pointer;
    }
    .searchResult {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px;
        box-sizing: border-box;
        font-size: 14px;
        color: #666;
        border-bottom: 1px solid #f5f5f5;
        .left {
            width: 120px;
        }
        .center {
            width: 1000px;
            display: flex;
            align-items: center;
            justify-content: right;
            .tags {
                margin:0 30px;
                line-height: 40px;
                .el-tag {
                    margin-right: 5px;
                }
            }
            .searchInput {
                height: 40px;
                display: flex;
                .el-input {
                    width: 260px;
                    height: 40px;
                    :deep(.el-input__wrapper) {
                        border-radius: inherit;
                    }
                }
                .searchBtn {
                    width: 80px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    color: #fff;
                    background-color: @baseColor;
                    font-size: 14px;
                    cursor: pointer;
                }
            }
        }
        .right {
            margin-left: 10px;
        }
    }
    .commonSearch {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding-right: 14px;
        font-size: 14px;
        color: #666;
        border-bottom: 1px solid #f5f5f5;
        min-height: 70px;
        .left {
            padding-left: 14px;
            display: block;
            width: 120px;    
        }
        .center {
            margin-left: 30px;
            width: 1000px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            overflow: hidden;
            .item {
                margin-right: 40px;
                height: 60px;
                line-height: 60px;
                cursor: pointer;
            }
            .itemCurrent {
                color: @baseColor;
            }
        }
    }
}

.searchSort {
    margin: 28px auto;
    width: 1200px;
    height: 72px;
    line-height: 72px;
    background-color: #fff;
    font-size: 14px;
    color: #666;
    display: flex;
    user-select: none;
    .activeSort {
        color: @baseColor;
    }
    .synthesize {
        width: 150px;
        text-align: center;
        border-right: 1px solid #f5f5f5;
        cursor: pointer;
    }
    .releaseTime {
        width: 150px;
        text-align: center;
        border-right: 1px solid #f5f5f5;
        cursor: pointer;
    }
    .deadline {
        width: 150px;
        text-align: center;
        cursor: pointer;
    }
    .caret-wrapper {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        height: 14px;
        width: 24px;
        vertical-align: middle;
        cursor: pointer;
        overflow: initial;
        position: relative;
        .sort-caret {
            width: 0;
            height: 0;
            border: solid 5px transparent;
            position: absolute;
            left: 7px;

        }
        .ascending {
            top: -5px;
            border-top-color: #a8abb2;
            transform: rotate(180deg);
        }
        .descending {
            bottom: -3px;
            border-top-color: #a8abb2;
        }
        .active {
            border-top-color: @baseColor;
        }
    }
}
</style>