<template>
  <el-dialog
    title="选择物料"
    :visible.sync="groupVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="60%"
  >
    <div>
      <el-form label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="分类" prop="categoryLevelGroupId">
              <categoryGroupSelect v-model="searchForm.categoryLevelGroupId" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="编码" prop="code">
              <el-input v-model="searchForm.code"></el-input
            ></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="名称" prop="name">
              <el-input v-model="searchForm.name"></el-input
            ></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="牌号" prop="brandNum">
              <el-input v-model="searchForm.brandNum"></el-input
            ></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="型号" prop="modelType">
              <el-input v-model="searchForm.modelType"></el-input
            ></el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="ele-form-actions">
              <el-button icon="icon-reset" @click="handleReset">重置</el-button>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleSearch"
                >搜索</el-button
              >
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div class="table_col">
        <el-table
          :data="tableData"
          height="450"
          ref="tableRef"
          highlight-current-row
          @row-click="single"
        >
          <el-table-column label="编码" prop="code"></el-table-column>
          <el-table-column
            label="名称"
            prop="name"
            width="200"
          ></el-table-column>
          <el-table-column
            label="牌号"
            prop="brandNum"
            width="200"
          ></el-table-column>
          <el-table-column
            label="型号"
            prop="modelType"
            width="200"
          ></el-table-column>
          <el-table-column label="分类树" prop="categoryLevelPath">
            <template slot-scope="scope">
              {{ scope.row.categoryLevelPath + '分类' }}
            </template>
          </el-table-column>
          <el-table-column label="选择" align="center">
            <template slot-scope="scope">
              <el-radio class="radio" v-model="radio" :label="scope.row.id"
                ><i></i
              ></el-radio>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pagination.size"
            :current-page.sync="pagination.pageNum"
            @current-change="handleCurrent"
            @size-change="handleSize"
          >
          </el-pagination> </div
      ></div>
    </div>
    <div class="btns">
      <el-button type="primary" size="small" @click="selected">选择</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { getMaterialList } from '@/api/material/manage.js';
  import categoryGroupSelect from '@/components/CommomSelect/category-group-select';
  const defaultWhere = {
    brandNum: null,
    modelType: null,
    name: null,
    code: null,
    categoryLevelGroupId: null
  };
  export default {
    components: { categoryGroupSelect },
    data () {
      return {
        groupVisible: false,
        tableData: [],
        searchForm: { ...defaultWhere },
        pagination: {
          pageNum: 1,
          size: 10
        },
        total: 0,
        radio: '',
        current: null,
        callBack: null
      };
    },

    watch: {},
    methods: {
      open (item, callBack) {
        this.callBack = callBack;
        if (item) {
          this.current = item;
          this.radio = item.categoryId || item.id;
        }
        this.groupVisible = true;
        this.getList();
      },
      handleSearch () {
        this.pagination.pageNum = 1;
        this.getList();
      },
      handleReset () {
        this.searchForm = { ...defaultWhere };
        this.handleSearch();
      },

      // 单击获取id
      single (row) {
        this.current = row;
        this.radio = row.id;
      },

      handleClose () {
        this.groupVisible = false;
        this.current = null;
        this.radio = '';
      },
      handleCurrent (page) {
        this.pagination.pageNum = page;
        this.getList();
      },
      handleSize (size) {
        this.pagination.pageNum = 1;
        this.pagination.size = size;
        this.getList();
      },
      getList () {
        let params = { ...this.pagination, ...this.searchForm };
        getMaterialList(params).then((res) => {
          this.tableData = res.list;
          this.total = res.count;
          this.$nextTick(() => {
            this.tableData.find((i) => {
              if (i.id === this.current?.categoryId) {
                this.$refs.tableRef.setCurrentRow(i);
              }
            });
          });
        });
      },
      selected () {
        if (!this.current) {
          return this.$message.warning('请选择物料组');
        }
        this.callBack && this.callBack(this.current);
        this.$emit('changeMaterial', this.current);
        this.handleClose();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .tree_col {
    border: 1px solid #eee;
    padding: 10px 0;
    box-sizing: border-box;
    height: 500px;
    overflow: auto;
  }
  .table_col {
    padding-left: 10px;
    ::v-deep .el-table th.el-table__cell {
      background: #f2f2f2;
    }
  }
  .pagination {
    text-align: right;
    padding: 10px 0;
  }
  .btns {
    text-align: center;
    padding: 10px 0;
  }
  .topsearch {
    margin-bottom: 15px;
  }
</style>
