<template slot="header">
  <div class="search-wrapper">
    <ai-row :model="searchForm"
            style="line-height:62px">
      <ai-col :span="1.5">
        <label>所属机构</label>
      </ai-col>
      <ai-col :span="4">
        <ai-cascader expand-trigger="hover"
                     change-on-select
                     :show-all-levels="false"
                     :options="searchStatisticsDeptOptions"
                     v-model="searchForm.deptValue"></ai-cascader>

      </ai-col>
      <ai-col :span="1.5">
        <label>统计周期</label>
      </ai-col>
      <ai-col :span="4">
        <ai-select v-model="searchForm.periodCode"
                   @change="periodChange">
          <ai-option v-for="(item,index) in searchStatisticsPeriodOptions"
                     :key="index"
                     :label="item.label"
                     :value="item.value"></ai-option>
        </ai-select>
      </ai-col>
      <ai-col :span="6"
              v-show="customShow">
        <ai-date-picker class="date-picker"
                        v-model="searchTimeRange"
                        type="daterange"
                        value-format="timestamp"
                        :clearable="false"
                        :picker-options="pickerOptions"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"></ai-date-picker>
      </ai-col>
      <ai-col :span="6"
              class="search-btn">
        <ai-button class="reset-btn"
                   plain
                   @click="resetQueryCondition()">重置</ai-button>
        <ai-button type="primary"
                   @click="sendsearchForm">查询</ai-button>
      </ai-col>
    </ai-row>
  </div>
</template>

<script>
import { getCurrentMonthRange } from '@/assets/js/common'
export default {
  data: function () {
    return {
      name: 'd2-dept-search',
      customShow: false,
      searchTimeRange: '',
      searchStatisticsDeptOptions: [],
      searchStatisticsPeriodOptions: [
        { value: '01', label: '本年' },
        { value: '02', label: '本季度' },
        { value: '03', label: '本月' },
        { value: '04', label: '上月' },
        { value: '05', label: '自定义' }
      ],
      searchForm: {
        deptValue: [],
        periodCode: '03',
        startTime: '',
        endTime: '',
        dimensionality: ''
      },
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate.getTime()
          if (maxDate) {
            this.pickerMinDate = ''
          }
        },
        disabledDate: (time) => {
          if (this.pickerMinDate !== '') {
            const day365 = (365 - 1) * 24 * 3600 * 1000
            let maxTime = this.pickerMinDate + day365
            if (maxTime > new Date()) {
              maxTime = new Date()
            }
            return time.getTime() > maxTime
          }
          return time.getTime() > Date.now()
        }
      }
    }
  },
  created () {
  },
  methods: {
    periodChange () {
      // 统计周期change事件
      if (this.searchForm.periodCode === '05') {
        this.customShow = true
      } else {
        this.customShow = false
      }
    },
    resetQueryCondition () {
      this.searchForm.periodCode = this.searchStatisticsPeriodOptions[2].value
      this.customShow = false
      this.searchCreateTimeRange = getCurrentMonthRange()
      this.searchForm.deptValue = [
        this.searchStatisticsDeptOptions[0].value
      ]
    },
    sendsearchForm: function () {
      this.$data.searchForm.startTime = this.searchTimeRange[0]
      this.$data.searchForm.endTime = this.searchTimeRange[1]
      this.$emit('search', this.$data.searchForm)
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/style/common/common-invoice-receipt";
.search-wrapper {
  background-color: white;
  padding-left: 20px;
  font-size: 14px !important;
  border-bottom: 20px solid #f0f2f5;
}
</style>
