import { defineComponent, ref } from "vue";
import {ElButton, ElTooltip} from "element-plus";
import SvgIcon from '@/components/SvgIcon/index.vue';
import './index.scss';
import { getUuid } from '@/utils/ruoyi';

export default defineComponent({
  props:{
    options:{
      type: Object,
      default: () => {
        return {
          text: '11',
          type: 'elbutton',
          customdom:(form)=>{},
          icon: 'back',
          others:{
            iconStyle:{},
            txtStyle:{}
          },
          tips:"",
          onClick: () => {
          }
        }
      }
    }
  },
  setup(props, ctx) {
    const app = getCurrentInstance()
    const eventbus = app.appContext.config.globalProperties.$baseEventBus

    const data = ref({
      text: '11',
      icon: 'back',
      type: 'elbutton',
      customdom:(form)=>{},
      others:{ iconStyle:{},txtStyle:{}},
      tips:"",
      onClick: () => {
      }
    })
    if(props.options!=null){
      data.value = props.options;
    }

    data.value["uuid"] = getUuid();
    try{
      const getNodeData = inject('getNode');
      const currentNode = getNodeData();
      // 监听当前节点数据发生了变化
      if(currentNode.data.options!=null) {
        currentNode.data.options["uuid"] = data.value["uuid"];
        data.value = currentNode.data.options;
      }
    }catch (e){}


    return () =>{
       let buttonstyle = (<ElButton onClick={data.value.onClick}  {...data.value.others??{}}  >
         <SvgIcon {...data.value.others?.iconStyle??{}} icon-class={data.value.icon}/>
         <span {...data.value.others?.txtStyle??{}}>{data.value.text}</span>
       </ElButton>);
       if(data.value.type=="custom"){
         buttonstyle = (<div key={data.value.count}>{data.value.customdom(data.value)}</div>)
       }
       if(data.value.tips==""){
         return (<div class="c-button">{buttonstyle}</div>)
       }else{
         return (<div  class="c-button">
           <ElTooltip content={data.value.tips}  effect="light">
             {buttonstyle}
           </ElTooltip></div>
         )
       }

    }

      ;
  },
});
