<!--炼钢牌号-->
<template>
  <div style="position: relative;">
    <el-dialog append-to-body title="炼钢牌号" :visible.sync="showGrade" width="600px">
      <div style="position: absolute;top: 15px;right: 50px;">
        <el-input style="width: 200px;" type="text" v-model="gradeName" size="small" @keyup.enter.native="findGrade" placeholder="炼钢牌号名称"></el-input>
        <el-button type="primary" size="small" @click="findGrade">查询</el-button>
        <el-button size="small" @click="handleReset">重置</el-button>
      </div>
      <el-table height="528" ref="gradeTab" :data="gradeData" border highlight-current-row @row-click="getClickRow">
        <el-table-column :show-overflow-tooltip="true" label="炼钢牌号代码" prop="gradeCode" min-width="100"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="炼钢牌号名称" prop="gradeName" min-width="100"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="备注" prop="memo" min-width="100"></el-table-column>
      </el-table>
      <div class="std-page">
        <el-pagination
          @size-change="handlePageSize"
          @current-change="handlePageIndex"
          :current-page="pageIndex"
          :page-size="50"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="Cancel">取消</el-button>
        <el-button type="primary" size="small" @click="OK">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ['grade', 'gradeCodeList'],
  data () {
    return {
      gradeName: '',
      gradeData: [],
      showGrade: false,
      tableRow: {},
      pageIndex: 1,
      pageSize: 20,
      total: 0
    }
  },
  methods: {
    /**
     * @param: row，需要选中的行
     * 设置表格当前选中行
     * */
    setCurrent (row) {
      let index = 0;
      if (row && row.gradeCode) {
        for (let i = 0; i < this.gradeData.length; i++) {
          if (this.gradeData[i].gradeCode === row.gradeCode) {
            index = i;
          }
        }
      }
      this.$refs.gradeTab.setCurrentRow(this.gradeData[index]);
      this.getClickRow(this.gradeData[index]);
    },
    handleReset () {
      this.gradeName = '';
      this.findGrade();
    },
    handlePageIndex (pageIndex) {
      this.pageIndex = pageIndex;
      this.findGrade();
    },
    handlePageSize (pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
      this.findGrade();
    },
    getClickRow (row) {
      this.tableRow = row;
    },
    Cancel () {
      this.showGrade = false;
    },
    OK () {
      let code = '', desc = '';
      code = this.tableRow.gradeCode;
      desc = this.tableRow.gradeName;
      this.$emit('getGrade', code, desc);
      this.showGrade = false;
    },
    findGrade () {
      let _this = this;
      this.axios.post('/market.Qms.com.service.BaseGradeService/GetGrade', [{
        pageIndex: this.pageIndex,
        pageSize: 50,
        model: {
          gradeName: this.gradeName,
          validflag: '1'
        }
      }]).then(function (response) {
        if (response) {
          _this.gradeData = response.data.result;
          _this.total = response.data.total;
          // setCurrentRow
          let obj = {};
          if (_this.tableRow && _this.tableRow.gradeCode) {
            obj = JSON.parse(JSON.stringify(_this.tableRow));
          } else {
            for (let item of _this.gradeData) {
              if (_this.gradeCodeList === item.gradeCode) {
                obj = JSON.parse(JSON.stringify(item));
              }
            }
          }
          _this.$nextTick(function () {
            _this.setCurrent(obj);
          });
        }
      });
    }
  },
  watch: {
    grade: function () {
      this.findGrade();
      this.showGrade = true;
    }
  }
}
</script>
<style scoped></style>
