<template>
  <div class="templateCase_right_content">
    <div class="templateCase_right_content_header">
      <div class="templateCase_right_content_header_item">
        <!-- <span>模板名称</span> -->
        <input ref="inputRef" class="templateName" v-model="templateName" :disabled="!isEdit"></input>
        <img src="@/assets/images/headers/case_header.png" alt="" title="编辑"
          style="width: 20px; height: 20px;cursor: pointer;" @click="handleEdit">
      </div>
    </div>
    <div class="templateCase_right_content_body">
      <div class="horizontal-sections">
        <div class="section-item" v-for="(el, index) in settingConfig" :key="index">
          <div class="section-item_title">
            <span>{{ el.title }}</span>
          </div>
          <div class="section-item_content_up">
            <div class="selector-item" v-for="(item, key) in el.templateSelector" :key="key">
              <label class="selector-label">{{ item.label }}</label>
              <div class="custom-select">
                <!-- 粒度 -->
                <el-select v-model="item.default" placeholder="" :disabled="!isEdit" style="width: 100%;"
                  @change="(val) => selectOnChange(val, index, key)">
                  <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">
            <KeepAlive>
              <component :is="el.defaultComponent" :title="titleFn(el)" :slogan="el.title" :legendName="el.legendName">
              </component>
            </KeepAlive>

          </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';
import { markRaw, nextTick, watch } from 'vue'


const isEdit = ref(false)
const inputRef = ref()
const templateName = ref('默认模板名称')

const props = defineProps({
  settingConfig: {
    type: Object,
    default: () => { }
  }
})



