<template>
    <div class="search">
        <div class="searchBar">
            <el-select v-model="type" @change="search">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>

            <el-input
                class="search-input"
                v-model="searchval"
                @change="search"
                @keydown.enter="search"
                placeholder="请输入..."
                clearable
            >
                <div class="search-icon" slot="prefix">
                    <img :src="require('../assets/svgs/icon_sousuo.svg')" alt="" />
                </div>
            </el-input>

            <el-button type="primary" @click="search">搜索</el-button>
        </div>

        <div class="search-content" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
            <div class="list">
                <template v-if="type === 'orgInfo'">
                    <div class="gride" v-for="item in list" :key="item.id">
                        <org-info :info="item"></org-info>
                    </div>
                </template>

                <template v-else>
                    <div class="gride-col2" v-for="item in list" :key="item.id">
                        <project-info :info="item"></project-info>
                    </div>
                </template>
            </div>

            <p class="tips" v-if="loading">
                <i class="el-icon-loading"></i>
                加载中...
            </p>
            <p class="tips" v-if="empty">没有更多了</p>
        </div>
    </div>
</template>

<script>
import orgInfo from '../components/orgInfo.vue';
import ProjectInfo from '../components/projectInfo.vue';
export default {
    name: 'Search',
    components: { orgInfo, ProjectInfo },
    data() {
        return {
            type: 'project',
            typeOptions: [
                {
                    label: '企业',
                    value: 'orgInfo',
                    url: '/orgInfo/all',
                },
                {
                    label: '项目',
                    value: 'project',
                    url: '/projectManagement/all',
                },
                {
                    label: '指标1',
                    value: 'zhibiao1',
                    url: '/projectManagement/all',
                },
                {
                    label: '指标2',
                    value: 'zhibiao2',
                    url: '/projectManagement/all',
                },
                {
                    label: '指标3',
                    value: 'zhibiao3',
                    url: '/projectManagement/all',
                },
            ],
            searchval: '',
            size: 20,
            page: 0,
            list: [],
            loading: false,
            empty: false,
            startSearch: false,
        };
    },
    computed: {
        url() {
            let info = [...this.typeOptions].find((item) => {
                return item.value === this.type;
            });
            return info ? info.url : '';
        },
        disabled() {
            return this.loading || this.empty || !this.startSearch;
        },
    },
    mounted() {
        this.search();
    },
    methods: {
        load() {
            this.loading = true;
            this.page = this.page + 1;
            this.getData().then((res) => {
                this.loading = false;
            });
        },
        getData() {
            return this.$http
                .get(this.url, {
                    search: this.searchval,
                    size: this.size,
                    page: this.page,
                    sort: 'createdAt,desc',
                })
                .then((res) => {
                    this.list = [...this.list, ...res.content];
                    this.empty = res.empty;
                });
        },
        search() {
            if (this.type !== 'project' && this.type !== 'orgInfo') {
                this.$message.warning('数据格式与分析方案不匹配，请联系技术部门更新数据结构或提供具体业务分析方案');
                this.type = 'project';
                return;
            }
            this.page = 0;
            this.loading = true;
            this.startSearch = true;
            this.list = [];
            this.empty = false;
            this.getData().then((res) => {
                this.loading = false;
            });
        },
    },
};
</script>

<style lang="less" scoped>
.search-content {
    overflow-x: hidden;
    overflow-y: auto;
}
.search {
    .flex-col();
    align-items: center;
    padding-bottom: 30px;
    overflow: hidden;
}
.searchBar {
    .flex();
    position: relative;

    .el-button {
        width: 100px;
        height: 56px;
        border-radius: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
    }

    width: 90%;
    max-width: 730px;

    .el-select {
        max-width: 120px;
    }
}

.search-content {
    flex-grow: 1;
    width: 90%;
    max-width: 1582px;
    background: rgba(15, 36, 77, 0);
    box-shadow: inset 0px 0px 23px 0px rgba(125, 212, 255, 0.29);
    border: 1px solid #3cbef2;
    margin-top: 30px;
}

/deep/ .el-input__inner {
    background-color: transparent;
    border-radius: 0;
    box-shadow: inset 0px 0px 23px 0px rgba(125, 212, 255, 0.29);
    border: 1px solid #3cbef2;
}

/deep/ .el-input {
    input {
        font-size: 18px;
        color: #3cbef2;
        line-height: 25px;
        height: 56px;
        &:hover {
            border-color: #3cbef2;
        }
    }
    .el-input__suffix {
        right: 15px;
    }
}
/deep/ .search-input {
    margin-left: 10px;
    input {
        padding-left: 60px;
        color: #fff;
    }

    .el-input__suffix {
        right: 120px;
    }
    max-width: 600px;
}
.search-icon {
    height: 56px;
    .flex();
    padding: 0 6px 0 20px;
}

.search-content {
    padding: 20px 0;
}

.list {
    width: 90%;
    max-width: 1350px;
    margin: 0 auto;
    .flex();
    flex-wrap: wrap;
    .gride {
        width: 20%;
        max-width: 270px;
        padding: 20px 15px;
        box-sizing: border-box;
    }
}

.tips {
    font-size: 16px;
    text-align: center;
    color: #ffffff60;
    padding: 16px 0;
}

.gride-col2 {
    width: 50%;
    padding: 20px;
    box-sizing: border-box;
}
</style>
