<template>
    <view class="container">
        <!-- <view class="search-block">
            <uni-search-bar bgColor="#fff" @confirm="search" cancelButton="none" @clear="clear">
            </uni-search-bar>
        </view> -->
        <view class="input-block">
            <view class="cell flex flex-y-c">
                <view class="name">一级类目</view>
                <input type="text" placeholder="搜索一级类目" class="input-box" :value="oneInput" @focus="onFocus('one')"
                    @input="onInput($event,'one')" @blur="onBlur('one')">
            </view>
            <view class="cell flex flex-y-c" v-if="activeOne.id">
                <view class="name">二级类目</view>
                <input type="text" placeholder="搜索二级类目" class="input-box" :value="twoInput" @focus="onFocus('two')"
                    @input="onInput($event,'two')" @blur="onBlur('two')">
            </view>
            <view class="btns flex flex-center">
                <view class="btn cancel-btn" @click="onCancel">取消</view>
                <view class="btn submit-btn" @click="onSubmit">确定</view>
            </view>
        </view>
        <!-- <view class="item flex-y-center" @click="bindcate(index)" v-for="(item,index) of list" :key="index">
            {{item.three_category}}
        </view> -->
        <view class="list" v-show="searchType == 'one'">
            <view class="item border1rpx" v-for="(item,index) in one_list" :key="item.id"
                @click="activeLeimu(item,'one')">{{item.name}}</view>
        </view>
        <view class="list" v-show="searchType == 'two'">
            <view class="item border1rpx" v-for="(item,index) in two_list" :key="item.id"
                @click="activeLeimu(item,'two')">{{item.name}}</view>
        </view>
        <view class="is-iphone-x" style="min-height: 40rpx;"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                timer: '',
                keyword: '',
                list: [],
                page: 1,
                is_bottom: false,
                // 
                one_list: [],
                two_list: [],
                activeOne: {},

                activeTwo: {},

                oneInput: '',
                twoInput: '',
                searchType: 'one'
            }
        },

        onLoad() {
            // this.storeinfo(1);
            this.getOne()
        },

        onReachBottom() {
            // if (!this.is_bottom) {
            //     this.storeinfo(this.page + 1)
            // }
        },
        onUnload() {
            if (this.timer) {
                clearTimeout(this.timer)
            }
        },

        methods: {
            // search(e) {
            //     console.log(e)
            //     this.keyword = e.value
            //     this.storeinfo()
            // },
            // clear() {
            //     this.keyword = ""
            //     this.storeinfo()
            // },
            // bindcate(index) {
            //     let a = this.list[index];
            //     uni.setStorageSync("category", a)
            //     uni.navigateBack()
            // },
            // storeinfo(page = 1) {
            //     if (page == 1) {
            //         this.page = 1
            //         this.is_bottom = false
            //         this.list = []
            //     }
            //     this.request({
            //         url: 'Smdcshop/store_category',
            //         data: {
            //             keyword: this.keyword,
            //             page: page,
            //             limit: 20,
            //         }
            //     }).then(res => {
            //         console.log(res)
            //         if (res.code == 200 && res.data.length) {
            //             this.list = this.list.concat(res.data)
            //             this.page = page
            //         } else {
            //             this.is_bottom = true
            //         }
            //     })
            // },
            getOne() {
                this.request({
                    url: 'Smdcshop/new_store_category',
                    data: {
                        keyword: this.oneInput
                    }
                }).then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        this.one_list = res.data

                    }
                })
            },
            getTwo() {
                this.request({
                    url: 'Smdcshop/weixin_shop_category',
                    data: {
                        code: this.activeOne.id || '',
                        keyword: this.twoInput
                    }
                }).then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        this.two_list = res.data

                    }
                })
            },
            onFocus(type) {
                console.log(type)
                if (type != this.searchType) {
                    this.searchType = type
                    if (type == 'one') {
                        this.getOne()
                    } else if (type == 'two') {
                        this.getTwo()
                    }
                }
            },
            onBlur(type) {
                if (type == 'one') {
                    this.oneInput = this.activeOne.name || ''
                } else if (type == 'two') {
                    this.twoInput = this.activeTwo.name || ''
                }
            },
            onInput(e, type) {
                if (this.timer) {
                    clearTimeout(this.timer)
                }
                this.timer = setTimeout(() => {
                    let val = e.detail.value
                    this.searchType = type
                    if (type == 'one') {
                        this.oneInput = val
                        this.getOne()
                    } else if (type == 'two') {
                        this.twoInput = val
                        this.getTwo()
                    }
                }, 500)
            },
            activeLeimu(item, type) {
                if (type == 'one') {
                    this.oneInput = item.name
                    this.activeOne = item
                    this.activeTwo = {}
                    this.twoInput = ""
                    this.searchType = 'two'
                    this.getTwo()

                } else if (type == 'two') {
                    this.twoInput = item.name
                    this.activeTwo = item

                }
            },
            onCancel() {
                uni.navigateBack()
            },
            onSubmit() {
                this.$nextTick(() => {
                    console.log(this.activeOne)
                    console.log(this.activeTwo)
                    if (!this.activeOne.id) {
                        uni.showToast({
                            title: "请选择一级分类",
                            icon: 'none'
                        })
                        return false
                    } else if (!this.activeTwo.id) {
                        uni.showToast({
                            title: "请选择二级分类",
                            icon: 'none'
                        })
                        return false
                    }
                    let pages = getCurrentPages()
                    if (pages.length > 1) {
                        let prePage = pages[pages.length - 2]
                        console.log(prePage)
                        prePage.$vm['new_shop_category'] = {
                            one_category: this.activeOne,
                            two_category: this.activeTwo
                        }
                        prePage.$vm['new_shop_category_txt'] = `${this.activeOne.name}>${this.activeTwo.name}`
                        uni.navigateBack()
                    }
                })
            },

        }
    }
</script>

<style lang="scss" scoped>
    .search-block {
        height: 100rpx;

    }

    .input-block {
        background-color: #fff;
        box-shadow: 0 10rpx 10rpx #f0f0f0;
        position: sticky;
        top: 0;
        z-index: 100;
        padding: 30rpx 24rpx;

        .cell {
            &~.cell {
                margin-top: 20rpx;
            }

            .name {
                height: 88rpx;
                line-height: 88rpx;
                font-size: 26rpx;
            }

            .input-box {
                flex: auto;
                height: 88rpx;
                background-color: #f6f7f8;
                border-radius: 8rpx;
                font-size: 26rpx;
                padding: 0 20rpx;
                margin-left: 24rpx;
            }
        }

        .btns {
            .btn {
                width: 200rpx;
                height: 60rpx;
                border-radius: 12rpx;
                text-align: center;
                line-height: 60rpx;
                margin: 30rpx 20rpx 0;
            }

            .cancel-btn {
                box-sizing: border-box;
                border: 2rpx solid #3387FF;
                color: #3387FF;
            }

            .submit-btn {
                background: #3387FF;
                color: #fff;
            }
        }

    }

    // .item {
    //     height: 80rpx;
    //     padding: 0 20rpx;
    //     border-bottom: 1rpx solid #F1F1F1;
    // }
    .list {
        .item {
            border-bottom: 1rpx solid #f1f1f1;
            font-size: 26rpx;
            line-height: 80rpx;
            padding: 0 24rpx;

        }
    }
</style>
