<template>
  <el-dialog title="选择分类" v-model="dialogVisible">
    <div class="list" v-loading="loading">
      <div class="row" v-for="(item, index) in categorys" :key="item.id">
        <div class="list_title">{{ item.name }}</div>
        <div class="item_wrap">
          <el-button :type="item.active ? 'primary' : ''" @click="selectHandle(item)">全部</el-button>
          <!-- <el-button :type="val.active ? 'primary' : ''" v-for="val in item.childrenList" :key="val.id"
            @click="selectHandle(val, index)">{{ val.name }}</el-button> -->
        </div>
      </div>
    </div>
    <span slot="footer" style="display: flex; justify-content: flex-end">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="onSubmitHandle">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useUser } from "@/store/user.js";
import { useGoods } from '@/store/goods.js'

const goodsStore = useGoods()

const store = useUser();
const emit = defineEmits(["success"]);

const dialogVisible = ref(false);
const loading = ref(false);
const categorys = ref([]);

// 确定
function onSubmitHandle() {
  let categorysArr = [];
  for (let item of categorys.value) {
    if (item.active) {
      categorysArr.push({
        name: `${item.name}`,
        id: item.id,
      });
    }
    // if (item.childrenList.length) {
    //   for (let val of item.childrenList) {
    //     if (val.active) {
    //       categorysArr.push({
    //         name: `${val.name}`,
    //         id: val.id,
    //       });
    //     }
    //   }
    // }
  }
  emit("success", categorysArr);
  dialogVisible.value = false;
}

// 选择分类
function selectHandle(item, index = -1) {
  // if (index != -1) {
  //   categorys.value[index].active = false;
  // } else {
  //   item.childrenList.map((item) => {
  //     item.active = false;
  //   });
  // }
  item.active = !item.active;
}

// 获取分类
async function tbShopCategoryGetAjax() {
  try {
    // loading.value = true;
    // const res = await categoryList();
    // res.list.map((item) => {
    //   item.active = false;
    //   item.childrenList.map((item) => {
    //     item.active = false;
    //   });
    // });
    categorys.value = goodsStore.originCategoryList.map(item => {
      item.active = false
      return item
    });
    // setTimeout(() => {
    //   loading.value = false;
    // }, 300);
  } catch (error) {
    console.log(error);
    loading.value = false;
  }
}

function show() {
  dialogVisible.value = true;
  tbShopCategoryGetAjax();
}

defineExpose({
  show,
});

onMounted(() => {
  tbShopCategoryGetAjax();
});
</script>

<style scoped lang="scss">
.list {
  min-height: 200px;

  .row {
    padding-bottom: 20px;

    .list_title {
      color: #999;
      padding-bottom: 10px;
    }

    .item_wrap {
      display: flex;
    }
  }
}
</style>
