<template>
  <el-dialog
    :title="title"
    v-model="visible"
    :width="panelWidth"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-container>
      <el-header>
        <div class="right-panel-search">
          <thirdselect
            v-model="search.materialCategory"
            :item="materialCategoryItem"
          >
          </thirdselect>

          <!-- 物料名称输入框 -->
          <el-input
            v-model="search.materialCode"
            placeholder="物料编码"
            clearable
          >
          </el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="upsearch"
          ></el-button>
          <el-button
            type="primary"
            plain
            @click="add"
          >添加</el-button>
        </div>
      </el-header>
      <el-main class="nopadding">
        <scTable
          ref="table"
          :apiObj="apiObj"
          :column="column"
          :params="params"
          row-key="id"
          highlightCurrentRow
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" width="50" :reserve-selection="true"
            :selectable="selectable"
          ></el-table-column>
        </scTable>
      </el-main>
    </el-container>
  </el-dialog>
</template>

<script>
import module from "./module";
import thirdselect from "@/components/scForm/items/thirdselect";

export default {
  emits: ["success", "closed"],
  components: { thirdselect },
  data() {
    return {
      panelWidth: module.tableSelect.panelWidth || "500",
      title: module.tableSelect.title,
      search: {
        materialCategory: "",
        materialName: "",
        productCode: "",
        profileModel: "",
      },
      visible: false,
      isSaveing: false,
      loading: false,
      apiObj: this.$API.getApi(module.tableSelect.api),
      column: module.tableSelect.column,
      params: module.tableSelect.params,
      selection: [],
      materialCategoryItem: {
         options: { tb: 'product_material_categories', placeholder: '物料/产品分类' }
      },
      listData: []
    };
  },
  mounted() {

  },
  methods: {
    //显示
    open() {
      // console.log(this.apiObj)
      this.visible = true;
      return this;
    },
    setData(listData) {
      this.listData = listData;
    },
    selectable(row, index) {
      return !this.listData.some(item => row.materialCode == item.materialCode)
    },
    currentChange(row) {
      this.selection = [row];
    },
    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection;
    },
    add() {
      this.$emit("success", this.selection)
      this.visible = false;
    },
    //搜索
    upsearch() {
      this.$refs.table.upData(this.search);
    },
  },
};
</script>

<style>
</style>
