<template>
  <el-tabs v-if="list.length > 0"
           v-model="index"
           :stretch="stretch"
           :tab-position="tabPosition">
    <el-tab-pane v-for="(item, index) in list"
                 :name="`${index}`"
                 lazy
                 :label="typeof mkLabel === 'string' ? item[mkLabel] : mkLabel(item)"
                 :key="index">
      <slot :data="item"></slot>
    </el-tab-pane>
  </el-tabs>
  <el-alert v-else
            center
            :title="displayemptyText"
            :closable="false"
            type="warning"
            show-icon>
  </el-alert>
</template>
<script>
import ELTabs from 'mk-element/packages/tabs';
import ELTabPane from 'mk-element/packages/tab-pane';
import i18n from 'mk-element/src/utils/mk-i18n';
export default {
  name: 'mk-tabs',
  components: { ELTabs, ELTabPane },
  data() {
    return {
      list: [],
      index: 0,
      loading: true
    };
  },
  props: {
    mkLabel: [String, Function],
    mkEmpty: String,
    mkSqlCode: String,
    mkParams: {
      type: Object,
      default() {
        return {};
      }
    },
    mkSortName: String,
    mkSortType: String,
    type: String,
    stretch: {
      type: Boolean,
      default: true
    },
    tabPosition: {
      type: String,
      default: 'top'
    },
    mkData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  computed: {
    displayemptyText() {
      return this.mkEmpty || (this.loading !== false ? i18n('data.loading') : i18n('data.empty'));
    }
  },
  async created() {
    const response = await this.$get('/query.json', {
      sqlCode: this.mkSqlCode,
      currentPage: 0,
      pageSize: -1,
      sortName: this.mkSortName,
      sortType: this.mkSortType,
      ...this.mkParams
    });
    this.list = this.mkData.concat(response.list);
    this.loading = false;
  }
};
</script>
