<template>
  <div class="vn-content">
    <!-- <el-date-picker clearable style="width: 350px;margin-bottom: 5px;" v-model="queryParams.queryTime" type="daterange" :picker-options="pickerOptions"
      value-format="yyyy-MM-dd" end-placeholder="单据结束日期" range-separator="-" start-placeholder="单据开始日期"
      placeholder="请选择单据日期">
    </el-date-picker>
    <el-input placeholder="请输入搜索内容" style="width: 350px;" v-model="keyword" @keyup.enter.native="handleQuery">
      <div slot="prepend">单据编号</div>
      <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="billNumber" sortable='custom' width="100" />
      <el-table-column label="数据来源" align="center" prop="sourceType" sortable='custom' width="90" >
        <template slot-scope="scope">
          <el-tag size="small">{{scope.row.sourceType=='0'?'载货清单':scope.row.sourceType=='2'?'转场':scope.row.sourceType=='3'?'混配':'直接出入库'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="单据时间" align="center" prop="billDate" sortable='custom' width="180">
        <template slot-scope="scope">
          <div style="display: flex;flex-direction: column;align-items: flex-end;">
            <dict-tag size="mini" :options="dict.type.bm_vessel_cargo_status" :value="scope.row.billStatus" />
            <div>
              {{ scope.row.billDate }}<i class="el-icon-arrow-right"></i>
            </div>
          </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 { datePickerOpts } from "@/utils";
import { stockPageListCkbill } from '@/api/jxc/ckbill';
export default {
  name: 'BillList',
  dicts: [ 'bm_vessel_cargo_status'],
  props: {
    // 1入库，2出库，3转场，4混配
    billType: {
      type: String,
      default: '1',
    },
    // 搜索入参
    params: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: false,
      searchKey: 'billNumber',
      keyword: '',
      queryParams: {
        queryTime: '',
        pageNum: 1,
        pageSize: 10,
        orderByColumn: 'billDate',
        isAsc: 'desc'
      },
      pickerOptions: datePickerOpts(),
      total: 0,
      list: [],
      selectItem: {},
    }
  },
  created() {
    this.getList();
  },
  methods: {
    rowClick(e) {
      this.selectItem = e;
      this.$emit('rowClick', e);
    },
    getList() {
      this.loading = true;
      this.queryParams.billType = this.billType;
      stockPageListCkbill({
        ...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,
        queryTime: this.queryParams.queryTime,
      };
      this.queryParams = params;
      this.getList();
    },
    //排序
    handleSortChange(col) {
      this.$sortBy(col, this.queryParams);
      this.getList();
    },
  }
}
</script>

<style scoped>
.vn-content {
  display: flex;
  flex-direction: column;
  margin-right: 10px;
  height: 100%;
}

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