<template>
  <div class="gl-page-content">
    <div class="head">

      <el-space>
        <el-tabs
          type="card"
          editable
        >
          <el-tab-pane
            v-for="item in configurationList"
            :key="item.id"
            :label="item.name"
            :name="item.name"
          >
            {{ item.content }}
          </el-tab-pane>
        </el-tabs>
        <el-button type="primary" @click="displayConfigurationFun">新增配置</el-button>
      </el-space>

    </div>
    <div class="body">
      <div class="add-level">
        <el-button type="primary" @click="addSelectLevelFun">添加层级</el-button>
        <el-button type="primary" >保存</el-button>
      </div>
      <div class="add-content">
        <div class="select-level-box" v-for="item in selectLevelList" :key="item.id">
          <span>{{ item.name }}</span>
          <el-select class="select-level" >
            <el-option v-for="(item_1,index_1) in options" :key="index_1" v-bind="item_1" ></el-option>
          </el-select>

        </div>

      </div>
    </div>
  </div>
  <AddConfigurationDia v-model="addDiaVisible" @close="closeFun" @confirm="addConfigurationFun" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import AddConfigurationDia from './components/addConfigurationDia.vue';

const configurationList = ref<any>([]);
const addDiaVisible = ref<boolean>(false);
const displayConfigurationFun = () => {
  addDiaVisible.value = true;
};
const closeFun = () => {
  addDiaVisible.value = false;
};
const addConfigurationFun = (addFormData:any) => {
  console.log('1048', addFormData);
  configurationList.value.push({
    name: addFormData.name,
    id: new Date().getTime(),
  });
  addDiaVisible.value = false;
};
const selectLevelList = ref<any>([]);
const options = [
  {
    label: 'test1',
    value: 'test1',
  },
  {
    label: 'test2',
    value: 'test2',
  },
  {
    label: 'test3',
    value: 'test3',
  },
];
const addSelectLevelFun = () => {
  selectLevelList.value.push({
    name: selectLevelList.value.length + 1 + '级',
    id: new Date().getTime(),
  });
};
</script>
<style scoped lang="scss">
.gl-page-content {
  display: flex;
  flex-direction: column;
  .head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 12px;
  }
  .body{
    flex: 1;
    display: flex;
    flex-direction: column;
    .add-content{
      flex: 1;
      padding: var(--padding-normal);
      .select-level-box{
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        span{
          width: 60px;
          text-align: right;
          margin-right: 12px;
        }
        .select-level{
          width: 200px;
        }
      }
    }
  }
}
</style>
