<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>
      <div ref="dragRef">
        <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>
      </div>

      <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">内容编辑:</h4>
      <wan-editor v-model="htmlContent"></wan-editor>
    </el-card>
    <el-button type="primary" @click="onSubmit()">提交</el-button>
  </div>
</template>

<script setup lang="ts">
import { initConfig } from './config'
import { categoryDataMock, categoryOptionsMock } from './mock'
import { generateTargetData, useCategoryAddOption, colors, useDrag } from './use-method'
import categoryConfig from './category-config.vue'
import wanEditor from './editor.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 { dragRef, createDrag } = useDrag(categoryData)
createDrag()
const list = computed(() => generateTargetData(categoryData.value))
console.warn('----- my data is list.value: ', list.value)

const htmlContent = ref('自定义')

const onSubmit = () => {
  console.warn('----- my data is htmlContent: ', htmlContent.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>
