<!--
 * @Description: 行政区划字典数据列表页面
 * @Author: wanqian, liusheng
 * @Date: 2024-03-04 13:25:52
-->
<template>
  <div :style="'padding:' + offsetY + 'px ' + offsetX + 'px;'">
    <el-row style="margin-bottom: 20px;" :gutter="0" type="flex" justify="space-between" align="middle">
      <el-col :span="12" style="text-align: left">
        <el-radio-group v-model="currentTab" size="small">
          <el-radio-button label="region">省市县</el-radio-button>
          <el-radio-button label="township">乡镇街道</el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="12" style="text-align: right;">
        <el-input size="small" style="width: 240px" clearable placeholder="请输入名称/编码" v-model="filterObj.idOrName"
          prefix-icon="el-icon-search">
        </el-input>
        <el-button type="primary" size="small" @click="handleQuery" icon="el-icon-search" class="gold-gradient"
          style="margin-left: 8px;">
          搜 索
        </el-button>
      </el-col>
    </el-row>
    
    <!-- 省市县面板 -->
    <region-panel v-show="currentTab == 'region'" :currentTab="currentTab" :filterName="filterObj.idOrName" 
      :searchRefreshCount="searchRefreshCount" />
    <!-- 乡镇街道面板 -->
    <township-panel v-show="currentTab == 'township'" :currentTab="currentTab" :filterName="filterObj.idOrName"
      :searchRefreshCount="searchRefreshCount" />
  </div>
</template>

<script>
import RegionPanel from './components/RegionPanel.vue'
import TownshipPanel from './components/TownshipPanel.vue'

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

  components:{
    'region-panel': RegionPanel,
    'township-panel': TownshipPanel,
  },

  data() {
    return {
      currentTab: 'region',
      filterObj: {},
      searchRefreshCount: 0,
    }
  },
  
  methods:{
    handleQuery() {
      this.searchRefreshCount++;
    },
  },

  mounted() {
  },

  destroyed() {
    this.searchRefreshCount = 0;
  },
}
</script>

<style scoped>
</style>