<!--
 * @Description: 国家字典列表页面
 * @Author: wanqian, liusheng
 * @Date: 2024-03-04 13:25:52
-->
<template>
  <div :style="'padding:' + offsetY + 'px ' + offsetX + 'px;'">
    <el-row class="filter-row" :gutter="0" type="flex" justify="space-between" align="middle">
      <el-col :span="6" style="text-align: left">
        <span class="search-title-wrap">国家：</span>
        <el-input size="small" style="width: 200px" clearable placeholder="请输入国家/编码" 
          v-model="filterParams.idOrName">
        </el-input>
      </el-col>
      <el-col :span="6" style="text-align: left">
        <span class="search-title-wrap">洲：</span>
        <el-select size="small" style="width: 200px" v-model="filterParams.continent" clearable filterable 
          placeholder="请输入/选择">
          <el-option v-for="(item, index) in continentList" :key="index" :label="item" :value="item" />
        </el-select>
      </el-col>
      <el-col :span="6" style="text-align: left">
        <span class="search-title-wrap">地区：</span>
        <el-select size="small" style="width: 200px" v-model="filterParams.region" clearable filterable 
          placeholder="请输入/选择">
          <el-option v-for="(item, index) in regionList" :key="index" :label="item" :value="item" />
        </el-select>
      </el-col>
      <el-col :span="4" style="text-align: right">
        <el-button type="primary" size="small" @click="handleQuery" icon="el-icon-search" class="gold-gradient">搜 索</el-button>
      </el-col>
    </el-row>
    <el-table class="content-table" :style="tableWidth"  :data="dataTable" 
      header-cell-class-name="table-header-color" row-key="id">
      <el-table-column label="" align="left" min-width="6%"></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-column label="洲" align="left">
        <template slot-scope="scope">{{scope.row.continent || '- -'}}</template>
      </el-table-column>
      <el-table-column label="地区" align="left">
        <template slot-scope="scope">{{scope.row.region || '- -'}}</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: 'CountryList',
  props: {
    offsetX: {    //表格显示的X轴偏移量，相当于margin-left和margin-right
      type: Number,
      default: 40
    },
    offsetY: {    //表格显示Y轴偏移量，相当于margin-top和margin-bottom
      type: Number,
      default: 0
    }
	},

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

      continentList:[],
      regionList:[],
    }
  },

  computed: {
    tableWidth() {
      return "width:" + (this.$root.contentWidth - 2 * this.offsetX) + "px";
    },
  },
  
  methods:{
    async initData() {
      await this.listFilterDo();
      await this.listCountrys();
    },

    listFilterDo() {
      return new Promise((resolve) => {
        let requestData = {
          method: 'GET',
          url: this.commonUrl.URL_GET_COMMON_CFG_COUNTRY_FILTER_DO,
        };
        this.vueRequest(requestData).then(result => {
          if (result != null) {
            this.continentList = result.data.continentList;
            this.regionList = result.data.regionList;
            resolve();
          }
        })
      })
    },

    listCountrys() {
      return new Promise((resolve) => {
        let requestData = {
          method: 'GET',
          url: this.commonUrl.URL_PAGE_COMMON_CFG_COUNTRYS,
          param: this.filterParams,
        }
        this.vueRequest(requestData).then(result => {
          if (result != null) {
            this.dataTable = result.data;
            this.totalNumber = result.totalNumber;
            resolve();
          }
        })
      })
    },

    handleQuery() {
      this.filterParams.page = 1;
      this.listCountrys();
    },

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

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

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

<style scoped>
.filter-row {
  margin-bottom: 20px;
}

.content-table {
  border: 1px solid #f0f0f0;
}

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