<template>
  <div class="vn-content">
    <el-input placeholder="请输入搜索内容" style="width: 330px;" v-model="keyword" @keyup.enter.native="handleQuery">
      <el-select v-model="searchKey" slot="prepend" placeholder="请选择" style="width: 105px;">
        <el-option label="货物名称" value="cargoName"></el-option>
        <el-option label="自然序号" value="cargoNumber"></el-option>
        <el-option label="商品料号" value="itemNumber"></el-option>
      </el-select>
      <el-button slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
    </el-input>

    <el-table ref="table" class="table" height="50vh" v-loading="loading" :data="list" highlight-current-row
      @sort-change="handleSortChange" @row-click="rowClick">
      <el-table-column label="货物名称" align="center" prop="cargoName" sortable='custom' width="100" />
      <el-table-column label="自然序号" align="center" prop="cargoNumber" sortable='custom' width="100">
      </el-table-column>
      <el-table-column label="商品料号" align="center" prop="itemNumber" sortable='custom' width="130">
        <template slot-scope="scope">
          <div style="display: flex;align-items: center;">
            <div v-if="(scope.row.id || scope.row.id === 0)" style="flex: 1;text-align: center;">{{ scope.row.itemNumber
            }}</div>
            <el-button v-else type="primary" style="width: 100%" size="small" plain>新增载货清单</el-button>
            <i class="el-icon-arrow-right"></i>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="margin-top10" style="float: right;" layout="prev, pager, next, jumper" :total="total" small
      hide-on-single-page :current-page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize"
      @current-change="getList" />
  </div>
</template>

<script>
import { listBmcargo, pageListBmcargo } from "@/api/jxc/bmcargo";
const emptyItem = {
  cargoNumber: null,
  itemNumber: null,
  bookNumber: null,
  customsNo: null,
  listNumber: null,
  opType: null,
  tradType: null,
  deptId: null,
  custId: null,
  cargoId: null,
  vesselName: null,
  billNo: null,
  unit: '1',
  hatchTpe: null,
  cargoMachine: null,
  voyageNo: null,
  cargoNum: null,
  cargoWt: null,
  cargoVol: null,
  actNum: null,
  actWt: null,
  actVol: null,
  stockNum: null,
  stockWt: null,
  stockVol: null,
  expiryDate: null,
  billNumber: null,
  billDate: null,
  originCountry: null,
  mark: null,
  firstUnit: null,
  cargoSpec: null,
  pieceWeight: null,
  unitPrice: null,
  currType: null,
}
export default {
  name: 'BmcargoList',
  props: {
    voyageId: {
      type: Number,
      default: 0,
    },
    selectedRow: {
      type: Object,
      default() {
        return {};
      }
    },
    readonly: {
      type: Boolean,
      default: false,
    }
  },
  watch: {
    voyageId() {
      this.getList();
    },
    selectedRow() {
      if (this.selectedRow && this.list.length) {
        let realRow = this.getRowFromTempRow(this.selectedRow);
        if (!realRow) {
          realRow = this.list[0];
        }
        this.setCurrentRow(realRow);
        this.rowClick(realRow);
      }
    }
  },
  data() {
    return {
      loading: false,
      searchKey: 'cargoName',
      keyword: '',
      queryParams: {
        // pageNum: 1,
        // pageSize: 10,
      },
      total: 0,
      list: [],
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getRowFromTempRow(tempRow) {
      if (tempRow && this.list.length) {
        const index = this.list.findIndex(val => val.id === tempRow.id);
        if (index > -1) {
          return this.list[index];
        }
      }
      return null;
    },
    setCurrentRow(row) {
      const realRow = this.getRowFromTempRow(row);
      if (realRow) {
        this.$refs.table.setCurrentRow(row);
      }
    },
    rowClick(row) {
      const result = {
        ...emptyItem,
        ...row,
      }
      this.$emit('rowClick', result);
    },
    getList() {

      if (!this.voyageId) {
        if (this.readonly) {
          return;
        }
        this.list = [emptyItem];
        this.setCurrentRow(this.list[0]);
        this.rowClick(this.list[0]);
        return;
      }
      this.queryParams.voyageId = this.voyageId;
      this.loading = true;
      listBmcargo(this.queryParams).then(response => {
        const list = this.readonly ? [] : [emptyItem];
        if (response.data) {
          list.push(...response.data);
        }
        this.list = list;
        const index = Math.max(this.list.findIndex(val => val.id === this.selectedRow.id), 0);
        this.setCurrentRow(this.list[index]);
        this.rowClick(this.list[index]);

        this.total = this.list.length;
        this.loading = false;
      }).catch(e => {
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      const params = {
        // pageNum: 1,
        // pageSize: 10,
        [this.searchKey]: this.keyword,
      };
      this.queryParams = params;
      this.getList();
    },
    //排序
    handleSortChange(col) {
      this.$sortBy(col, this.queryParams);
      this.getList();
    },
  }
}
</script>

<style scoped>
.vn-content {
  display: flex;
  flex-direction: column;
}

.table {
  flex: 1;
  margin-top: 10px;
}
</style>
