<template>
  <div class="row">
    <slot name="CRUD-btn" />
    <div class="fr">
      <div style="margin-bottom: 10px; overflow: hidden">
        <slot name="left-btn" />
      </div>
      <div class="fr right">
        <slot name="searchSelect"></slot>
        <el-input
          v-model="pageParam.text"
          placeholder="请输入搜索内容"
          size="small"
          style="width: 300px; border-radius: 4px; margin-right: 10px"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-button type="primary" icon="el-icon-search" round size="small" @click="searchBtn">搜索</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'search-time',
  data() {
    return {
      pageParam: {
        type: 0, // 选择今天还是本周，本月，本季  0 = 今天，1 = 本周，2 = 本月，3= 本季
        text: '', // 输入搜索的订单Id或者XX
        data: [], // 开始和结束时间的数组
        current: 1, // 当前页
        size: 10 // 每页数据条数
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value2: ''
    }
  },
  methods: {
    //  选择筛选条件
    //   selectTerm(e) {
    //     this.current = e
    //     this.pageParam.type = e
    //   },
    //  搜索
    searchBtn() {
      console.log('pageParam', this.pageParam)
      this.$emit('searchList', this.pageParam)
    }
  }
}
</script>

<style lang="scss" scoped>
  // base color
  $blue:#324157;
  $light-blue:#3A71A8;
  $red:#C03639;
  $pink: #E65D6E;
  $green: #30B08F;
  $tiffany: #4AB7BD;
  $yellow:#FEC171;
  $panGreen: #30B08F;
  $currentColor: #00c4c2;
  $bgColor: #f0f2f5;

  // sidebar
  $menuText:#bfcbd9;
  $menuActiveText:#409EFF;
  $subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951

  $menuBg:#304156;
  $menuHover:#263445;

  $subMenuBg:#1f2d3d;
  $subMenuHover:#001528;

  $sideBarWidth: 210px;

  // padding
  $rowPadding:20px 35px;

  // the :export directive is the magic sauce for webpack
  // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
  :export {
    menuText: $menuText;
    menuActiveText: $menuActiveText;
    subMenuActiveText: $subMenuActiveText;
    menuBg: $menuBg;
    menuHover: $menuHover;
    subMenuBg: $subMenuBg;
    subMenuHover: $subMenuHover;
    sideBarWidth: $sideBarWidth;
    currentColor: $currentColor;
  }

  // @import '@/styles/variables.scss';
  .el-button--small.is-round {
    padding: 9px 32px;
  }
  .current {
    background: $currentColor;
    color:#ffffff;
  }

  .date-picker{
    margin-left: 20px;
    width: 240px;
  }

  .el-date-picker >>> .el-date-editor .el-range-input{
    border: 1px solid red !important;
  }
  .el-date-editor .el-range-input{
    border: 1px solid red;
    width: 20%;
  }
  .row{
    position: relative;
  }
  .right {
    text-align: right;
  }
</style>
