<template>
  <q-table :pagination="msg" selection="single" :loading="loading" :selected.sync="selection" no-data-label="暂无相关数据" flat
    class="sticky-tow-column-table sticky-two-header-table" separator="none" :data="dataList" :columns="columns"
    row-key="Id" @update:selected="emitSel" table-class="table" hide-bottom>
  </q-table>
</template>

<script>
  export default {
    props: {
      dataList: {
        type: Array,
        default: () => []
      },
      select: {
        type: Array,
        default: () => []
      },
      loading: {
        type: Boolean,
        default: null
      }
    },
    data() {
      return {
        selection: [],
        msg: {
          pageIndex: 1,
          rowsPerPage: 0
        },
        columns: [{
            name: "ProductTypeName",
            label: "类型",
            align: "left",
            field: "ProductTypeName"
          },
          {
            name: "Name",
            label: "项目名称",
            field: "Name",
            align: "left"
          },
          {
            name: "StudyCountryName",
            label: "留学国家",
            field: "StudyCountryName",
            align: "left"
          },
          {
            name: "SellPrice",
            label: "实际卖价",
            field: "SellPrice",
            align: "left"
          }
        ]
      };
    },
    mounted() {
      this.selection = this.select
    },
    methods: {
      emitSel(val) {
        this.$emit("select", val)
      },
    }
  };

</script>
<style>
  .table {
    max-height: 400px;
  }

  .table::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  .table::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 2px;
  }

  .table::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 10px;
  }

  .table::-webkit-scrollbar-thumb:hover {
    background: #999;
  }

  .table::-webkit-scrollbar-corner {
    background: #204754;
  }

</style>
