import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { propsObj, bindAction } from "./setProps";
export default {
  name: "lit-comp",
};

@customElement('lit-comp')
export class SimpleGreeting extends LitElement {
  // Define scoped styles right with your component, in plain CSS
  constructor() {
    super();
  }

  static styles = css`
    :host {
      color: blue;
    }
    p {
      font-size: 20px;
    }
    img {
      width: 100%;
    }
    global {
      font-size: 20px;
    }
  `;

  static props = propsObj
  // Declare reactive properties
  @property()
  person: string = propsObj.person.default;
  @property()
  imageUrl: string = propsObj.imageUrl.default
  @property({
    reflect: true,
    converter: (value: string) => {
      return JSON.parse(value)
    }, type: Object
  })
  event_imageUrl: any = propsObj.event_imageUrl.default
  @property()
  sylY: string = propsObj.sylY.default
  @property()
  sylN: string = propsObj.sylN.default

  // connectedCallback() {
  //   console.log('渲染完成的钩子')
  // }

  // Render the UI as a function of component state
  render() {

    return html`
      <div class="global">
        <img
          class="demo-img"
          id="imageUrl"
          v-click-in-side
          src="${this.imageUrl}"
          ref="img" @click=${() => {bindAction(this.event_imageUrl)}}/>
        <p id="person" v-click-in-side>Hello, ${this.person}!</p>
        <p>近六月12, <span id="sylY" v-click-in-side>${this.sylY}</span></p>
        <p>近一年, <span id="sylN" v-click-in-side>${this.sylN}</span></p>
      </div>
    `;
  }
}