<template>
  <div id="commodity-detail">
    <el-card>
      <h4 class="font-bold">基本信息：</h4>
      <form-wrap :form="$dialog">
        <template #comCategoryId>
          <el-tree-select
            v-model="$dialog.data.comCategoryId"
            :data="categoryOptions"
          ></el-tree-select>
        </template>
        <template #video>
          <span>sdfs</span>
        </template>
        <template #mainImg>
          <p>123</p>
        </template>
      </form-wrap>
    </el-card>
    <el-card class="mt-2 sku-info">
      <h4 class="font-bold mb-2">SKU信息:</h4>
      <dl v-for="(item, index) in categoryData" :key="item.typeId" class="flex items-center">
        <dt class="text-sm text-[#666] mb-2">{{ item.typeName }}：</dt>
        <dd class="flex mb-2">
          <div v-for="child in item.options" :key="item.typeId + '-' + child.id">
            <el-tag closable effect="plain" :type="colors[index % 4]" class="mr-1">{{
              child.name
            }}</el-tag>
          </div>
          <el-input
            v-if="inputVisibles[index]"
            ref="InputRefs"
            v-model="inputValue"
            class="w-20"
            size="small"
            @keyup.enter="handleInputConfirm(index)"
            @blur="handleInputConfirm(index)"
          />
          <el-button
            v-else
            class="button-new-tag ml-1"
            size="small"
            @click="onAddCategoryDataOption(index)"
          >
            + 新增
          </el-button>
        </dd>
      </dl>

      <h4 class="my-1">价格配置：</h4>
      <div
        class="flex w-full flex-wrap justify-between p-2 rounded-[5px]"
        style="border: 1px dashed #bbb"
      >
        <category-config :list="list.slice(0, Math.floor(list.length / 2))" />
        <category-config :list="list.slice(Math.floor(list.length / 2))" />
      </div>
    </el-card>
    <el-card>
      <h4 class="font-bold mb-2">SKU信息:</h4>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { initConfig } from './config'
import { categoryDataMock, categoryOptionsMock } from './mock'
import { generateTargetData, useCategoryAddOption, colors } from './use-method'
import categoryConfig from './category-config.vue'

const { $dialog, dialog1 } = toRefs(initConfig().value!)
$dialog.value.config = dialog1.value

const categoryOptions = ref(categoryOptionsMock)
const categoryData = ref(categoryDataMock)
const { inputValue, InputRefs, inputVisibles, onAddCategoryDataOption, handleInputConfirm } =
  useCategoryAddOption(categoryData)

const list = computed(() => generateTargetData(categoryData.value))
console.warn('----- my data is list.value: ', list.value)
</script>

<style scoped lang="scss">
#commodity-detail {
  --el-color-info: #000;
  .sku-info {
    :deep(.el-card__body) {
      padding-bottom: 12px;
    }
  }
  :deep(.el-button) {
    &.el-button--small {
      padding-top: 5px;
      padding-bottom: 5px;
    }
    color: #666;
  }
}
</style>
