<!--
 * @Description: 行政区划列表-省市区面板组件
 * @Author: wanqian
 * @Date: 2024-03-04 13:25:52
-->
<template>
  <div class="body-region-panel">
    <el-table class="content-table" :style="tableWidth" ref="table" :data="dataTable" border
      header-cell-class-name="table-header-color" row-key="id" 
      :header-cell-style="{'text-align': 'center'}" :cell-style="{'text-align': 'center'}">
      <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.province || '- -'}}</template>
      </el-table-column>
      <el-table-column label="市级" align="left">
        <template slot-scope="scope">{{scope.row.city || '- -'}}</template>
      </el-table-column>
      <el-table-column label="县级" align="left">
        <template slot-scope="scope">{{scope.row.county || '- -'}}</template>
      </el-table-column>
    </el-table>
    <el-row class="foot-pagination">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurPage" 
      	:current-page="filterParams.page" :page-sizes="pageSizes" :page-size="filterParams.pageSize" 
      	layout="total, prev, pager, next, sizes, jumper" :total="totalNumber" />
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'RegionPanel',

  props: ['currentTab', 'searchRefreshCount', 'filterName'],

  data() {
    return {
      filterParams: {
        idOrName: '', 
        page: 1, 
        pageSize: this.commonConst.PAGE_SIZE
      },
      pageSizes: this.commonConst.PAGE_SIZES,
      
      dataTable: [],
      totalNumber: 0,
    }
  },

  computed: {
    tableWidth() {
      return "width:" + (this.$root.contentWidth - 2 * this.offsetX) + "px";
    },
  },
  
  methods:{
    initData() {
      let requestData = {
        method: 'GET',
        url: this.commonUrl.URL_PAGE_COMMON_CFG_REGIONS,
        param: this.filterParams,
      }
      this.vueRequest(requestData).then(result => {
        if (result != null) {
          this.dataTable = result.data;
          this.totalNumber = result.totalNumber;
        }
      })
    },

    //以下是分页控件操作
    handleSizeChange(val) {
      this.filterParams.pageSize = val;
      this.initData();
    },

    handleCurPage(curPage) {
      this.filterParams.page = curPage;
      this.initData();
    },
  },

  watch: {
    currentTab: {
      handler(newValue, _oldValue) {
        if (newValue == 'region') {
          this.filterParams.page = 1;
          this.initData();
        }
      },
      immediate: false
    },

    filterName: {
      handler(newValue, _oldValue) {
        this.filterParams.idOrName = newValue;
      },
      immediate: false
    },

    searchRefreshCount: {
      handler(_newValue, _oldValue) {
        if (this.currentTab == 'region') {
          this.filterParams.page = 1;
          this.initData();
        }
      },
      immediate: false
    },
  },

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

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

.foot-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>