<!-- 公开内容管理 -->
<template>
  <div class="pricemoitorrecord">
    <a-tabs v-model:activeKey="activeKey" @change="tabsChange">
      <a-tab-pane centered v-for="(item, index) in tabsList" :key="item.value" :tab="item.lable"></a-tab-pane>
    </a-tabs>
    <component :is="currentComponent"></component>
  </div>
</template>
<script setup>
import Resume from './components/resume/index.vue'
import ProactivelyDisclose from './components/proactivelyDisclose/index.vue'
import PoliticsPunish from './components/politicsPunish/index.vue'
import AdministrationPermit from './components/administrationPermit/index.vue'
import PlanningPlan from './components/planningPlan/index.vue'
import Finance from './components/Finance/index.vue'

const tabsList = ref([
  { value: '1', lable: '履职依据' },
  { value: '2', lable: '主动公开文件' },
  { value: '3', lable: '行政处罚' },
  { value: '4', lable: '行政许可' },
  { value: '5', lable: '规划计划' },
  { value: '6', lable: '财政预决算' },
])
const activeKey = ref('1')
// change事件
const tabsChange = (val) => {
  activeKey.value = val
}
const currentComponent = computed(() => {
  switch (activeKey.value) {
    case '1':
      return Resume
    case '2':
      return ProactivelyDisclose
    case '3':
      return PoliticsPunish
    case '4':
      return AdministrationPermit
    case '5':
      return PlanningPlan
    default:
      return Finance
  }
})
</script>

<style lang="less" scoped>
.search {
  padding-top: 20px;
  // padding-left: 50px;
  margin-bottom: 32px;

  .btnBox {
    width: 100%;
    display: inline-block;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .primarySele {
      margin-left: 20px;
      margin-right: 20px;
    }
  }
}

.silt-title {
  display: flex;
}

.pricemoitorrecord {
  background-color: #fff;
}

/deep/.ant-tabs-nav {
  padding: 0 32px;
}

.switch_del {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>