<!-- 搜索表单 -->
<template>
    <el-form
      label-width="90px"
      class="ele-form-search"
      @keyup.enter.native="search"
      @submit.native.prevent
    >
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { lg: 4, md: 10 } : { span: 4 }">
          <el-form-item label="回收单号:">
            <el-input
              size="mini"
              clearable
              v-model="where.code"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
  
        <el-col v-bind="styleResponsive ? { lg: 4, md: 10 } : { span: 4 }">
          <el-form-item label="工单号:">
            <el-input
              size="mini"
              clearable
              v-model="where.workOrderCode"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>



      <el-col v-bind="styleResponsive ? { lg: 4, md: 10 } : { span: 4 }">
        <el-form-item label="工序名称:">
  
          <el-select size="mini"   v-model="where.taskId"  filterable>
            <el-option
              v-for="(item, index) in produceTaskList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>



      <el-col v-bind="styleResponsive ? { lg: 4, md: 10 } : { span: 4 }">
          <el-form-item label="物品名称:">
            <el-input
              size="mini"
              clearable
              v-model="where.categoryName"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>


        
  

        <el-col v-bind="styleResponsive ? { lg: 4, md: 10 } : { span: 4 }">
          <el-form-item label-width="0px">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-search"
              class="ele-btn-icon"
              @click="search"
            >
              查询
            </el-button>
            <el-button
              size="mini"
              @click="reset"
              icon="el-icon-refresh-left"
              type="primary"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </template>
  
  <script>
    import { produceTask } from '@/api/InTheSystem/index';
    export default {
      props: {
  
      },
      data() {
        // 默认表单数据
        const defaultWhere = {
          code: '',
          workOrderCode: '',
          taskId: '',
          categoryName: ''
        };
        return {
          // 表单数据
          where: { ...defaultWhere },

          produceTaskList: []
        };
      },
      computed: {
        // 是否开启响应式布局
        styleResponsive() {
          return this.$store.state.theme.styleResponsive;
        }
      },
      watch: {},
      created() {
        this.getTaskList();
      },
      methods: {

        getTaskList() {
        produceTask().then((res) => {
          this.produceTaskList = res.list;
          this.where.taskId =  res.list[0].id


           if(this.where.taskId) {
            this.$emit('search', this.where);
           }
        
        });
      },


        /* 搜索 */
        search() {
          this.$emit('search', this.where);
        },
        /*  重置 */
        reset() {
          this.where = { ...this.defaultWhere };
          this.search();
        }
      }
    };
  </script>
  <style lang="scss" scoped>
    .ele-form-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  </style>
  