<template>
  <el-table
    :data="rows"
    border
    size="small"
    :empty-text="emptyText"
    highlight-current-row
    @row-click="onRowClick"
  >
    <el-table-column type="index" label="#" width="50" align="center" />
    <el-table-column label="物料编码" prop="materialCode" min-width="140" show-overflow-tooltip />
    <el-table-column label="物料名称" prop="materialName" min-width="160" show-overflow-tooltip />
    <el-table-column label="需求" prop="requiredQty" width="72" align="center" />
    <el-table-column label="即时库存" width="88" align="center">
      <template slot-scope="scope">{{ scope.row.stock ? scope.row.stock.onHandQty : '-' }}</template>
    </el-table-column>
    <el-table-column label="预计可用" width="88" align="center">
      <template slot-scope="scope">{{ stockFinal(scope.row) }}</template>
    </el-table-column>
    <el-table-column label="MO" width="56" align="center">
      <template slot-scope="scope">{{ (scope.row.moList || []).length }}</template>
    </el-table-column>
    <el-table-column label="PO" width="56" align="center">
      <template slot-scope="scope">{{ (scope.row.poList || []).length }}</template>
    </el-table-column>
    <el-table-column label="汇报" width="64" align="center">
      <template slot-scope="scope">{{ (scope.row.operationReports || []).length }}</template>
    </el-table-column>
    <el-table-column label="状态" width="72" align="center">
      <template slot-scope="scope">
        <el-tag size="mini" :type="statusType(scope.row)">{{ statusText(scope.row) }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="72" align="center" fixed="right">
      <template slot-scope="scope">
        <el-button type="text" size="mini" @click.stop="onDetail(scope.row)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'MaterialTableBlock',
  props: {
    rows: { type: Array, default: () => [] },
    emptyText: { type: String, default: '暂无数据' }
  },
  methods: {
    onRowClick(row) {
      this.$emit('detail', row)
    },
    onDetail(row) {
      this.$emit('detail', row)
    },
    stockFinal(row) {
      return row && row.calc ? row.calc.finalAvailableQty : '-'
    },
    statusType(row) {
      return this.isShortage(row) ? 'danger' : 'success'
    },
    statusText(row) {
      return this.isShortage(row) ? '缺料' : '充足'
    },
    isShortage(row) {
      const s = row && row.status
      return s === 'SHORTAGE' || (s && s.name === 'SHORTAGE')
    }
  }
}
</script>
