<template>
  <el-select
    v-model="selected"
    :placeholder="placeholder"
    filterable
    clearable
    @change="onChange"
    style="width: 100%"
  >
    <el-option
      v-for="item in options"
      :key="item.rawMaterialId"
      :label="item.rawMaterialName"
      :value="item.rawMaterialId"
    />
  </el-select>
</template>

<script>
import { listRawMaterial } from "@/api/wms/rawMaterial";

export default {
  name: "RawMaterialSelect",
  props: {
    value: [String, Number],
    placeholder: {
      type: String,
      default: "请选择原材料"
    }
  },
  data() {
    return {
      options: [],
      selected: this.value
    };
  },
  watch: {
    value(val) {
      this.selected = val;
    }
  },
  mounted() {
    this.fetchOptions();
  },
  methods: {
    fetchOptions() {
      listRawMaterial({ pageNum: 1, pageSize: 1000 }).then(res => {
        this.options = res.rows || [];
      });
    },
    onChange(val) {
      this.$emit("input", val);
      this.$emit("change", val);
    }
  }
};
</script>
