<template>
  <div>
    <div class="mrg-b">
      <div v-if="tabIndex!==2">
        <el-row type="flex" justify="start">
          <el-col :span="22"></el-col>
          <el-col :span="2">
            <el-button class="mrg-l" v-auth="50700020102" type="primary" @click="handleMoreSearch">更多</el-button>
            <el-button v-auth="50700020101" icon="el-icon-refresh" class="query__item" type="primary" @click="handleRefresh" plain circle></el-button>
            <el-button
            v-if="false"
              icon="el-icon-download"
              type="primary"
              @click="handleExcel"
              plain
              circle
            ></el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="inputBox" v-if="tabIndex===0">
      <el-form inline :model="query" ref="query" label-position="left">
        <el-form-item label="入库单号" prop="asnNo">
          <el-input v-model="query.asnNo"  @keyup.enter.native="handleSearch"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="headerStatus">
            <el-select multiple  v-model="headerStatus" @change="handleSelected1">
              <template v-for="item in $keys.stockOut.status">
                <el-option :key="item.id" :value="item.key" :label="item.name"></el-option>
              </template>
            </el-select>
          </el-form-item>
        <el-form-item label="优先级别">
            <el-select v-model="priority" filterable placeholder="请选择" @change="handleSelected2">
              <el-option label="最高" value="1"></el-option>
              <el-option label="普通+" value="2"></el-option>
              <el-option label="普通" value="3"></el-option>
              <el-option label="普通-" value="4"></el-option>
              <el-option label="最低" value="5"></el-option>
            </el-select>
          </el-form-item>
        <el-form-item label="是否预约月台" prop="isAppointDock" @change="handleSelected3">
            <el-select v-model="isAppointDock">
              <el-option label="是" value="Y"></el-option>
              <el-option label="否" value="N"></el-option>
            </el-select>
          </el-form-item>
      </el-form>
    </div>
    <div class="inputBox" v-if="tabIndex===1">
      <el-form inline :model="query" ref="query" label-position="left">
        <el-form-item
            label="装车单号"
            prop="ldNo">
            <el-input v-model="query.ldNo"  @keyup.enter.native="handleSearch"></el-input>
          </el-form-item>
          <el-form-item
            label="出库单号"
            prop="soNo">
            <el-input v-model="query.soNo"  @keyup.enter.native="handleSearch"></el-input>
          </el-form-item>
         <el-form-item
            label="车牌号"
            prop="vehicleNo">
            <el-input v-model="query.vehicleNo"  @keyup.enter.native="handleSearch"></el-input>
          </el-form-item>
          <el-form-item
            label="车型"
            prop="vehichleType">
            <el-select multiple v-model="vehichleType" filterable placeholder="请选择" @change="handleSelected4">
              <el-option label="牵引车" value="TR"></el-option>
              <el-option label="大型车辆" value="VE"></el-option>
              <el-option label="小型车辆" value="HI"></el-option>
            </el-select>
          </el-form-item>
      </el-form>
    </div>
    <head-form
    :dialogVisible="dialogVisible"
    @handleClose="handleClose"
    @handleTable="handleTable"
    :tabIndex="tabIndex">
    </head-form>
  </div>
</template>
<script>
import HeadForm from './childrenForm/head-form'
export default {
  components: {
    HeadForm
  },
  data () {
    return {
      query: {},
      dialogVisible: false,
      headerStatus: [],
      priority: '',
      isAppointDock: '',
      vehichleType: [],
      moreData: {}
    }
  },
  props: {
    tabIndex: Number,
    urlKey: String
  },
  methods: {
    handleSelected1 (val) {
      this.query.headerStatus = val.join(',')
      this.handleSearch()
    },
    handleSelected2 (val) {
      this.query.priority = val
      this.handleSearch()
    },
    handleSelected3 (val) {
      this.query.isAppointDock = val
      this.handleSearch()
    },
    handleSelected4 (val) {
      this.query.vehichleType = val.join(',')
      this.handleSearch()
    },

    handleRefresh () {
      this.headerStatus = []
      this.priority = []
      this.isAppointDock = []
      this.$refs.query.resetFields()
      this.$emit('getList', this.urlKey)
    },
    // 搜索
    handleSearch () {
      const query = {
        ...this.query,
        asnNo: `%${this.query.asnNo || ''}%`,
        ldNo: `%${this.query.ldNo || ''}%`,
        soNo: `%${this.query.soNo || ''}%`,
        vehicleNo: `%${this.query.vehicleNo || ''}%`
      }
      this.moreData = query
      this.$emit('getList', this.urlKey, query)
    },
    handleMoreSearch () {
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
    },
    handleTable (val) {
      this.$emit('getTableList', val)
    },
    handleExcel () {
      const url = this.$API.platform.DockDispatchList.getList
      const options = this.moreData
      this.$exportExcel(url, options)
    },
  }
}
</script>
<style lang="scss" scoped>
.inputBox {
  width: 100%;
  border: 1px solid #d1d5db;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  .el-form-item {
    margin-bottom: 0px;
    margin-top: 10px;
  }
}
    .mrg-b{
        margin-bottom: 20px;
    }
    .mrg-l{
        margin-left:10px;
    }
    .inline{
      width: 20%
    }
</style>
