<template>
  <view class="charts-box  bg-white content">
    <view v-show="true" class="flex overflow-auto flex-wrap">
      <div class="grid grid-cols-3 gap-4 p-4 w-full">

        <wd-button @click="utils.toUrl('/mall/cat/edit?edit=' + JSON.stringify({}))" style="width: 100%;"
          class="bg-[#f0f0f0] w-full flex-1" :round="false">
          新增
        </wd-button>
		<template v-if="classifyList.length">
			<wd-button @click="showActions(cat)" style="width: 100%;" v-for="cat of classifyList"
			  class="bg-[#f0f0f0] w-full flex-1" type="info" :round="false">
			  {{ cat.name }}
			</wd-button>
		</template>
        

      </div>
    </view>

    <wd-action-sheet v-model="show" :actions="actions" @close="close" @select="select" />
    <kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import utils from '@/utils/utils.js'
import goods from '@/api/mall/goods.js'
import kevyloading from "@/components/kevy-loading/kevy-loading";
/** @type {Ref<boolean>} */
const loading = ref(false);

import {
  onShow,
} from "@dcloudio/uni-app";

const model = ref({})
const baseForm = ref({})

const show = ref(false)
const actions = ref([
  {
    name: '编辑分类'
  },
  {
    name: '新增子项'
  }
])

const opt = ref("编辑分类")

function showActions(row) {
  show.value = true
  model.value = row
  console.log(row);
}

function close() {
  show.value = false
}

function select({ item, index }) {
  opt.value = item.name

  if (opt.value == '编辑分类') {
    // message.alert({
    //   title: "编辑分类"
    // })

    baseForm.value = model.value
    utils.toUrl('/mall/cat/edit?edit=' + JSON.stringify(baseForm.value))
  }

  if (opt.value == '新增子项') {

    console.log(model.value);

    if (model.value.parentIds.length == 3) {
      return uni.showToast({
        title: '三级分类不可新增子级',
        icon: 'none'
      })
    } else {
      baseForm.value = model.value
      utils.toUrl('/mall/cat/edit?edit=' + JSON.stringify({}) + "&parent=" + JSON.stringify(baseForm.value))
    }

    // baseForm.value = model.value
    // utils.toUrl('/mall/cat/edit?edit=' + JSON.stringify(baseForm.value))
  }

}

const classifyList = ref([])
const getClassify = () => {
  loading.value = true
  function flattenCategories(categories, parentIds = []) {
    let flatCategories = [];

    for (const category of categories) {
      const categoryWithParents = {
        ...category,
        parentIds: [...parentIds, category.id],
      };

      flatCategories.push(categoryWithParents);

      if (category.children && category.children.length > 0) {
        flatCategories = flatCategories.concat(flattenCategories(category.children, [...parentIds, category.id]));
      }
    }

    return flatCategories;
  }
  goods.classify.list().then(res => {
    classifyList.value = flattenCategories(res.data)
    loading.value = false
  })
}

onShow(() => {
  getClassify()
})
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  width: 100%;
  height: 300px;
}
</style>