<!--
 *  @date: 2020/05/21
 *  @author: zhaobingfeng
 *
 *  属性：
 *  @attr value =  boolean  使用v-model绑定
 *  @attr top: 离顶部的高度
 *  @attr cancelText: 取消按钮文案
 *  @attr confirmText: 确认按钮文案
 *
 *  插槽：
 *  1. 默认插槽 弹窗主体内容
 *  2. footer 默认可自定义，默认是只有重置和确认按钮
 -->
<template>
<div>
    <slot name="search-bar">
        <div
             v-if="showBar"
            class="search-bar"
            @click="show = !show"
            :class="{ 'filter': isFilter }"
        >
            {{ isFilter ? `查询结果（${totalCount}）` : `${initText}（${totalCount}）` }}
            <i class="iconfont" :class="{ 'checked':show  }">&#xe113;</i>
        </div>
    </slot>
    <div v-transfer-dom >
      <transition name="popup-animate-top">
        <div class="popup-content" v-show="show" :style="styles">
          <slot></slot>
          <slot name="footer">
            <div class="footer-bar">
               <x-button plain class="flex-1" @click.native="reset">{{ cancelText }}</x-button>
               <x-button  class="flex-1" type="primary" @click.native="confirm">{{ confirmText }}</x-button>
            </div>
          </slot>
        </div>
       </transition>
      <div class="popup-mask" v-show="show"  :style="styles" @click="show = false"></div>
    </div>
</div>
</template>
<script>
import { TransferDomDirective as TransferDom, XButton } from 'vux'
export default {
    name: 'SearchPopup',
    props: {
        value: {
            type: Boolean,
            default: false
        },
        // popup 弹窗位置
        top: {
            type: [Number, String],
            default: '.85rem'
        },
        cancelText: {
            type: String,
            default: '重置'
        },
        confirmText: {
            type: String,
            default: '查询'
        },
        // 是否显示搜索栏， 可以用 插槽 search-bar 自定义内容
        showBar: {
            type: Boolean,
            default: true
        },
        initText: {
            type: String,
            default: '全部会议'
        },
        totalCount: {
            type: [Number, String],
            default: 0
        }

    },
    components: {
        XButton
    },
    directives: {
        TransferDom
    },
    data () {
        return {
            // show: false
            isFilter: false
        }
    },
    watch: {},
    computed: {
        styles () {
            let { top } = this
            return { top }
        },
        show: {
            get () {
                return this.value
            },
            set (v) {
                this.$emit('input', v)
            }
        }

    },
    methods: {
        reset () {
            this.$emit('reset')
        },
        confirm () {
            this.isFilter = true
            this.$emit('confirm')
        }
    },
    deactivated () {
        this.show = false
    }
}
</script>
<style lang="less" scoped>
.search-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    height: .85rem;
    background: #fff;
    font-size: 16px;
    .iconfont{
        font-size: 16px;
        margin-left: 5px;
        transition: all .3s;
    }
    .checked {
        transform: rotate(-180deg);
    }
    &.filter {
        color: #1890FF;
    }
}
.popup-content {
    position: fixed;
    left: 0;
    width: 100%;
    height: auto;
    transition-property: transform;
    transition-duration: .2s;
    z-index: 300;
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
}
.popup-mask {
    position: fixed;
    z-index: 200;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    transition: all .4s;
}
.popup-animate-top-enter, .popup-animate-top-leave-active {
    transform: translate3d(0, -100%, 0);
}
.footer-bar {
  display: flex;
  padding: 10px 15px;
  .weui-btn + .weui-btn {
    margin-left: 20px;
  }
  .weui-btn {
    line-height: 1.75 !important;
    font-size: 14px;
  }
}

</style>
