<template>
    <div class="search-fold-ctn">
        <div class="fold-header" @click="foldShow = !foldShow">
            <span>全部记录 (10)</span>
            <i v-show="!foldShow" class="iconfont">&#xe113;</i>
            <i v-show="foldShow" class="iconfont">&#xe114;</i>
        </div>
        <div v-show="foldShow" class="fold-ctn">
            <popup-radio class="timerSelect" title="选择学期" :options="options" v-model="selectValue" placeholder="请选择学期...">
            </popup-radio>
            <x-input label-width="6em" :title='`<span>搜索</span>`' v-model="searchValue" placeholder="请输入文档标题关键字搜索...">
                <!-- <i slot="right-full-height" class="iconfont">&#xe112;</i> -->
            </x-input>
            <div class="btn-ctn">
                <x-button class="reset" mini plain @click.native="reset">重置</x-button>
                <x-button class="inquire" mini>查询</x-button>
            </div>
        </div>
    </div>
</template>

<script>
import { XInput, Group, PopupRadio, XButton } from 'vux'
export default {
    name: 'SearchFold',
    components: {
        XInput,
        Group,
        PopupRadio,
        XButton
    },
    data () {
        return {
            foldShow: '', // 文档列表是否展开
            selectValue: '', // 学期选择的值
            searchValue: '', // 搜索的值
            options: ['全部', '第一学期', '第二学期']
        }
    },
    methods: {
        reset () {
            this.selectValue = ''
            this.searchValue = ''
        }
    }
}
</script>

<style lang="less" scoped>
.search-fold-ctn {
    .fold-header {
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        background: #F2F2F2;
        .iconfont {
            color: #1890FF;
            font-size: 16px;
        }
    }
    /deep/ .fold-ctn {
        font-size: 16px;
        &:before {
            border: none;
        }
        .timerSelect {
            border-bottom: 1px solid #D7D7D7;
            height: 45px;
            .vux-cell-primary {
                -webkit-box-flex: none;
                -ms-flex: none;
                flex: none;
            }
            .vux-cell-bd {
                width: 94px;
                p {
                    .vux-label {
                        color: black;
                        width: 108px;
                        padding-left: 5px;
                        font-size: 16px;
                        padding-top: 10px;
                    }
                }
            }
            .weui-cell__ft {
                margin-left: 6px;
                flex: 1;
                .vux-cell-value, .vux-cell-placeholder{
                    display: inline-block;
                    width: 100%;
                    text-align: left;
                    font-size: 16px;
                }
                .vux-cell-value {
                    color: rgb(75, 75, 75);
                }
                .vux-cell-placeholder {
                    color: rgb(117, 117, 117);
                }
                &:after {
                    width: 8px;
                    height: 8px;
                    margin-right: 5px;
                    border-color: rgb(163, 163, 163);
                }
            }
        }
        .vux-x-input {
            border-bottom: 1px solid #D7D7D7;
            height: 45px;
            &:before {
                border: none;
            }
            .weui-cell__hd {
                padding-left: 5px;
            }
            .iconfont {
                line-height: 45px;
                font-size: 16px;
                margin-right: 15px;
            }
        }
    }

    /deep/ .btn-ctn {
        text-align: center;
        padding: 15px 0 10px 0;
        .weui-btn {
            width: 1.8rem;
            height: 0.7rem;
            font-size: 16px;
        }
        .reset {
            margin-right: 0.25rem;
            border-color: #1890FF;
            color: #1890FF;
        }
        .inquire {
            background: #1890FF;
            color: white;
        }
    }
}
</style>
