<template>
  <div class="sort">
    <el-dropdown @command="handleCommand" trigger="click">
      <el-button type="primary">
        {{ sortType }}<i class="el-icon-caret-bottom"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="智能排序">智能排序</el-dropdown-item>
        <el-dropdown-item command="时间升序">时间升序</el-dropdown-item>
        <el-dropdown-item command="时间降序">时间降序</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-button class="time" type="primary" @click="handleTime"
      >{{ timeFrame }}
      <i class="el-icon-caret-bottom"></i>
      <el-date-picker
        v-model="value"
        type="daterange"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="handleChangeDate"
        ref="time"
      >
      </el-date-picker>
    </el-button>
    <el-button type="primary" @click="handleClear">清空查询条件</el-button>
  </div>
</template>
<script>
export default {
  name: 'sort',
  data() {
    return {
      value: '',
      sortType: '排序方式',
      timeFrame: '时间范围',
    }
  },
  methods: {
    handleCommand(data) {
      this.sortType = data
      if (data == '智能排序') {
        this.$emit('handleCommand', 1)
      } else if (data == '时间升序') {
        this.$emit('handleCommand', 2)
      } else {
        this.$emit('handleCommand', 3)
      }
    },
    handleChangeDate(value) {
      if (value.length == 2) {
        this.$emit('handleTime', value)
      } else {
        this.$message.info('请选择时间范围')
      }
      this.timeFrame = value.join('~')
    },
    handleTime() {
      let time = this.timeFrame
      if (typeof time == 'string') {
        this.value = this.timeFrame.split('~')
      }
    },
    handleClear() {
      this.sortType = '排序方式'
      this.timeFrame = '时间范围'
      this.$emit('handleClear')
    },
  },
}
</script>
<style lang="scss" scoped>
.el-dropdown {
  vertical-align: top;
  margin-right: 10px;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.sort {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
.time {
  position: relative !important;
  .el-date-editor {
    background-color: darkblue !important;
    width: auto !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 0;
  }
}
</style>
