import { withModifiers, defineComponent, ref } from "vue";
import styled from "vue3-styled-components";

// const V = defineComponent({
//   setup() {
//     const count = ref(0);

//     const inc = () => {
//       count.value++;
//     };

//     return () => (
//       <div onClick={inc}>{count.value}</div>
//     );
//   },
// });
const wp = styled.div`
  color: red;
  font-size: 32px;
`

const V = {
  setup(){
    const desc = ref('说明测试哈啊哈')
    return {desc}
  },
  data() {
    return { 
      visible: true,
      title: '这是一个标题测试',
    };
  },
  mounted(){
    console.log('mounted');
  },
  render() {
    const clsBtn = `px-4 py-1 text-sm text-purple-600 font-semibold 
    rounded-full border border-purple-200 
    hover:text-white hover:bg-purple-600 hover:border-transparent 
    focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2`
    return <>
            <div>{this.title}<br/>
            {this.desc}<br/>
            {this.visible.toString()}</div>
            <input 
              className=" p-1 rounded text-xs border" 
              vShow={this.visible} 
              vModel={this.title}
            />
            <button className={clsBtn}>
              按钮
            </button>
            <div className={`px-4 py-1 text-sm text-purple-600`}>
              class测试
            </div>
            <wp>这是一个测试div</wp>
          </>;
  },
};

export default V;