<template>
  <div :class="$style.container">
    <span :class="$style['label-name']">{{ $t('module.teamManager.Handover.Keyword') }}</span>
    <el-input
      v-model="keywords"
      :placeholder="placeholder"
      :clearable="true"
      style="width:150px;max-width:100%;margin-right:16px;"
    />
    <span :class="$style['label-name']">{{ $t('module.teamManager.Handover.'+handoverTme) }}</span>
    <el-date-picker
      v-model="dts"
      type="datetimerange"
      style="margin-right:16px;"
      align="right"
      unlink-panels
      value-format="yyyy-MM-dd HH:mm:ss"
      :range-separator="'formItem.to' | i18nFilter"
      :start-placeholder="'formItem.beginTime' | i18nFilter"
      :end-placeholder="'formItem.endTime' | i18nFilter"
      :picker-options="pickerOptions"
    />
    <span :class="$style['label-name']">{{ $t('module.teamManager.Handover.HandoverStatus') }}</span>
    <el-select
      v-model="handoverStatus"
      style="margin-right:16px;"
      filterable
      clearable
    >
      <el-option
        v-for="item in workStatusOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-button type="primary" icon="el-icon-search" @click="handleSearch()">
      {{ 'btn.search' | i18nFilter }}
    </el-button>
    <slot />
  </div>
</template>
<script>
import moment from 'moment'
import i18n from '@/lang'

const pickerOptions = {
  shortcuts: [
    {
      text: i18n.t('datePickerOption.lastWeek'),
      onClick(picker) {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        picker.$emit('pick', [start, end])
      }
    },
    {
      text: i18n.t('datePickerOption.lastMonth'),
      onClick(picker) {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        picker.$emit('pick', [start, end])
      }
    },
    {
      text: i18n.t('datePickerOption.lastThreeMonths'),
      onClick(picker) {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
        picker.$emit('pick', [start, end])
      }
    }
  ]
}

const workStatusOptions = [{
  value: null,
  label: i18n.t('module.teamManager.Handover.all')
},
{
  value: 0,
  label: i18n.t('module.teamManager.Handover.offduty')
},
{
  value: 1,
  label: i18n.t('module.teamManager.Handover.working')
}]

export default {
  props: {
    lableName: {
      type: String,
      default: '关键字'
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    handoverTme: {
      type: String,
      default: 'HandoverTme'
    }
  },
  data() {
    return {
      keywords: '',
      dts: ['', ''],
      pickerOptions,
      handoverStatus: null,
      workStatusOptions
    }
  },
  methods: {
    handleSearch() {
      console.log(this.dts)
      const param = {
        keyWords: this.keywords,
        keywords: this.keywords,
        handoverBegTime: this.dts ? moment.utc(this.dts[0]) : null,
        handoverEndTime: this.dts ? moment.utc(this.dts[1]) : null,
        planHandoverBegTime: this.dts ? moment.utc(this.dts[0]) : null,
        planHandoverEndTime: this.dts ? moment.utc(this.dts[1]) : null,
        handoverStatus: this.handoverStatus,
        teamWorkStatus: this.handoverStatus
      }
      this.$emit('on-search', param)
    }
  }
}
</script>
<style lang="scss" module>
.container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 4px 40px;
  background-color: #eee;
  .label-name {
    margin-right: 8px;
    font-size: 14px;
  }
}
</style>
