<template>
  <div id="mt-right-aside" class="px-4">
    <select-item-setting
      v-if="selected_item_json"
      :key="selected_item_id"
      :item-json="selected_item_json"
      :done-json="globalStore.done_json"
      @update:item-json="onUpdateItemJson"
      @add-history="onAddHistory">
      <template v-if="hasDeviceBindSlot" #deviceBind="{ item }">
        <slot name="deviceBind" :item="item"></slot> </template
    ></select-item-setting>
    <page-setting
      v-else
      v-model:canvasCfg="globalStore.canvasCfg"
      v-model:grid-cfg="globalStore.gridCfg" />
  </div>
</template>
<script setup lang="ts">
import { computed, useSlots } from 'vue'
import PageSetting from './page-setting.vue'
import SelectItemSetting from './select-item-setting.vue'
import { globalStore } from '@/components/mt-edit/store/global'
import { cacheStore } from '@/components/mt-edit/store/cache'
import type { IDoneJson } from '@/components/mt-edit/store/types'
const slots = useSlots()
const selected_item_id = computed(() => globalStore.selected_items_id[0] || '')
const selected_item_json = computed(() => {
  if (globalStore.selected_items_id.length !== 1) {
    return null
  }
  return globalStore.done_json.find((f) => f.id == selected_item_id.value) || null
})
const onUpdateItemJson = (item: IDoneJson) => {
  const find_index_item_json = globalStore.done_json.findIndex((f) => f.id == item.id)
  if (find_index_item_json < 0) {
    return
  }
  const done_json_temp = [...globalStore.done_json]
  done_json_temp[find_index_item_json] = item
  globalStore.setGlobalStoreDoneJson(done_json_temp)
}
const onAddHistory = () => {
  cacheStore.addHistory(globalStore.done_json)
}
const hasDeviceBindSlot = computed(() => {
  return !!slots.deviceBind
})
</script>
<style>
#mt-right-aside .el-collapse-item__header,
#mt-right-aside .el-collapse-item__wrap {
  background-color: transparent !important;
}
</style>
