<template>
  <div class="templateCase_right_content">
    <div class="templateCase_right_content_header">
      <div class="templateCase_right_content_header_item">
        <span>应用</span>
        <img src="@/assets/images/headers/case_header.png" alt="" style="width: 20px; height: 20px;">
      </div>
    </div>
    <div class="templateCase_right_content_body">
      <div class="horizontal-sections">
        <div class="section-item" v-for="(item, index) in 3" :key="index">
            <div class="section-item_title">
                <span>内容{{item}}</span>
            </div>
            <div class="section-item_content_up">
               <div class="selector-item" v-for="(item, index) in objectSelector" :key="index">
                <label class="selector-label">{{ item.label }}</label>
                <div class="custom-select">
                 <!-- 粒度 -->
                  <el-select v-model="item.default"  placeholder="Select" style="width: 100%;" >
                    <el-option
                      v-for="itemele in item.options"
                      :key="itemele.value"
                      :label="itemele.label"
                      :value="itemele.value"
                    />
                  </el-select>
                </div>
              </div>
            </div>
            <div class="section-item_content_down">
                <hotMapComponent v-if="index === 0"></hotMapComponent>
                <cdf v-if="index === 1" :allIdName="allIdName[0]"></cdf>
                <instant v-if="index === 2" :allIdName="allIdName[1]"></instant>
            </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import hotMapComponent from '@/pages/all/components/hotMapComponents/index.vue';
import cdf from '@/pages/all/components/cdf/index.vue';
import instant from '@/pages/all/components/instant/index.vue';
   const allIdName = ref([['allIdName11', 'allIdName12'], ['allIdName21', 'allIdName22']]);
// 组件逻辑可以在这里添加
const objectSelector = [
  {
    label: '地面粒度',
    default: '区域',
    options: [
      {
        value: '区域',
        label: '区域',
      },
      {
        value: '站点',
        label: '站点',
      },
      {
        value: '设备类型',
        label: '设备类型',
      },
      {
        value: '具体设备',
        label: '具体设备',
      }
    ]
  },
  {
    label: '卫星粒度',
    default: '卫星',
    options: [
      {
        value: '卫星',
        label: '卫星',
      },
      {
        value: '星座',
        label: '星座',
      },
      {
        value: '波束',
        label: '波束',
      },
      {
        value: '转发器',
        label: '转发器',
      }
    ]
  },
  {
    label: '模板',
    default: 'Example #1',
    options: [
      {
        value: 'Example #1',
        label: 'Example #1',
      },
      {
        value: 'Example #2',
        label: 'Example #2',
      },
      {
        value: 'Example #3',
        label: 'Example #3',
      },
      {
        value: '自定义模板',
        label: '自定义模板',
      }
    ]
  },
  {
    label: '地面粒度',
    default: '区域',
    options: [
      {
        value: '区域',
        label: '区域',
      },
      {
        value: '站点',
        label: '站点',
      },
      {
        value: '设备类型',
        label: '设备类型',
      },
      {
        value: '具体设备',
        label: '具体设备',
      }
    ]
  },
  {
    label: '卫星粒度',
    default: '卫星',
    options: [
      {
        value: '卫星',
        label: '卫星',
      },
      {
        value: '星座',
        label: '星座',
      },
      {
        value: '波束',
        label: '波束',
      },
      {
        value: '转发器',
        label: '转发器',
      }
    ]
  },
  {
    label: '模板',
    default: 'Example #1',
    options: [
      {
        value: 'Example #1',
        label: 'Example #1',
      },
      {
        value: 'Example #2',
        label: 'Example #2',
      },
      {
        value: 'Example #3',
        label: 'Example #3',
      },
      {
        value: '自定义模板',
        label: '自定义模板',
      }
    ]
  }
];
</script>

<style scoped>
.templateCase_right_content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100px;

  /* padding: 10px 10px; */
  /* background-color: #2b70df; */
}

.templateCase_right_content_header {
  display: flex;
  flex-direction: column;
  height: 8%;
  width: 100%;
  padding: 10px 10px;
}

.templateCase_right_content_body {
  height: 92%;
  width: 100%;
  /* background-color: #73df2b; */
}

.horizontal-sections {
  display: flex;              /* 启用弹性布局来水平排列 */
  height: 100%;
  border-right: 1px solid rgba(255, 0, 0, 0.1);
 
}

.section-item {
  flex: 1;                    /* 平均分配宽度 */
  height: 100%;
  /* background-color: #f5f10c; */
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  padding: 0px 10px;
  padding-top: 5px;
  display: flex;              /* 使内部内容也使用弹性布局 */
  flex-direction: column;     /* 垂直排列子元素 */
/* overflow-y: auto; */
}

.templateCase_right_content_header_item {
  height: 100%;
  width: 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}




.section-item_title{
    height: 5%;
    /* background-color: #051020; */
    display: flex;
    align-items: center;
    justify-content: left;
    padding-left: 5px ;
    border-left: 1px solid #2e7dff;
    font-size: 14px;
    color: #fff;
    padding: 10px;
    font-weight: 600;
}


.selector-label {
  font-size: 14px;
  color: #94a3b8;
}

.section-item_content_up {
  /* height: 42%; */
  width: 100%;
  /* background-color: #2d20a0; */
  display: flex;              /* 启用弹性布局 */
  flex-wrap: wrap;            /* 允许换行 */
  gap: 10px;                 /* 元素间距 */
  padding: 10px;              /* 内边距 */
  box-sizing: border-box;     /* 包含padding */
  align-content: flex-start;  /* 对齐方式 */
}

.selector-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 100px;          /* 最小宽度 */
  flex: 1;                   /* 弹性增长 */
}

.custom-select {
  position: relative;
  width: 100%;               /* 自适应宽度 */
}
:deep(.custom-select .el-select__wrapper) {
  height: 12.5px;
}
.section-item_content_down{
    width:  100%;
    /* background-color: #9520a0; */
    padding: 10px 0;
}
</style>