<template>
    <div>
        <div class="box conter1000">
            <el-row :gutter="10" style="margin-bottom: 10px;">
                <el-col :span="8">
                    <el-select
                        style="width: 100%;"
                        placeholder="请选择"
                        v-model="state.id1"
                        @change="state.id2 = ''"
                        clearable
                    >
                        <el-option
                            v-for="option in state.industryList"
                            :key="option.id"
                            :value="option.id"
                            :label="option.name"
                        />
                    </el-select>
                </el-col>
                <el-col :span="8">
                    <el-select
                        style="width: 100%;"
                        placeholder="请选择"
                        v-model="state.id2"
                        @change="state.id3 = ''"
                        clearable
                    >
                        <el-option
                            v-for="option in searchIndustryData(state.id1)['children']"
                            :key="option.id"
                            :value="option.id"
                            :label="option.name"
                        />
                    </el-select>
                </el-col>
                <el-col :span="8">
                    <el-select style="width: 100%;" placeholder="请选择" v-model="state.id3" clearable>
                        <el-option
                            v-for="option in searchIndustryData(state.id2)['children']"
                            :key="option.id"
                            :value="option.id"
                            :label="option.name"
                        />
                    </el-select>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="8">
                    <el-select style="width: 100%;" placeholder="活动状态" v-model="state.status">
                        <el-option
                            v-for="option in [{ status: 1, name: '未开始' }, { status: 2, name: '进行中' }, { status: 3, name: '已结束' },]"
                            :key="option.status"
                            :value="option.status"
                            :label="option.name"
                        />
                    </el-select>
                </el-col>
                <el-col :span="16">
                    <el-row type="flex" class="row-bg" justify="space-between">
                        <el-col :span="21">
                            <el-input v-model="state.title" placeholder="请输入关键词"></el-input>
                        </el-col>
                        <el-col :span="3" style="text-align: right;">
                            <el-button type="primary" @click="handleQuery">搜索</el-button>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <div v-loading="loading">
                <div
                    class="_item pointer"
                    v-for="item in state.list"
                    :key="item.id"
                    @click="handleDetail(item.id)"
                >
                    <div class="_l">
                        <el-image
                            style="width: 358px; height: 200px; vertical-align: middle"
                            :src="item.image"
                            fit="fill"
                        ></el-image>
                    </div>
                    <div class="_r">
                        <p class="text_hidden">{{ item.title }}</p>
                        <div
                            class="_time"
                        >活动时间：{{ parseTime(item.begin_at) }} - {{ parseTime(item.finish_at) }}</div>
                        <div class="_info">
                            <span class="fl">
                                <span class="x_blue">{{ item.join_count }}</span> 人报名
                            </span>
                            <el-button
                                class="fr x16"
                                style="border-radius: 0"
                                type="info"
                                v-if="item.status == 1"
                                disabled
                            >未开始</el-button>
                            <el-button
                                v-else-if="item.status == 2"
                                class="fr x16 x_blue x_border_blue"
                                style="border-radius: 0"
                            >报名</el-button>
                            <el-button
                                v-if="item.status == 3"
                                class="fr x16"
                                style="border-radius: 0"
                                type="info"
                                disabled
                            >已结束</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <pagination
                class="pagination"
                :total="state.total"
                :pageSizes="state.pageSizes"
                v-model:page="state.pageNum"
                v-model:limit="state.pageSize"
                :autoScroll="false"
                @pagination="getDataList"
            />
        </div>
    </div>
</template>

<script setup>
import request from '@/utils/request'
import { industry } from "@/api/website/home/index";
const router = useRouter();
const loading = ref(true);
const state = reactive({
    kind: [],
    kindId: '',
    list: [],
    pageNum: 1,
    total: 1,
    pageSize: 10,
    pageSizes: [10, 10 << 1, 10 << 2, 10 << 3],
    title: "",
    industryList: [],
    id1: '',
    id2: '',
    id3: '',
});

let treeData = [];

function searchIndustryData (code) {
    return deepFindTree(code, treeData);
}

function deepFindTree (code, arr) {
    let snap = false;
    for (let index = 0; index < arr.length; index++) {
        const ele = arr[index];
        if (code == ele.id) {
            snap = ele;
            break;
        } else if (ele['children'] != null) {
            snap = deepFindTree(code, ele['children']);
            if (snap) {
                break;
            }
        } else {
            snap = false;
        }
    }
    return snap;
}

function activity () {
    let industry = '';
    if (state.id1) {
        industry += state.id1;
    }
    if (state.id2) {
        industry += `-${state.id2}`;
    }
    if (state.id3) {
        industry += `-${state.id3}`;
    }
    return request({
        url: '/v1/activity',
        method: 'post',
        data: { industry, status: state.status, page_num: state.pageNum, page_size: state.pageSize, title: state.title }
    })
}


function getDataList () {
    loading.value = true;
    activity().then(res => {
        if (200 == res.code) {
            state.total = res.data.count;
            state.list = res.data.data;
            loading.value = false;
        }
    }).catch(() => {
        loading.value = false;
    })
}

onMounted(() => {
    init();
});

function init () {
    loading.value = true;
    industry().then(res => {
        if (200 == res.code) {
            state.industryList = res.data;
            treeData = res.data;
            console.log('++++++')
            console.log(searchIndustryData(15))
        }
    })

    getDataList();

}

function handleDetail (id) {
    let routeData = router.resolve({ path: `/activity/detail/${id}` });
    window.open(routeData.href, '_blank');
}

function handleQuery () {
    state.pageNum = 1;
    getDataList();
}

</script>


<style  lang="scss" scoped>
.box {
    position: relative;
    padding-top: 20px;
    .el-input {
        // ::v-deep(.el-input__inner) {
        //     border-right: 0;
        // }
        ::v-deep(.el-input-group__append) {
            overflow: hidden;
            font-size: 16px;
            color: #fff;
            border-top-color: #0054ff;
            border-right-color: #0054ff;
            border-bottom-color: #0054ff;
            background-color: #0054ff;
        }
    }
    ._item {
        display: flex;
        margin-top: 16px;
        ._r {
            flex: 1;
            padding: 36px 20px 0 16px;
            background-color: #fff;
            p {
                margin-top: 0;
                font-size: 16px;
                font-weight: 600;
                color: #333333;
                line-height: 30px;
            }
            ._time {
                margin-bottom: 7px;
                font-size: 16px;
                font-weight: 400;
                color: #666666;
            }
            ._info {
                .fl {
                    font-size: 16px;
                    font-weight: 400;
                    color: #666666;
                    span {
                        font-size: 30px;
                    }
                }
            }
        }
    }
}
</style>