<template>
  <div class="wrap card">
    <div class="search">
      <el-form
        :model="searchForm"
        ref="form"
        :inline="true"
        size="small"
        v-enter-submit="search"
        @submit.native.prevent>
        <el-form-item label="名称">
          <el-input
            style="width: 300px"
            v-model="searchForm.name"
            placeholder="请输入名称&中文名称&英文名称"
            clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :loading="searchLoading" type="primary" @click="search">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-wrap">
      <table-view
        :sourceData="sourceData"
        :tableColumns="tableColumns"></table-view>

      <!-- <vxe-table
        border
        ref="xTable"
        height="100%"
        show-overflow
        size="mini"
        @scroll="scrollChange"
        :data="sourceData">
        <vxe-column
          v-for="(config, index) in tableColumns"
          :key="index"
          :width="config.width"
          :type="config.type"
          :field="config.key"
          :title="config.label"></vxe-column>
      </vxe-table> -->
    </div>
    <div class="pagination">
      <el-pagination
        layout="sizes, total, prev, pager, next, jumper"
        background
        :total="paginationOptions.total"
        :page-size="paginationOptions.pageSize"
        :current-page="paginationOptions.currentPage"
        @size-change="sizeChange"
        @current-change="onCurrentChange"></el-pagination>
    </div>
  </div>
</template>

<script>
import axios from '../../common/api/axios'
import TableView from '@/common/components/base/tableView.vue'
export default {
  name: 'logistics_transporters',
  components: {
    TableView
  },
  data() {
    return {
      sourceData: [],
      searchForm: {},
      isLoad: false,
      searchLoading: false,
      bodyHeight: 0,
      currentPage: 1,
      sourceDataTotal: 0,
      paginationOptions: {
        total: 0,
        pageSize: 100,
        currentPage: 1
      }
    }
  },
  computed: {
    tableColumns() {
      return [
        { label: '编码', key: 'code' },
        { label: '中文名称', key: 'nameCn', align: 'left' },
        { label: '英文名称', key: 'nameEn', align: 'left' },
        { label: '港澳名称', key: 'nameHk', align: 'left' },
        { label: '链接', key: 'url', align: 'left' }
      ]
    }
  },
  mounted() {
    this.getlist()
  },
  methods: {
    onCurrentChange(currentPage) {
      this.paginationOptions.currentPage = currentPage
      this.getlist()
    },
    sizeChange(pageSize) {
      this.paginationOptions.pageSize = pageSize
      this.getlist()
    },
    search() {
      this.getlist()
    },
    scrollChange({ scrollTop, scrollHeight, bodyHeight }) {
      if (!this.bodyHeight) {
        this.bodyHeight = bodyHeight
      }
      if (scrollTop + this.bodyHeight >= scrollHeight) {
        if (!this.isLoad) {
          this.isLoad = true
          this.currentPage++
          if (this.sourceData.length >= this.sourceDataTotal) {
            return
          }
          this.getlist(true)
        }
      }
    },
    getlist() {
      const { pageSize, currentPage } = this.paginationOptions
      this.searchLoading = true
      axios
        .post(
          'LogisticsCarrierCode/list_page',
          {
            pageSize,
            currentPage,
            ...this.searchForm
          },
          {
            baseURL: '/api/manage/rest'
          }
        )
        .then((res) => {
          this.sourceData = res.data.records
          this.paginationOptions.total = res.data.total
          this.searchLoading = false
        })
        .catch(() => {
          this.searchLoading = false
        })
    }
  }
}
</script>

<style scoped>
.wrap {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.table-wrap {
  background: #fff;
  flex: 1;
  overflow: hidden;
}
.table_wrap {
  vertical-align: middle;
}

.table_wrap >>> .vxe-checkbox--label {
  padding-left: 0;
}
.table_wrap >>> .vxe-header--column.tablecolgroup,
.table_wrap >>> .vxe-header--column.col--ellipsis.tablecolgroup {
  height: 22px !important;
}
.table_wrap >>> .vxe-cell {
  /* max-height: 30px !important; */
  padding-left: 5px;
  padding-right: 5px;
}
</style>
