<template>
  <div id="containt">
    <div class="flex">
      <div class="tab-box-vertical">
        <div class="list-scroll">
          <div
            class="item"
            v-for="(item, index) in typeTabs"
            :key="item.name"
            :class="{ on: item.name == activeName }"
            @click="chooseTab(item)"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
      <div class="flex-tabboxWidth">
        <div
          v-for="(item, index) in typeTabs"
          :key="item.name"
          v-show="item.name == activeName"
        >
          <component :is="item.name" :containtId="false" v-if="item.inited"></component>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import bd_attach_setting_list from "@base/views/bd/setting/bd_attach_setting/list.vue";
import request_setting_list from "@base/views/bd/setting/request_setting/list.vue";
import bd_company_env_list from "@base/views/bd/setting/bd_company_env/list.vue";
import request_async_setting_list from "@base/views/bd/setting/request_async_setting/list.vue";
import logic_param_list from "@base/views/bd/setting/logic_param/list.vue";
import logic_param_list1 from "@base/views/bd/setting/logic_param/list1.vue";
import logic_param_list2 from "@base/views/bd/setting/logic_param/list2.vue";

import country_list from "@base/views/user/country/list.vue";
import area_list from "@base/views/user/area/list.vue";

export default {
  name: "list",
  components: {
    bd_attach_setting_list,
    request_setting_list,
    bd_company_env_list,
    request_async_setting_list,
    logic_param_list,
    logic_param_list1,
    logic_param_list2,
    country_list,
    area_list,
  },
  data() {
    return {
      activeName: "bd_attach_setting_list",
      typeTabs: [
        { label: this.$t1("导入模板"), name: "bd_attach_setting_list", inited: true },
        { label: this.$t1("同步调用接口"), name: "request_setting_list", inited: false },
        {
          label: this.$t1("异步推送数据"),
          name: "request_async_setting_list",
          inited: false,
        },
        { label: this.$t1("组织环境设置"), name: "bd_company_env_list", inited: false },
        { label: this.$t1("逻辑参数"), name: "logic_param_list", inited: false },
        // {label: this.$t1("操作日志编码"), name: "logic_param_list1", inited: false},
        { label: this.$t1("上传文件服务"), name: "logic_param_list2", inited: false },
        { label: this.$t1("国家维护"), name: "country_list", inited: false },
        { label: this.$t1("国家地区"), name: "area_list", inited: false },
      ],
    };
  },
  methods: {
    chooseTab(item) {
      this.activeName = item.name;
      item.inited = true;
    },
  },
};
</script>

<style scoped></style>
