<template>
  <!-- 在途运输信息选择页面 -->
  <div class="inTransit">

    <el-form :inline="true" style="margin-top: 0.5rem;">
  <el-form-item>
    <label class="el-form-item__label" style="width: auto;">时间段</label>
         <el-date-picker
      v-model="dateValue"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  </el-form-item>
  <el-form-item>
      <label class="el-form-item__label" style="width: auto;">产品分类</label>
      <el-autocomplete
        popper-class="my-autocomplete"
        v-model="inputValue"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容" 
      >
        <i class="el-icon-edit el-input__icon" slot="suffix"> </i>
      </el-autocomplete>
  </el-form-item>
  <el-form-item>
      <label class="el-form-item__label" style="width: auto;margin-top: 0.4rem;">车牌号</label>
  </el-form-item>
  <el-form-item>
      <el-input class="el-form-item__content" v-model="capacityNumber1" placeholder="请输入内容"></el-input>
  </el-form-item>
  <el-form-item>
      <label class="el-form-item__label" style="width: auto;margin-top: 0.4rem;">收货单位</label>
  </el-form-item>
  <el-form-item>
      <el-input v-model="consigneeCompanyName1" placeholder="请输入内容"></el-input>
  </el-form-item> 
  <el-form-item>
    <el-button type="primary" @click="onSearch"><i class="el-icon-search"></i>查询</el-button>
  </el-form-item>
</el-form>
  
    <!-- 执行中 -->
<el-tabs v-model="activeName" >
    <el-tab-pane label="执行中" name="first">
    <dilTable ref="tab" v-bind.sync="option">
      <el-table-column fixed="right" label="操作" width="110">
        <template slot-scope="scope">
          <el-button @click="click(scope.row)" type="text" size="small" style="font-size: 17px"
            >实时轨迹</el-button
          >
        </template>
      </el-table-column>
    </dilTable>
    </el-tab-pane>
    <!-- 已结束 -->
      <el-tab-pane label="已结束" name="second">
        <dilTable ref="tab2" v-bind.sync="option2">
         <el-table-column fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <el-button @click="historyclick(scope.row)" type="text" size="small" style="font-size: 17px">历史轨迹</el-button>
          <el-button @click="allDistanceclick(scope.row.orderNumber)" type="text" size="small" style="font-size: 17px">总距离</el-button>
        </template>
      </el-table-column>
        </dilTable>
      </el-tab-pane>
      <!-- 有异常 -->
      <el-tab-pane label="有异常" name="third">
        <dilTable ref="tab3" v-bind.sync="option3">
         <el-table-column fixed="right" label="操作" width="110">
        <template slot-scope="scope">
          <el-button @click="inTransitAlarmclick(scope.row.orderNumber)" type="text" size="small" style="font-size: 17px">运输报警</el-button>
        </template>
      </el-table-column>
        </dilTable>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>

export default {
  name: "inTransit",
  data() {
    return {
      dateValue:[new Date(), new Date()],
      inputValue:"",
      capacityNumber1:"",
      consigneeCompanyName1:"",
      status: "",
      state: "",
      activeName: "first",
      option: {       
        // 表格请求数据的地址
        requestUrl: "/api/v1/tms/getTruckOrderInfo?apiId=160",
      },
       option2: {
        // 表格请求数据的地址
        requestUrl: "/api/v1/tms/getFinishTruckOrderInfo?apiId=160",
      },
       option3: {
        // 表格请求数据的地址
        requestUrl: "/api/v1/tms/getHaveAbnormalTruckOrderInfo?apiId=160",
      }
    };
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return [
        { value: "带钢"},
        { value: "微粉"},
        { value: "螺纹钢"},
        { value: "钢坯"},
        { value: "其他"},
      ];
    },

    onSearch(){
      if(this.activeName=="first"){
        console.log("startTime",this.dateValue[0]);
        console.log("endTime",this.dateValue[1]);
      //改变执行中条件
      this.$refs.tab.setDataRequestQuery({"startTime":sjTime(this.dateValue[0]),
                      "endTime": sjTime(this.dateValue[1]),
                      "productClassification": this.inputValue,
                      "capacityNumber1": this.capacityNumber1,
                      "consigneeCompanyName1": this.consigneeCompanyName1});
      }
      if(this.activeName=="second"){
      //改变已完成条件              
      this.$refs.tab2.setDataRequestQuery({"startTime":sjTime(this.dateValue[0]),
                      "endTime": sjTime(this.dateValue[1]),
                      "productClassification": this.inputValue,
                      "capacityNumber1": this.capacityNumber1,
                      "consigneeCompanyName1": this.consigneeCompanyName1});
      }
      if(this.activeName=="third"){
      //改变有异常条件              
      this.$refs.tab3.setDataRequestQuery({"startTime":sjTime(this.dateValue[0]),
                      "endTime": sjTime(this.dateValue[1]),
                      "productClassification": this.inputValue,
                      "capacityNumber1": this.capacityNumber1,
                      "consigneeCompanyName1": this.consigneeCompanyName1});
      }                              
    },


    //other
    click(row) {
      this.$router.push("/pathView?orderNumber="+row.orderNumber+"&capacityNumber="+row.capacityNumber);
    },
    historyclick(row){
      this.$router.push("/pathView?orderNumber="+row.orderNumber+"&capacityNumber="+row.capacityNumber);
    },
    allDistanceclick(orderNumber){
      this.$router.push("/inTransitOrderMileage?orderNumber="+orderNumber);
    },
    inTransitAlarmclick(orderNumber){
      this.$router.push("/inTransitAlarm?orderNumber="+orderNumber);
    },
    },
};
</script>
<style lang='scss' scoped>
.homeworkPath {
  .top {
    padding: 20px 30px;
  }
}
</style>