<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 in categoryData" :key="item.typeId">
        <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="info" class="mr-1">{{
              child.name
            }}</el-tag>
          </div>
          <el-input
            v-if="inputVisible"
            ref="InputRef"
            v-model="inputValue"
            class="w-20"
            size="small"
            @keyup.enter="handleInputConfirm"
            @blur="handleInputConfirm"
          />
          <el-button v-else class="button-new-tag" size="small" @click="onAddCategoryDataOption">
            新增
          </el-button>
        </dd>
      </dl>
    </el-card>
    <el-card>
      <h4 class="font-bold">SKU信息:</h4>
      <dl v-for="item in list" :key="item.typeId" class="flex mb-1 items-center">
        <dt>
          <el-button plain size="small" class="mr-2">{{ item.name }}</el-button>
        </dt>
        <dd class="flex">
          <img :src="item.img" alt="" />
          <p>
            <span class="text-xs text-[#666]">原价：</span
            ><el-input v-model="item.sale" size="small" class="w-20 mr-2"></el-input>
          </p>
          <p>
            <span class="text-xs text-[#666]">售价：</span
            ><el-input v-model="item.amount" size="small" class="w-20 mr-2"></el-input>
          </p>
        </dd>
      </dl>
    </el-card>
  </div>
</template>

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

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

const categoryOptions = ref(categoryOptionsMock)
const categoryData = ref(categoryDataMock)
const { inputValue, inputVisible, 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) {
    color: #666;
  }
}
</style>
