<template>
  <div class="vn-content">
    <!--    <el-input placeholder="请输入搜索内容" style="width: 350px;" v-model="keyword" @keyup.enter.native="handleQuery">-->
    <!--      <el-select v-model="searchKey" slot="prepend" placeholder="请选择" style="width: 105px;">-->
    <!--        <el-option label="航次号" value="voyageNo"></el-option>-->
    <!--        <el-option label="船舶名称" value="vesselName"></el-option>-->
    <!--        <el-option label="泊位名称" value="berthName"></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="70vh" v-loading="loading" :data="list" highlight-current-row
      @sort-change="handleSortChange" @row-click="rowClick">
      <el-table-column label="航次号" align="center" prop="voyageNo" sortable='custom' width="100" />
      <el-table-column label="船舶名称" align="center" prop="vesselName" sortable='custom' width="100" />
      <el-table-column label="泊位/靠泊时间" align="right" prop="berthTime" sortable='custom' width="170">
        <template slot-scope="scope">
          <div style="display: flex;align-items: center;">
            <div style="flex: 1;">
              <span>{{ scope.row.berthName }}</span>
              <span style="display: block;">{{ parseTime(scope.row.berthTime, '{y}-{m}-{d}') }}</span>
            </div>
            <dict-tag style="margin-left: 5px;" size="mini" :options="dict.type.bm_vessel_cargo_status"
              :value="scope.row.status" />
            <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 { listBmvoyage, pageListBmvoyage } from "@/api/jxc/bmvoyage";
export default {
  name: 'VoyageNumber',
  dicts: ['bm_vessel_cargo_status'],
  props: {
    // 搜索入参
    params: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      loading: false,
      searchKey: 'voyageNo',
      keyword: '',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: 'berthTime',
        isAsc: 'desc'
      },
      total: 0,
      list: [],
      selectItem: {},
    }
  },
  created() {
    this.getList();
  },
  methods: {
    rowClick(row) {
      this.selectItem = row;
      this.$emit('rowClick', row);
    },
    getList() {
      this.loading = true;
      pageListBmvoyage({
        ...this.queryParams,
        ...this.params
      }).then(response => {
        this.list = response.rows || [];
        this.total = response.total;
        this.loading = false;

        if (this.list.length) {
          let currentItem = this.list[0];
          if (this.selectItem.id) {
            // 如果当前有选中的则选中上次保存的航次
            const findIndex = this.list.findIndex(val => val.id === this.selectItem.id);
            if (findIndex > -1) {
              currentItem = this.list[findIndex];
            }
          }
          this.rowClick(currentItem);
          this.$refs.table.setCurrentRow(currentItem);
        } else {
          this.rowClick({});
        }
      }).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;
  height: 100%;
}

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