<template>
  <div>
    <div>
      <a-form
        :class="$style.antAdvancedSearchForm"
        :form="form"
        v-bind="formItemLayout"
        layout="horizontal"
        @submit="handleSearch"
      >
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="拟稿部门">
              <sd-group-picker v-model="createDeptName" :single="true" :read-only="false" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="开始时间">
              <a-date-picker
                mode="year"
                format="YYYY"
                :allow-clear="false"
                placeholder="选择年份"
                :input-read-only="true"
                :value="startTime"
                @panelChange="panelStartYearChange"
              ></a-date-picker>
              <!-- <a-range-picker v-decorator="[`time`]" @change="onChange" /> -->
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="结束时间">
              <a-date-picker
                mode="year"
                format="YYYY"
                :allow-clear="false"
                placeholder="选择年份"
                :input-read-only="true"
                :value="endTime"
                @panelChange="panelEndYearChange"
              ></a-date-picker>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :class="$style.searchbutton" :span="24">
            <a-button @click="handleReset">
              重置
            </a-button>
            <a-button type="primary" html-type="submit">
              查询
            </a-button>
            <a-button @click="exportData">导出</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </div>
</template>

<script>
import { Message } from 'ant-design-vue'
import moment from 'moment'
import components from './_import-components/sd-flowflter-tongji-import'

export default {
  name: 'SdFlowflterTongji',
  metaInfo: {
    title: 'SdFlowflterTongji',
  },

  components,
  data() {
    return {
      createDeptName: [],
      startTime: '',
      endTime: '',
      startYear: '', // 开始年
      endYear: '', // 结束年
      searchs: {
        deptId: null,
        startTime: null,
        endTime: null,
      },
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
      },
      form: this.$form.createForm(this, { name: 'advanced_search' }),
    }
  },
  computed: {
    count() {
      return this.expand ? 11 : 7
    },
  },
  methods: {
    moment,
    // onChange(date) {
    //   this.startTime = date[0].valueOf()
    //   this.endTime = date[1].valueOf()
    // },
    panelStartYearChange(value) {
      this.startTime = value
      this.startYear = moment(value).format('YYYY')
    },
    panelEndYearChange(value) {
      this.endTime = value
      this.endYear = moment(value).format('YYYY')
    },
    handleSearch(e) {
      e.preventDefault()
      let deptId = ''
      if (Number(this.startYear) > Number(this.endYear)) {
        Message.warn('开始年份不能大于结束年份')
        return
      }
      if (this.createDeptName && this.createDeptName.length > 0) {
        deptId = this.createDeptName[0].code
      }
      if (this.endYear === '' && this.startYear === '') {
        this.searchs = {
          deptId: Number(deptId),
          startDate: '',
          endDate: '',
        }
      } else if (this.endYear === '' || this.startYear === '') {
        this.searchs = {
          deptId: Number(deptId),
          startDate: '',
          endDate: '',
        }
      } else {
        this.searchs = {
          deptId: Number(deptId),
          startDate: Number(new Date(this.startYear, 0, 1).valueOf()),
          endDate: Number(new Date(this.endYear, 11, 31, 23, 59, 59).valueOf()),
        }
      }
      this.$emit('search-submit', this.searchs)
    },
    exportData(e) {
      e.preventDefault()
      let deptId = ''
      if (Number(this.startYear) > Number(this.endYear)) {
        Message.warn('开始年份不能大于结束年份')
        return
      }
      if (this.createDeptName && this.createDeptName.length > 0) {
        deptId = this.createDeptName[0].code
      }
      if (this.endYear === '' && this.startYear === '') {
        this.searchs = {
          deptId: Number(deptId),
          startDate: '',
          endDate: '',
        }
      } else {
        this.searchs = {
          deptId: Number(deptId),
          startDate: Number(new Date(this.startYear, 0, 1).valueOf()),
          endDate: Number(new Date(this.endYear, 11, 31).valueOf()),
        }
      }

      this.$emit('export-data', this.searchs)
    },
    handleReset() {
      this.form.resetFields()
      this.createDeptName = []
      this.startTime = ''
      this.endTime = ''
      this.$emit('reset-data', '')
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.ant-advanced-search-form button {
  margin: 0 5px 10px;
}
.searchbutton {
  text-align: right;
}
</style>