// 组件逻辑可以在这里添加
const settingConfig = ref([
  {
    title: '容量/流量',
    legendName: ['链路层容量', '用户实际流量'],
    defaultComponent: markRaw(hotMapComponent),
    templateSelector: [
      {
        label: '曲线类型',
        default: '3',
        type: 'capacityCurveType',
        options: [
          {
            value: '1',
            label: '瞬时值曲线',

          },
          {
            value: '2',
            label: 'CDF曲线',

          },
          {
            value: '3',
            label: '热力图',
          },
        ]
      },
      {
        label: '地理标准',
        default: '1',
        type: 'capacityGeoStandard',
        options: [
          {
            value: '1',
            label: '最小值',
          },
          {
            value: '3',
            label: '最大值',
          },
          {
            value: '2',
            label: '平均值',
          }
        ]
      },
      {
        label: '时间标准',
        default: '1',
        type: 'capacityTimeStandard',
        options: [
          {
            value: '1',
            label: '最小值',
          },
          {
            value: '3',
            label: '最大值',
          },
          {
            value: '2',
            label: '平均值',
          }
        ]
      },
    ]
  },
  {
    title: '可用性',
    legendName: ['规划可用性', '实际可用性'],
    defaultComponent: markRaw(cdf),
    templateSelector: [
      {
        label: '曲线类型',
        default: '2',
        type: 'availabilityCurveType',
        options: [
          {
            value: '2',
            label: 'CDF曲线',
          },
          {
            value: '3',
            label: '热力图',
          },
        ]
      },
      {
        label: '地理标准',
        default: '1',
        type: 'availabilityGeoStandard',
        options: [
          {
            value: '1',
            label: '最小值',
          },
          {
            value: '3',
            label: '最大值',
          },
          {
            value: '2',
            label: '平均值',
          }
        ]
      },
      {
        label: '时间标准',
        default: '1',
        type: 'availabilityTimeStandard',
        options: [
          {
            value: '1',
            label: '最小值',
          },
          {
            value: '3',
            label: '最大值',
          },
          {
            value: '2',
            label: '平均值',
          }
        ]
      },
    ]
  },
  {
    title: '网络时延/丢包',
    legendName: ['搜星时延', '丢包率'],
    defaultComponent: markRaw(instant),
    templateSelector: [
      {
        label: '曲线类型',
        default: '1',
        type: 'latencyCurveType',
        options: [
          {
            value: '1',
            label: '瞬时值曲线',
          },
          {
            value: '2',
            label: 'CDF曲线',
          },
          {
            value: '3',
            label: '热力图',
          },
        ]
      },
      {
        label: '地理标准',
        default: '1',
        type: 'latencyGeoStandard',
        options: [
          {
            value: '1',
            label: '最小值',
          },
          {
            value: '3',
            label: '最大值',
          },
          {
            value: '2',
            label: '平均值',
          }
        ]
      },
      {
        label: '时间标准',
        default: '1',
        type: 'latencyTimeStandard',
        options: [
          {
            value: '1',
            label: '最小值',
          },
          {
            value: '3',
            label: '最大值',
          },
          {
            value: '2',
            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: '平均值',
      //     }
      //   ]
      // },
    ]
  }
]);

watch(() => props.settingConfig, (newVal) => {
  console.log('newVal', newVal)
  if (!newVal) return
  templateName.value = newVal.templateName
  // debugger
  for (let attr in newVal) {
    for (let item of settingConfig.value) {

      const obj = item.templateSelector.find(el => el.type === attr)

      if (!obj) continue
      obj.default = newVal[attr]

      if (attr.includes('CurveType')) {
        switch (newVal[attr]) {
          case '1':
            item.defaultComponent = markRaw(cdf);
            break
          case '2':
            item.defaultComponent = markRaw(cdf)
            break
          case '3':
            item.defaultComponent = markRaw(hotMapComponent)
            break
          default:
            break
        }
      }

    }
  }
  isEdit.value = false
}, { immediate: true })


const selectOnChange = (val, index, key) => {
  console.log('row', val, index, key)
  if (key !== 0) return
  settingConfig.value[index].templateSelector.default = val
  switch (val) {
    case '1':
      settingConfig.value[index].defaultComponent = markRaw(cdf);
      break
    case '3':
      settingConfig.value[index].defaultComponent = markRaw(hotMapComponent)
      console.log('热力图', settingConfig.value[index].defaultComponent)
      break
    case '2':
      settingConfig.value[index].defaultComponent = markRaw(cdf)
      break
    default:
      break
  }
}

const handleEdit = async () => {
  isEdit.value = !isEdit.value
  if (isEdit.value) {
    await nextTick()
    inputRef.value.focus()
  }
}

const titleFn = (el) => {
  const templateSelector = el.templateSelector
  const curveType = {
    '1': '瞬时值曲线',
    '2': 'CDF曲线',
    '3': '热力图'
  }

  const geoTimeStandard = {
    '1': '最小值',
    '2': '平均值',
    '3': '最大值',
  }

  return `${curveType[templateSelector[0].default]} - ${geoTimeStandard[templateSelector[1].default]} - ${geoTimeStandard[templateSelector[2].default]}`
}

const resetConfig = () => {
  settingConfig.value.forEach((item, index) => {
    if (index == 0) {
      item.defaultComponent = markRaw(hotMapComponent)
    }
    if (index == 1) {
      item.defaultComponent = markRaw(cdf)
    }
    if (index == 2) {
      item.defaultComponent = markRaw(instant)
    }
    item.templateSelector.forEach(el => {
      if (index == 0) {
        el.default = '3'
      }
      if (index == 1) {
        el.default = '2'
      }
      if (index == 2) {
        el.default = '1'
      }
    })
  })
  // console.log('重置配置项', settingConfig.value)
  isEdit.value = false
}

defineExpose({

  configData: () => {
    const obj = {
      templateName: templateName.value
    }
    settingConfig.value.forEach(item => {
      item.templateSelector.forEach(el => {
        obj[el.type] = el.default
      })
    })
    return obj
  },
  resetConfig
})


</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: 100%;
  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;
}

.templateCase_right_content_header_item .templateName {
  width: 160px;
  background: transparent;
  outline: none;
  border: none;
  color: white;
  border-bottom: 1px solid transparent;
  padding-bottom: 6px;
  padding-right: 12px;
}






.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%;
  /* height: 100%; */
  height: 440px;
  /* background-color: #9520a0; */
  padding: 10px 0;
}
</style>