<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 titles" :key="index">
          <div class="section-item_title">
            <span>{{ item.title }}</span>
          </div>
          <div class="section-item_content_up">
            <!-- <div v-for="(element,index) in [template1Selector,template2Selector]" :key="index">

              </div> -->
            <div class="selector-item" v-for="(item, key) in item.templateSelector" :key="key">
              <label class="selector-label">{{ item.label}}</label>
              <div class="custom-select">
                <!-- 粒度 -->
                <el-select v-model="item.default" placeholder="" 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 titles = [
  {
    title: '容量/流量',
    templateSelector: [
      {
        label: '曲线类型',
        default: '热力图',
        options: [
          {
            value: '瞬时值曲线',
            label: '瞬时值曲线',
          },
          {
            value: 'PDF曲线',
            label: 'PDF曲线',
          },
          {
            value: '热力图',
            label: '热力图',
          },
        ]
      },
      {
        label: '地理标准',
        default: '最小值',
        options: [
          {
            value: '最小值',
            label: '最小值',
          },
          {
            value: '最大值',
            label: '最大值',
          },
          {
            value: '平均值',
            label: '平均值',
          }
        ]
      },
      {
        label: '时间标准',
        default: '最小值',
        options: [
          {
            value: '最小值',
            label: '最小值',
          },
          {
            value: '最大值',
            label: '最大值',
          },
          {
            value: '平均值',
            label: '平均值',
          }
        ]
      },
    ]
  },
  {
    title: '可用性',
      templateSelector: [
      {
        label: '曲线类型',
        default: '热力图',
        options: [
          {
            value: 'PDF曲线',
            label: 'PDF曲线',
          },
          {
            value: '热力图',
            label: '热力图',
          },
        ]
      },
      {
        label: '地理标准',
        default: '最小值',
        options: [
          {
            value: '最小值',
            label: '最小值',
          },
          {
            value: '最大值',
            label: '最大值',
          },
          {
            value: '平均值',
            label: '平均值',
          }
        ]
      },
      {
        label: '时间标准',
        default: '最小值',
        options: [
          {
            value: '最小值',
            label: '最小值',
          },
          {
            value: '最大值',
            label: '最大值',
          },
          {
            value: '平均值',
            label: '平均值',
          }
        ]
      },
    ]
  },
  {
    title: '网络时延/丢包',
      templateSelector: [
      {
        label: '时延曲线类型',
        default: '瞬时值曲线',
        options: [
          {
            value: '瞬时值曲线',
            label: '瞬时值曲线',
          },
          {
            value: 'PDF曲线',
            label: 'PDF曲线',
          },
          {
            value: '热力图',
            label: '热力图',
          },
        ]
      },
      {
        label: '地理标准',
        default: '最小值',
        options: [
          {
            value: '最小值',
            label: '最小值',
          },
          {
            value: '最大值',
            label: '最大值',
          },
          {
            value: '平均值',
            label: '平均值',
          }
        ]
      },
      {
        label: '时间标准',
        default: '最小值',
        options: [
          {
            value: '最小值',
            label: '最小值',
          },
          {
            value: '最大值',
            label: '最大值',
          },
          {
            value: '平均值',
            label: '平均值',
          }
        ]
      },
        {
        label: '丢包曲线类型',
        default: '瞬时值曲线',
        options: [
          {
            value: '最小值',
            label: '最小值',
          },
          {
            value: '最大值',
            label: '最大值',
          },
          {
            value: '平均值',
            label: '平均值',
          }
        ]
      },
        {
        label: '地理标准',
        default: '最小值',
        options: [
          {
            value: '最小值',
            label: '最小值',
          },
          {
            value: '最大值',
            label: '最大值',
          },
          {
            value: '平均值',
            label: '平均值',
          }
        ]
      },
      {
        label: '时间标准',
        default: '最小值',
        options: [
          {
            value: '最小值',
            label: '最小值',
          },
          {
            value: '最大值',
            label: '最大值',
          },
          {
            value: '平均值',
            label: '平均值',
          }
        ]
      },
    ]
  }
];


const template2Selector = []
</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>