<!-- 筛选搜索框用法

  <search-dialog
    :dialog-show="dialogShow"
    @closeDialog="closeDialog"
    @handleGetSearchList="handleGetSearchList">
    <div slot="content">
      xxxx  内容
    </div>
  </search-dialog>

  父组件methods中：
    // 关闭筛选弹框
    closeDialog () {
      this.dialogShow = false
    },
    // 查询
    handleGetSearchList () {
      // 请求后台列表接口
    },
-->
<template>
  <div v-if="dialogShow">
    <div v-transfer-dom>
      <div class="weui-mask"></div>
      <div class="content-dialog">
        <div class="weui-dialog__bd">
          <div class="flex-box">
          <div>
            <group>
              <slot name="content"></slot>
            </group>
          </div>
        </div>
        </div>
        <div class="weui-dialog__ft">
          <a href="javascript:;" @click="onCancel" class="weui-dialog__btn weui-dialog__btn_default">取消</a>
          <a href="javascript:;" @click="onConfirm" class="weui-dialog__btn weui-dialog__btn_primary">搜索</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {TransferDomDirective as TransferDom, Group} from 'vux'
export default {
    name: 'SelectDialog',
    directives: {
        TransferDom
    },
    props: {
        dialogShow: {
            type: Boolean,
            default: false
        }
    },
    components: {
        Group
    },
    data () {
        return {
        }
    },
    methods: {
        onCancel () {
            this.$emit('closeDialog')
        },
        onConfirm (msg) {
            this.$emit('closeDialog')
            this.$emit('handleGetSearchList')
        }
    }
}
</script>
<style lang="less" scoped>
.weui-mask {
  position: fixed;
  z-index: 200;
  top: 44px;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
.content-dialog{
  position: fixed;
  display: table;
  z-index: 400;
  top: 44px;
  left: 0;
  width: 100%;
}
.flex-box {
  display: flex;
  flex-direction: column;
}
/deep/.weui-dialog__bd{
  &:first-child{
    padding: 0;
  }
}
/deep/.weui-label{
  font-size: 13px;
  width: 105px!important;
}
/deep/.weui-select{
  font-size: 13px;
  padding: 0;
  margin: 0;
}
/deep/.weui-cells{
  margin-top: 0px;
}
.weui-dialog__ft{
  align-items: center;
  height: 61px;
  justify-content: space-around;
  background: white;
}
.weui-dialog__btn_default{
  color: #7F7F7F;
  background-color: white;
  border: 1px solid rgba(215, 215, 215, 1);
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  flex: none;
  width: 153px;
  text-align: center;
}
.weui-dialog__btn_primary{
  color: white;
  background-color: rgba(64, 158, 255, 1);
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  flex: none;
  width: 153px;
  text-align: center;
}
/deep/.vux-datetime{
  p{
    width: 105px;
    margin-bottom: 0;
    color: #353535;
    font-size: 13px;
  }
  .vux-datetime-value{
    text-align: left;
    span{
      color: #353535;
      font-size: 13px;
    }
  }
}
/deep/.weui-input{
  font-size: 13px;
  border: none;
  padding: 0;
  &::placeholder {
    color: #353535!important;
  }
}
/deep/.vux-x-input{
  padding: 0;
  padding-left: 15px;
}
/deep/.weui-cell__ft{
  .vux-cell-placeholder{
    color: #999!important;
  }
  .weui-icon-clear{
    margin-right: 10px;
  }
}
</style>
