<template>
  <div class="metrics-cards">
    <MCard
     v-model="info.metric"
     :metric-items="props.metricItems"
     :color="info.color"
     v-for="info in displayMetrics"
     @change-metric="changedMetric"
     @click="clickCard(info.metric)"/>
  </div>
</template>

<script lang="ts" setup>
import { ref, Ref, onBeforeMount, watch, onMounted, computed } from 'vue'
import MCard from './mCard.vue'
import XEUtils from 'xe-utils';

interface Props {
  modelValue: ShowMetric[],
  metricItems: MetricData[],
}
const colorsMap: { [key: string]: boolean } = {}
const props = defineProps<Props>()
const emits = defineEmits(['change', 'update:modelValue'])
// const allMetricItems = ref(props.metricItems)
const selectedMetric = ref(props.modelValue)
const displayMetrics: Ref<{metric:string, color?: string}[]> = ref([])

const metricMap = computed(():{[key: string]: string} => {
  const tmp:{[key: string]: string} = {}
  for (const info of props.metricItems) {
    tmp[info.value] = info.label
  }
  return tmp
})
onBeforeMount(()=> {
  const dup:{[key: string]: boolean} = {}
  // 初始显示图线的三个维度
  for (const info of selectedMetric.value) {
    displayMetrics.value.push({ metric: info.metric, color: info.color })
    dup[info.metric] = true
    if (info.color) { colorsMap[info.color] = true }
  }
})

const getColor = () => {
  for (const [k,v] of Object.entries(colorsMap)) {
    if (!v) {
      colorsMap[k] = true
      return k
    }
  }
  return ""
}
const unsetColor = (color: string ) => {
  if (XEUtils.has(colorsMap, color)) {
    colorsMap[color] = false
  }
}
const changedMetric = (newVal: string, oldVal: string) => {
  for (const info of props.metricItems) {
    if (info.value === newVal) {
      info.disabled = true 
    } else if (info.value === oldVal) {
      info.disabled = false
    }
  }
  const index = selectedMetric.value.findIndex( info => info.metric === oldVal)
  if (index > -1) {
    selectedMetric.value[index].metric = newVal
    selectedMetric.value[index].label = metricMap.value[newVal]
    emits('update:modelValue', selectedMetric.value)
    emits('change', selectedMetric.value)
  }
}
const clickCard = (metric: string) => {
  const index = selectedMetric.value.findIndex( info => info.metric === metric)
  if (index > -1) {  // 已存在则删除
    if (selectedMetric.value.length <= 1 ) return
    const tmp = selectedMetric.value[index]
    selectedMetric.value.splice(index, 1)
    unsetColor(tmp.color)
    emits('update:modelValue', selectedMetric.value)
    emits('change', selectedMetric.value)
  } else {  // 不存在则添加
    if (selectedMetric.value.length === 3) { 
      selectedMetric.value[2].metric = metric
      selectedMetric.value[2].label = metricMap.value[metric]
    } else {
      const color = getColor()
      selectedMetric.value.push({ metric: metric, color: color, label: metricMap.value[metric]})
    }
    emits('update:modelValue', selectedMetric.value)
    emits('change', selectedMetric.value)
  }
}
watch(selectedMetric.value, () => {
  const cache:{ [key: string]: string } = {}
  for (const info of selectedMetric.value) {
    cache[info.metric] = info.color
  }
  for (const info of displayMetrics.value) {
    const color = cache[info.metric]
    if (color) {
      info.color = color
    } else {
      info.color = undefined
    }
  }
})

watch(
  props.metricItems,
  () => {
    const dup:{[key: string]: boolean} = {}
    for (const info of displayMetrics.value) { dup[info.metric] = true }
    let needNum = 6 - displayMetrics.value.length
    if (needNum > 0) {  
      // 从所有维度中选择剩余
      for (const info of props.metricItems) {
        if (!dup[info.value]) {
          displayMetrics.value.push({ metric: info.value })
          dup[info.value] = true
          needNum --
          if (needNum === 0) break
        }
      }
    }
    for (const info of props.metricItems) {
      if (dup[info.value]) {
        info.disabled = true
      } else {
        info.disabled = false
      }  
    }
  }
)

</script>

<style scoped>
.metrics-cards {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}
</style>
