<template>
  <t-dialog
    v-model:visible="props.visible"
    header="更多属性"
    :width="470"
    @close="close"
    @confirm="confirm"
  >
    <div class="input-search">
      <div class="btn">
        <search-icon class="hover" />
      </div>
      <t-input
        v-model="search"
        @change="onSearch"
        @enter="onSearch"
        placeholder="搜索属性"
      />
    </div>
    <div class="props mt-8">
      <!-- <t-tree
      :data="penProps"
      activable 
      expand-all
      v-model:actived="activedProp"
      hover
      :filter="propsFilter"
      @click="onClick"
    >
      <template #label="{ node }">
        <t-tooltip
          :content="node.data.description"
          placement="top"
        >
        {{node.label}}
      </t-tooltip>
      </template>
    </t-tree> -->
        <t-table
            class="data-list"
            ref="tableRef"
            row-key="value"
            :columns="columns"
            :data="data"
            :height="300"
            :bordered="true"
            @select-change="onselect"
            >
        </t-table>
    </div>
  </t-dialog>
</template>

<script lang="ts" setup>
import { SearchIcon } from 'tdesign-icons-vue-next';
import { ref, toRaw } from 'vue';
import { penProps } from '@/services/defaults';
 
const props = defineProps<{
  visible: boolean;
}>();
const emit = defineEmits(["update:visible", "change"]);

function close() {
  emit("update:visible", false);
}

const filterValue = ref({});
const propsFilter = ref(null);
const search = ref('');
const onSearch = () => {
    data.value = penProps.filter((item)=>{ return item.label.indexOf(search.value) >= 0||item.value.indexOf(search.value) >= 0})
//   propsFilter.value = search.value ? (node) => { return node.value?.indexOf(search.value) >= 0 }: null;
};

const onselect = (value: string[], options: any)=>{
    activeObj = toRaw(options.selectedRowData[0]);
}

const onClick = (context) => {
  const { node } = context;
  activeObj = JSON.parse(JSON.stringify(node.data));
};

let activeObj:any = {};

const activedProp = ref([]);

const confirm = ()=>{
  emit("change", activeObj);
  activeObj = {};
}
function getList(){
//   let arr = [];
//   Array.from(document.getElementsByTagName('ne-h3')).forEach((item)=>{
//     let nextElement = item.nextElementSibling;
//     let nnextElement = nextElement.nextElementSibling;
//     let nnnextElement = nnextElement.nextElementSibling;
//     let typeStr = nnnextElement.innerText.trim();
//     let type = 'object'
//     if(typeStr.includes('LockState')||typeStr.includes('enum')||typeStr.includes('Gradient')){
//         type = 'integer'
//     }else if(typeStr.includes('[]')||typeStr.includes('array')){
//         type = 'array'
//     }else if(typeStr.includes('|')||typeStr.includes('string')){
//         type = 'string'
//     }else if(typeStr.includes('boolean')){
//         type = 'bool'
//     }else if(typeStr.includes('number')){
//         type = 'float'
//     }
//     let description =  nnextElement.innerText.trim()
//     // console.log(typeStr,' -> ',type);
//     if(description.startsWith('描述')){
//         arr.push({
//             label:nextElement.innerText.trim(),
//             value:item.innerText.trim(),
//             // description,
//             type
//         })
//     }
//   })
  //boolean ->bool string | ->string []->array number->float LockState、enum、Gradient->integer
}

const columns = [
    { colKey: 'row-select', type: 'single',width:50 },
    { colKey: 'label', title: '名称' },
    { colKey: 'value', title: 'key名' ,width:150},
    { colKey: 'type', title: '类型' ,width:80},
];

let data = ref(penProps);

</script>

<style lang="postcss" scoped>
.props{
  height:300px;
  overflow-y:auto;
}

.input-search{ 
    width: 100%;
    margin-top: 0px;
    padding:4px 0px;

    .btn{
        left:14px;
    }
}
:deep(.t-tree){
 .t-tree__icon{
   width: 0px;
 }
 .t-tree__label:not(.t-is-active):not(.t-is-checked):hover{
    background-color: #262D3A;
 }
}
.data-list {
    :deep(.t-table__header--fixed:not(.t-table__header--multiple) > tr > th) {
        background: none;
    }

    :deep(.t-table__pagination) {
        padding-bottom: 0;
    }
}
</style>
