<template>
    <view class="search-page">
        <view class="search-bar">
            <up-icon name="arrow-left" @click="back"></up-icon>
            <up-search v-model="keyword" :show-action="true" actionText="搜索" :animation="true" focus
                :actionStyle="{ backgroundColor: '#2B69F8', color: '#FFFFFF' }" @search="search"></up-search>
        </view>
        <view class="search-history" v-if="historyRecord && historyRecord.length > 0">
            <view class="search-history-header">
                <view class="history-record">历史记录</view>
                <view>
                    <view v-if="deleteStatus" class="delete-status">
                        <view class="delete-all" @click="deleteAll">全部删除</view>
                        <view class="line"></view>
                        <view class="finish" @click="switchDelete">完成</view>
                    </view>
                    <up-icon name="trash" v-else @click="switchDelete"></up-icon>
                </view>
            </view>
            <view class="search-history-content">
                <up-tag class="tag-item" v-for="(item, index) in historyRecord" shape="circle" :key="index"
                    borderColor='#E9E9E9' :text="item.name" bgColor="#fff" color="#000" :name='index' padding="2px 8px"
                    height="20px" borderRadius="16px" :closable="deleteStatus" @click="openHistory"
                    @close="deleteTag"></up-tag>
            </view>
        </view>
        <view class="search-result">
            <view class="result-list" v-if="searchList && searchList.length > 0">

            </view>
            <view class="no-result-container" v-else>
                <image class="img" src="@/static/images/common-search/noResult.png" mode="scaleToFill" />
                <view class="no-result">内容溜走了，请重新搜索~</view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { showConfirm, toast } from '../../utils/common';



/* 历史记录 */
const historyRecord = ref([
    {
        name: '科技园项目',
        time: '2021-01-01 10:10:10',
        uid: ''
    },
    {
        name: '老旧小区改造项目',
        time: '2021-01-01 10:10:10',
        uid: ''
    },
    {
        name: '工业园二期扩建',
        time: '2021-01-01 10:10:10',
        uid: ''
    },
    {
        name: '安全复工通知',
        time: '2021-01-01 10:10:10',
        uid: ''
    },
])
const deleteStatus = ref(false)
function switchDelete() {
    deleteStatus.value = !deleteStatus.value
}
function deleteTag(index) {
    console.log(index);
    showConfirm('确定删除这个历史记录吗？').then((res) => {
        console.log(res);
        historyRecord.value.splice(index, 1)
        toast('删除成功')
    })
}
function deleteAll() {
    showConfirm('确定删除所有历史记录吗？').then((res) => {
        console.log(res);
        historyRecord.value = []
        toast('删除成功')
    })
}
function openHistory(index) {
    console.log(index);
    keyword.value = historyRecord.value[index].name
    search(keyword.value)
}
/* 搜索 */
const keyword = ref('')
const searchList = ref([

])
async function search(keyword) {
    console.log(keyword);
    // await sleep(500)
}
/* 获取状态栏高度 */
const statusBarHeight = ref(0)
const url = ref('')
const model = ref('')
onLoad((query) => {
    statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight + 'px'
    if (query) {
        url.value = query.url
        model.value = query.model
    }
    console.log(statusBarHeight.value);
    console.log(query);
})
/* 返回 */
function back() {
    uni.navigateBack()
}
</script>
<style lang='scss' scoped>
.search-page {
    margin-top: v-bind(statusBarHeight);

    .search-bar {
        display: flex;
        flex-direction: row;
        padding: 32rpx;
    }

    .search-history {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border-radius: 16rpx;
        padding: 32rpx;
        margin: 32rpx;
        gap: 20rpx;

        .search-history-header {
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            .history-record {
                font-weight: 500;
                font-family: 'PingFang SC';
                font-size: 32rpx;
            }

            .delete-status {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 16rpx;

                .delete-all {
                    color: #797979;
                }

                .line {
                    width: 2rpx;
                    height: 16rpx;
                    background-color: #797979;
                }

                .finish {}
            }

        }

        .search-history-content {

            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-start;
            overflow-y: scroll;
            gap: 16rpx;
            width: 100%;
            height: 220rpx;
            word-break: break-all;
        }
    }

    .search-result {
        display: flex;
        flex: 1;
        height: 100%;

        .result-list {}

        .no-result-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;

            .img {
                height: 92px;
                width: 92px;
            }

            .no-result {
                font-size: 28rpx;
                font-family: 'PingFang SC';
            }
        }
    }
}
</style>