
<template>
  <div>
    <basicLayout 
      ref="basicLayout" 
      :oldFormPath="{
        add:''
      }"
      tableName="vacationTable" 
      idName="sa_writeoffbillid" 
      :apiId="{query:20221215165504,del:20221124090304}"
      :options="options"
      :hideSearch="true"
      :detailPath="{
        path:'/writeoffbillDetail'
      }"
      @listData="listData"
      @listCreate="listCreate">
      <div slot="titleRight">
        <el-button type="primary" size="small" @click="getVacation" style="margin-left:10px">获 取 最 新 日 期</el-button>
      </div>
      <template #custom>
        <div class="mt-10">
          <p class="search__label">范围:</p>
          <el-select v-model="isnext" style="margin-right:10px" size="small" placeholder="请选择范围" @change="areaChange" class="inline-24">
            <el-option label="今年" value="0"></el-option>
            <el-option label="明年" value="1"></el-option>
          </el-select>
        </div>
        <div class="mt-10" v-if="isnext === '0'">
          <p class="search__label">日期筛选:</p>
          <el-date-picker
              style="margin-right: 24px !important;"
              size="small"
              v-model="dateValue"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="areaChange" clearable>
          </el-date-picker>
        </div>
        <div class="mt-10" v-if="isnext === '1'">
          <p class="search__label">日期筛选:</p>
          <el-date-picker
              style="margin-right: 24px !important;"
              size="small"
              v-model="dateValue"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions1">
          </el-date-picker>
        </div>
      </template>
      <template v-slot:tbList="scope">
        <div>
          {{scope.data.column.data[[scope.data.column.columnname]]}}
        </div>
        <div v-if="!scope.data.column.data[[scope.data.column.columnname]] && scope.data.column.data[[scope.data.column.columnname]] !== 0">--</div>
      </template>
      <template v-slot:tbOpreation="scope">
      </template>
    </basicLayout>
  </div>
</template>

<script>
import { log } from '@antv/g2plot/lib/utils'
export default {
  data () {
    return {
      pickerOptions: {
        disabledDate(time) {
          var year = new Date().getFullYear()
          return (
              time.getTime() > new Date(year + '-12-31').getTime() ||
              time.getTime() < new Date(year + '-01-01').getTime()
          )
        }
      },
      pickerOptions1: {
        disabledDate(time) {
          var year = new Date().getFullYear() +1
          return (
              time.getTime() > new Date(year + '-12-31').getTime() ||
              time.getTime() < new Date(year + '-01-01').getTime()
          )
        }
      },
      options:[],
      isnext:'0',
      dateValue:[]
    }
  },
  methods:{
    listData (data) {
      console.log(data);
      
    },
    listCreate (param) {
      console.log('触发');
      
      param.content.isnext = 0
    },
    async areaChange () {
      console.log(this.dateValue)
      if (this.dateValue === '' || this.dateValue === null){
        this.$refs.basicLayout.param.content.where.begindate = ''
        this.$refs.basicLayout.param.content.where.enddate = ''
      }else {
        this.$refs.basicLayout.param.content.where.begindate = this.dateValue[0].slice(5)
        this.$refs.basicLayout.param.content.where.enddate = this.dateValue[1].slice(5)
      }
      this.$refs.basicLayout.param.content.isnext=this.isnext
      this.$refs.basicLayout.param.content.pageNumber=1
      this.$refs.basicLayout.listData()
    },
    async getVacation () {
      let res = await this.$api.requested({
        "id": 20221214094904,
        "content": {
            "isnext": this.isnext //0今年，1明年
        }
      })
      this.tool.showMessage(res,() => {
        this.$refs.basicLayout.listData()
      })
    }
  }
}

</script>
<style>
</style>