<template>
  <el-form  class="Search-container" ref="form" 
  :model="form" label-width="120px"
  align="left"
  >
    <el-row :gutter="20">
      <el-col :span="6">
        <el-form-item label="运单号">
          <el-input
            size="small"
            placeholder=""
            v-model="form.name"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="承运商">
          <el-input
            size="small"
            placeholder=""
            v-model="form.carrierName"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="承运商接单时间">
          <el-date-picker
            size="small"
            :default-time="['00:00:00', '23:59:59']"
            v-model="storeTime"
            :clearable="false"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="运单状态">
          <el-select
            size="small"
            v-model="form.region"
            placeholder="请选择运单状态"
          >
            <el-option
             v-for="item in statusData"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
            
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item>
          <div class="btn-group c-flex-x-start" style="text-align:left">
            <el-button type="primary" size="small" @click="search"
              >查询</el-button
            >
            <el-button size="small" @click="reset">重置查询</el-button>
            <el-button size="small" @click="excelTo">导出结果</el-button>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { showTip } from "@/utils";
export default {
  name: "Search",
  data() {
    return {
      statusData:[
        {label:'全部',value:''},
        {label:'待揽收',value:0},
        {label:'已揽收',value:1},
        {label:'运输中',value:2},
        {label:'已签收',value:3},
        {label:'异常',value:4},
        {label:'退回中',value:5},
        {label:'已退回',value:6},
        {label:'已送达',value:7},
      ],
      form: {
        "carrierName": "",
        "endReceiveTime": "",
        "startReceiveTime": "",
        "state": '',
        "waybillCode": ""
      },
      storeTime: [],
      pickerOptions:{
        disabledDate:(time)=>{
          if (this.storeTime[0]) {
	           return (
               (
                 time.getTime() > ((new Date(this.storeTime[0]).getTime()  + this.day31)) || 
               (time.getTime() < (new Date(this.storeTime[0]).getTime() - this.day31))
	                )
             )
          }
	         return false;
	       }
        },
        day31: 31 * 24 * 3600 * 1000,
      
    };
  },
  created() {
    // this.getBeforeDay()
  },
  mounted() {
    
  },
  methods: {
    // 导出
    excelTo(){
      this.$emit('excelto')
    },
    // 获取前n天
    getBeforeDay(){
      this.storeTime = [
        moment().subtract(30, 'day').format("YYYY-MM-DD"),
        moment().subtract(0, 'day').format("YYYY-MM-DD")

      ]
    },
    // 初始化默认时间
    getDefaultDate() {
      let time = new Date();
      let year = time.getFullYear();
      let month =
        time.getMonth() + 1 < 10
          ? "0" + (time.getMonth() + 1)
          : time.getMonth() + 1;
      let date = time.getDate() < 10 ? "0" + time.getDate() : time.getDate();
      this.storeTime = [`${year}-${month}-01`, `${year}-${month}-${date}`];
    },
    // 获取当前时间
    search() {
      console.log(this.storeTime)
      let end = new Date(this.storeTime[1]).getTime()
      let start = new Date(this.storeTime[0]).getTime()
      if((end-start)>this.day31){
        showTip('日期间隔不能大于31天', "warning")
        return 
      }
      this.$emit('search', this.form)
    },
    reset() {
      this.form = {
        name: "",
        region: "",
      };
    },
    getParams() {
      if(this.storeTime.length){
        this.form.startReceiveTime = this.storeTime[0]+' 00:00:00'
        this.form.endReceiveTime = this.storeTime[1]+' 23:59:59'
      }
      console.log(this.storeTime)
      return this.form
    },
  },
};
</script>

<style lang="scss" scoped>
.Search-container {
  .btn-group {
    padding-top: 4px;
  }
}
</style>
