<!--
 * @Description: 民族字典数据列表页面
 * @Author: wanqian，liusheng
 * @Date: 2024-03-04 13:25:52
-->
<template>
  <div class="body-nation-list" :style="'display: flex; padding:' + offsetY + 'px ' + offsetX + 'px;'">
    <el-table class="content-table" :style="tableWidth" v-for="index in 4" :key="index" 
      :data="tableData[index - 1]" header-cell-class-name="table-header-color" row-key="id">
      <el-table-column label="" align="left" min-width="15%"></el-table-column>
      <el-table-column label="主索引" align="left">
        <template slot-scope="scope">{{scope.row.id || '- -'}}</template>
      </el-table-column>
      <el-table-column label="民族" align="left">
        <template slot-scope="scope">{{scope.row.name || '- -'}}</template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'NationList',
  props: {
    offsetX: {    //表格显示的X轴偏移量，相当于margin-left和margin-right
      type: Number,
      default: 40
    },
    offsetY: {    //表格显示Y轴偏移量，相当于margin-top和margin-bottom
      type: Number,
      default: 0
    }
	},

  data() {
    return {
      tableData: [[],[],[],[]],
    }
  },

  computed: {
    tableWidth() {
      return "width:" + Math.floor((this.$root.contentWidth - 2 * this.offsetX) / 4) + "px";
    },
  },
  
  methods:{
    initData() {
      let requestData = {
        method: 'GET',
        url: this.commonUrl.URL_LIST_COMMON_CFG_NATIONS,
      }
      this.vueRequest(requestData).then(result => {
        if (result != null) {
          this.buildTableData(result.data);
        }
      })
    },

    buildTableData(tableData) {
      this.tableData = [[],[],[],[]];
      tableData.forEach((item, index) => {
        let pos = (index % 4);
        this.tableData[pos].push(item);
      });
    },
  },

  mounted() {
    this.initData();
  },
}
</script>

<style scoped>
.content-table {
  border: 1px solid #f0f0f0;
}
</style>