<template>
  <card :header="false" :filter="false">
    <el-form ref="searchForm" :model="searchForm" inline>
      <el-form-item label="单据日期">
        <el-date-picker
          v-model="dateArea"
          :clearable="false"
          :default-time="['00:00:00', '23:59:59']"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          unlink-panels
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="changeDate"
        />
      </el-form-item>
    </el-form>
  </card>
</template>
<script>
export default {
  name: 'StartEnd',
  data() {
    return {
      searchForm: {
        strstartdate: '',
        strenddate: ''
      },
      dateArea: []
    }
  },
  created() {
    this.DateFn()
  },
  methods: {
    // 月初到月末
    DateFn() {
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const start = year + '-' + this.zero(month) + '-' + '01' + ' 00:00:00'
      const endDay = new Date(year, month, 0).getDate()
      const end = year + '-' + this.zero(month) + '-' + endDay + ' 23:59:59'
      this.dateArea = [start, end]
      this.searchForm.strstartdate = start
      this.searchForm.strenddate = end
    },
    zero(val) {
      if (val <= 9) {
        val = '0' + val
      }
      return val
    },
    // 改变单据日期
    changeDate(val) {
      if (!val) {
        this.searchForm.strstartdate = ''
        this.searchForm.strenddate = ''
        return false
      }
      this.searchForm.strstartdate = val[0]
      this.searchForm.strenddate = val[1]
    }
  }
}
</script>
<style scoped>

</style>