<script setup lang="ts">
import { ref } from "vue"
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import SpecModal from "./specModal.vue"
import { initialData } from "./config"

import { useVModel } from "@vueuse/core"

const props = defineProps<{ specs: any[] }>()
const specs= useVModel(props, 'specs')

const state = ref({ 
  data: { ...initialData },
  visible:false,
  index: -1
})

function onSpecCreate(){
  state.value.data = { ...initialData }
  state.value.index = -1
  state.value.visible = true
}

function onSpecUpdate(index: number){
  state.value.data = { ...specs.value[index] }
  state.value.index = index
  state.value.visible = true
}
</script>

<template>
  <ElTable size="small" border :data="specs">
    <ElTableColumn label="规格类型" prop="spec_label" />
    <ElTableColumn label="规格值" prop="spec_value_label" />
    <ElTableColumn width="80px">
      <template #header>
        <div class="flex justify-between">
          <p>操作</p>
          <ElTooltip content="添加规格类型" placement="top">
            <ElButton 
              link 
              type="primary" 
              :icon="useRenderIcon('add')"
              @click="onSpecCreate"
            />
          </ElTooltip>
        </div>
      </template>
      <template #="{ $index }">
        <ElTooltip content="编辑" placement="top">
          <ElButton 
            link 
            type="primary" 
            :icon="useRenderIcon('edit')"
            @click="onSpecUpdate($index)"
          />
        </ElTooltip>
      </template>
    </ElTableColumn>
  </ElTable>


  <SpecModal 
    v-model:visible="state.visible"
    v-model:data="state.data"
    :index="state.index"
    @add="(value) => specs.push(value)"
    @update="(value) => specs[state.index] = {...value}" 
  />
</template>
