<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';
 
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.value = {};
}
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},
];


const penProps =[
    {
        "label": "唯一ID",
        "value": "id",
        "type": "string"
    },
    {
        "label": "标签",
        "value": "tags",
        "type": "array"
    },
    {
        "label": "父图元id",
        "value": "parentId",
        "type": "string"
    },
    {
        "label": "类型",
        "value": "type",
        "type": "integer"
    },
    {
        "label": "名称",
        "value": "name",
        "type": "string"
    },
    {
        "label": "连线类型名",
        "value": "lineName",
        "type": "string"
    },
    {
        "label": "连线封闭",
        "value": "close",
        "type": "bool"
    },
    {
        "label": "锚点数组。",
        "value": "anchors",
        "type": "array"
    },
    {
        "label": "锁定宽高比",
        "value": "ratio",
        "type": "bool"
    },
    {
        "label": "旋转角度",
        "value": "rotate",
        "type": "float"
    },
    {
        "label": "文字旋转",
        "value": "textRotate",
        "type": "bool"
    },
    {
        "label": "显示",
        "value": "visible",
        "type": "bool"
    },
    {
        "label": "锁定",
        "value": "locked",
        "type": "integer"
    },
    {
        "label": "连线长度",
        "value": "length",
        "type": "float"
    },
    {
        "label": "提示",
        "value": "title",
        "type": "string"
    },
    {
        "label": "提示脚本",
        "value": "titleFnJs",
        "type": "string"
    },
    {
        "label": "线宽",
        "value": "lineWidth",
        "type": "float"
    },
    {
        "label": "透明度",
        "value": "globalAlpha",
        "type": "float"
    },
    {
        "label": "虚线模式",
        "value": "lineDash",
        "type": "array"
    },
    {
        "label": "虚线偏移",
        "value": "lineDashOffset",
        "type": "float"
    },
    {
        "label": "颜色",
        "value": "color",
        "type": "string"
    },
    {
        "label": "背景色",
        "value": "background",
        "type": "string"
    },
    {
        "label": "选中颜色",
        "value": "activeColor",
        "type": "string"
    },
    {
        "label": "选中背景",
        "value": "activeBackground",
        "type": "string"
    },
    {
        "label": "移入颜色",
        "value": "hoverColor",
        "type": "string"
    },
    {
        "label": "移入背景",
        "value": "hoverBackground",
        "type": "string"
    },
    {
        "label": "锚点颜色",
        "value": "anchorColor",
        "type": "string"
    },
    {
        "label": "禁用",
        "value": "disabled",
        "type": "bool"
    },
    {
        "label": "禁用颜色",
        "value": "disabledColor",
        "type": "string"
    },
    {
        "label": "禁用背景",
        "value": "disabledBackground",
        "type": "string"
    },
    {
        "label": "禁用文本颜色",
        "value": "disabledTextColor",
        "type": "string"
    },
    {
        "label": "文本",
        "value": "text",
        "type": "string"
    },
    {
        "label": "文本自动调整",
        "value": "textAutoAdjust",
        "type": "bool"
    },
    {
        "label": "文本颜色",
        "value": "textColor",
        "type": "string"
    },
    {
        "label": "进度",
        "value": "progress",
        "type": "float"
    },
    {
        "label": "进度颜色",
        "value": "progressColor",
        "type": "string"
    },
    {
        "label": "垂直进度",
        "value": "verticalProgress",
        "type": "bool"
    },
    {
        "label": "反向进度",
        "value": "reverseProgress",
        "type": "bool"
    },
    {
        "label": "背景类型",
        "value": "bkType",
        "type": "integer"
    },
    {
        "label": "渐变半径",
        "value": "gradientRadius",
        "type": "float"
    },
    {
        "label": "绘制类型",
        "value": "strokeType",
        "type": "integer"
    },
    {
        "label": "渐变背景色",
        "value": "gradientColors",
        "type": "string"
    },
    {
        "label": "连线渐变色",
        "value": "lineGradientColors",
        "type": "string"
    },
    {
        "label": "线端点样式",
        "value": "lineCap",
        "type": "string"
    },
    {
        "label": "线连接样式",
        "value": "lineJoin",
        "type": "string"
    },
    {
        "label": "阴影颜色",
        "value": "shadowColor",
        "type": "string"
    },
    {
        "label": "阴影模糊度",
        "value": "shadowBlur",
        "type": "float"
    },
    {
        "label": "阴影X偏移量",
        "value": "shadowOffsetX",
        "type": "float"
    },
    {
        "label": "阴影Y偏移量",
        "value": "shadowOffsetY",
        "type": "float"
    },
    {
        "label": "文字阴影",
        "value": "textHasShadow",
        "type": "bool"
    },
    {
        "label": "文本宽度",
        "value": "textWidth",
        "type": "float"
    },
    {
        "label": "文本高度",
        "value": "textHeight",
        "type": "float"
    },
    {
        "label": "文本左偏移",
        "value": "textLeft",
        "type": "float"
    },
    {
        "label": "文本上偏移",
        "value": "textTop",
        "type": "float"
    },
    // {
    //     "label": "文本颜色",
    //     "value": "textColor",
    //     "type": "string"
    // },
    {
        "label": "文本颜色类型",
        "value": "textType",
        "type": "integer"
    },
    {
        "label": "文本渐变颜色",
        "value": "textGradientColors",
        "type": "string"
    },
    {
        "label": "移入文本颜色",
        "value": "hoverTextColor",
        "type": "string"
    },
    {
        "label": "选中文本颜色",
        "value": "activeTextColor",
        "type": "string"
    },
    {
        "label": "字体",
        "value": "fontFamily",
        "type": "string"
    },
    {
        "label": "文本大小",
        "value": "fontSize",
        "type": "float"
    },
    {
        "label": "行高",
        "value": "lineHeight",
        "type": "float"
    },
    {
        "label": "字体样式",
        "value": "fontStyle",
        "type": "string"
    },
    {
        "label": "字体粗细",
        "value": "fontWeight",
        "type": "string"
    },
    {
        "label": "文字对齐",
        "value": "textAlign",
        "type": "string"
    },
    {
        "label": "文本基线",
        "value": "textBaseline",
        "type": "string"
    },
    {
        "label": "文本背景",
        "value": "textBackground",
        "type": "string"
    },
    {
        "label": "文本换行方式",
        "value": "whiteSpace",
        "type": "string"
    },
    {
        "label": "文本省略",
        "value": "ellipsis",
        "type": "bool"
    },
    {
        "label": "图片地址",
        "value": "image",
        "type": "string"
    },
    {
        "label": "image跨源",
        "value": "crossOrigin",
        "type": "string"
    },
    {
        "label": "图片保持比例",
        "value": "imageRatio",
        "type": "bool"
    },
    {
        "label": "图片圆角",
        "value": "imageRadius",
        "type": "float"
    },
    {
        "label": "图标",
        "value": "icon",
        "type": "string"
    },
    {
        "label": "图标旋转",
        "value": "iconRotate",
        "type": "float"
    },
    {
        "label": "图片/图标宽度",
        "value": "iconWidth",
        "type": "float"
    },
    {
        "label": "图片/图标高度",
        "value": "iconHeight",
        "type": "float"
    },
    {
        "label": "图标大小",
        "value": "iconSize",
        "type": "float"
    },
    {
        "label": "图标上偏移",
        "value": "iconTop",
        "type": "float"
    },
    {
        "label": "图标左偏移",
        "value": "iconLeft",
        "type": "float"
    },
    {
        "label": "图标字体",
        "value": "iconFamily",
        "type": "string"
    },
    {
        "label": "图标颜色",
        "value": "iconColor",
        "type": "string"
    },
    {
        "label": "字体对齐",
        "value": "iconAlign",
        "type": "string"
    },
    {
        "label": "图标加粗",
        "value": "iconWeight",
        "type": "string"
    },
    {
        "label": "禁止输入",
        "value": "disableInput",
        "type": "bool"
    },
    {
        "label": "禁止旋转",
        "value": "disableRotate",
        "type": "bool"
    },
    {
        "label": "禁止改变大小",
        "value": "disableSize",
        "type": "bool"
    },
    {
        "label": "禁用锚点",
        "value": "disableAnchor",
        "type": "bool"
    },
    {
        "label": "顶部填充",
        "value": "paddingTop",
        "type": "float"
    },
    {
        "label": "背景图片",
        "value": "backgroundImage",
        "type": "string"
    },
    {
        "label": "线条填充图片",
        "value": "strokeImage",
        "type": "string"
    },
    {
        "label": "子画笔",
        "value": "children",
        "type": "array"
    },
    {
        "label": "锚点大小",
        "value": "anchorRadius",
        "type": "float"
    },
    {
        "label": "锚点背景",
        "value": "anchorBackground",
        "type": "string"
    },
    {
        "label": "svg路径",
        "value": "path",
        "type": "string"
    },
    {
        "label": "起始箭头",
        "value": "fromArrow",
        "type": "string"
    },
    {
        "label": "终点箭头",
        "value": "toArrow",
        "type": "string"
    },
    {
        "label": "起始箭头大小",
        "value": "fromArrowSize",
        "type": "float"
    },
    {
        "label": "终点箭头大小",
        "value": "toArrowSize",
        "type": "float"
    },
    {
        "label": "起始箭头颜色",
        "value": "fromArrowColor",
        "type": "string"
    },
    {
        "label": "终点箭头颜色",
        "value": "toArrowColor",
        "type": "string"
    },
    {
        "label": "连线关系",
        "value": "connectedLines",
        "type": "array"
    },
    {
        "label": "动画播放次数",
        "value": "animateCycle",
        "type": "float"
    },
    {
        "label": "下一个动画",
        "value": "nextAnimate",
        "type": "string"
    },
    {
        "label": "自动播放",
        "value": "autoPlay",
        "type": "bool"
    },
    {
        "label": "循环播放",
        "value": "playLoop",
        "type": "bool"
    },
    {
        "label": "动画时长",
        "value": "duration",
        "type": "float"
    },
    {
        "label": "线性播放",
        "value": "linear",
        "type": "bool"
    },
    {
        "label": "缩放比例",
        "value": "scale",
        "type": "float"
    },
    {
        "label": "动画速度",
        "value": "animateSpan",
        "type": "float"
    },
    {
        "label": "动画颜色",
        "value": "animateColor",
        "type": "string"
    },
    {
        "label": "动画虚线样式",
        "value": "animateLineDash",
        "type": "array"
    },
    {
        "label": "动画圆点大小",
        "value": "animateDotSize",
        "type": "float"
    },
    {
        "label": "动画反向",
        "value": "animateReverse",
        "type": "bool"
    },
    {
        "label": "动画保持初始状态",
        "value": "keepAnimateState",
        "type": "bool"
    },
    {
        "label": "连线动画类型",
        "value": "lineAnimateType",
        "type": "float"
    },
    {
        "label": "动画帧",
        "value": "frames",
        "type": "array"
    },
    {
        "label": "单击输入",
        "value": "input",
        "type": "bool"
    },
    {
        "label": "下拉列表",
        "value": "dropdownList",
        "type": "array"
    },
    {
        "label": "事件",
        "value": "events",
        "type": "array"
    },
    {
        "label": "网页",
        "value": "iframe",
        "type": "string"
    },
    {
        "label": "外部元素",
        "value": "externElement",
        "type": "bool"
    },
    {
        "label": "视频地址",
        "value": "video",
        "type": "string"
    },
    {
        "label": "音频地址",
        "value": "vaudio",
        "type": "string"
    },
    {
        "label": "自动折线",
        "value": "autoPolyline",
        "type": "bool"
    },
    // {
    //     "label": "进度值",
    //     "value": "progress",
    //     "type": "float"
    // },
    // {
    //     "label": "进度颜色",
    //     "value": "progressColor",
    //     "type": "string"
    // },
    // {
    //     "label": "垂直进度",
    //     "value": "verticalProgress",
    //     "type": "bool"
    // },
    {
        "label": "起点自动关联",
        "value": "autoFrom",
        "type": "bool"
    },
    {
        "label": "终点自动关联",
        "value": "autoTo",
        "type": "bool"
    },
    {
        "label": "水平翻转",
        "value": "flipX",
        "type": "bool"
    },
    {
        "label": "垂直翻转",
        "value": "flipY",
        "type": "bool"
    },
    {
        "label": "文字镜像",
        "value": "textFlip",
        "type": "bool"
    },
    {
        "label": "层",
        "value": "layer",
        "type": "float"
    },
    {
        "label": "连线边框",
        "value": "borderWidth",
        "type": "float"
    },
    {
        "label": "边框颜色",
        "value": "borderColor",
        "type": "string"
    },
    {
        "label": "边框圆角",
        "value": "borderRadius",
        "type": "float"
    },
    {
        "label": "path ID",
        "value": "pathId",
        "type": "string"
    },
    {
        "label": "隐藏文本",
        "value": "hiddenText",
        "type": "bool"
    },
    {
        "label": "小数点",
        "value": "keepDecimal",
        "type": "float"
    },
    {
        "label": "最后帧",
        "value": "lastFrame",
        "type": "object"
    },
    {
        "label": "元素层级",
        "value": "zIndex",
        "type": "float"
    },
    {
        "label": "类名",
        "value": "className",
        "type": "string"
    },
    {
        "label": "样式",
        "value": "styles",
        "type": "object"
    },
    {
        "label": "跟随图元",
        "value": "followers",
        "type": "array"
    },
    {
        "label": "旋转中心",
        "value": "pivot",
        "type": "object"
    }
];

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>
