<template>
    <div>
        <!-- 搜索 -->
        <!-- <van-sticky offset-top="0">
      <div class="content-wrap">
        <div class="search-wrap">
          <van-search v-model="searchVal" placeholder="搜索" @input="onInput"/>
        </div>
      </div>
      </van-sticky> -->
        <div style="margin-bottom: 1.4rem;">
            <van-tree-select :items="listdata" :active-id.sync="activeId" :main-active-index.sync="activeIndex" @click-item="clickItem">
            </van-tree-select>
        </div>
        <!-- 底部信息 -->
        <footer class="footer">
            <van-cell-group>
                <div class="operate">
                    <van-button size="small" ttype="info" plain native-type="button"
                        style="border-radius: 5px; background-color: #f0f1f5;" @click.native="cancel">取消
                    </van-button>
                    <van-button size="small" type="info" native-type="button"
                        style="margin:0 10px 0 20px;border-radius: 5px;" @click.native="save">保存
                    </van-button>
                </div>
            </van-cell-group>
        </footer>
    </div>
</template>
  
<script>

import { debounce } from "@/utils/common.js";

export default {
    props: {
        listdata: {
            type: Array,
            default: () => [],
        }
    },
    components: {
        // LHeader
    },
    data() {
        return {
            text: "选择人员",
            activeId: 1,
            activeIndex: 0,
            seletedItem:{}
        };
    },
    mounted(){
        this.seletedItem = this.listdata[0].children[0]
    },
    methods: {
        // 待搜索框内容发生变化
        onInput: debounce(function () {

        }, 800),

        selData(e) {
            this.itemSel = e
        },
        clickItem(data) {
            this.seletedItem = data
        },
        save() {
            this.$emit('saveSlect', this.seletedItem)
        },
        cancel() {
            this.$emit('closeSlect')
        }
    }
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
// 搜索
.content-wrap {
    padding: 10px;
    background-color: #f0f1f5;
}

.search-wrap {
    margin: 0.26667rem;

    .van-search {
        border-radius: 5px;
        padding: 5px 12px;
    }

    .van-search__content {
        background-color: #ffffff;
    }
}

.upStep {
    .van-cell-group {
        display: flex;
        height: 1.2rem;
        align-items: center;

        .upStep-btn {
            width: 25%;
            text-align: center;
            display: flex;

            span {
                width: 1.866667rem;
                background-color: #1989fa;
                text-align: center;
                display: inline-block;
                color: white;
                height: 0.8rem;
                line-height: 0.8rem;
                font-size: 0.346667rem;
                border-radius: 0.08rem;
            }
        }

        .upStep-content {
            width: 75%;
            height: 0.8rem;
            line-height: 0.8rem;
            padding-left: 0.42667rem;
            box-sizing: border-box;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

.dept-list-wrap {
    margin-top: 0.266667rem;
}

.people-wrap {
    margin-top: 0.266667rem;

    /deep/ .van-radio__label {
        display: flex;
        align-items: center;
    }
}

.footer {
    width: 100%;
    height: 1.4rem;
    z-index: 9;
    position: fixed;
    bottom: 0px;
    box-shadow: 0px 8px 15px #000;

    .van-cell-group {
        height: 100%;

        .selected {
            height: 1.066667rem;
            display: flex;
            align-items: center;
            padding-left: 10px;
            border-bottom: 1px solid #cacbcb;

            .selected-title {
                color: #4187f7;
            }

            .selected-content {
                width: 80%;
                padding-left: 10px;
                box-sizing: border-box;
            }
        }

        .operate {
            height: 1.333333rem;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .van-button {
                width: 1.6rem;
            }
        }
    }
}
</style>
  