<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-tabs v-model="activeName" @tab-click="initData">
        <el-tab-pane label="基本信息" name="first"></el-tab-pane>
        <el-tab-pane label="景区介绍" name="second"></el-tab-pane>
        <el-tab-pane label="景区文化" name="third"></el-tab-pane>
      </el-tabs>
      <!--基本信息-->
      <div style="width: 100%;" v-if="activeName == 'first'">
        <attractionInfoBeas ref="attractionInfoBeas" />
      </div>

      <!--景区介绍-->
      <div style="width: 100%;" v-if="activeName == 'second'">
        <attractionInfoIntroduce ref="attractionInfoIntroduce" />
      </div>
      <!--景区文化-->
      <div style="width: 100%;" v-if="activeName == 'third'">
        <attractionInfoCulture ref="attractionInfoCulture" />
      </div>
    </el-row>
  </div>
</template>

<script>
import attractionInfoBeas from './tabelBox/attractionInfoBeas.vue';
import attractionInfoIntroduce from "./tabelBox/attractionInfoIntroduce.vue"
import attractionInfoCulture from "./tabelBox/attractionInfoCulture.vue"
export default {
  name: "AttractionInfo",
  dicts: [],
  components: {attractionInfoBeas,attractionInfoIntroduce,attractionInfoCulture},
  data() {
    return {
      title: "景区信息",// 通用标题
      activeName: 'first',
    };
  },
  created() {
    this.initData()
  },
  methods: {
    /** 切换  数据  */
    initData(){
      if(this.activeName == 'first'){
        this.$nextTick(()=>{
          this.$refs.attractionInfoBeas.initData()
        })
      }else if(this.activeName == 'second') {
        this.$nextTick(()=>{
          this.$refs.attractionInfoIntroduce.initData()
        })
      }else if(this.activeName == 'third') {
        this.$nextTick(()=>{
          this.$refs.attractionInfoCulture.initData()
        })
      }
    }
  }
};
</script>
