import { CreateElement, VNode } from 'vue';
import { PSSysCssService } from '@ibizstudio/api';
import { Component, Inject, Prop, Vue, Watch } from 'vue-property-decorator';
import './style-preview-content.less';
import { createUUID } from 'qx-util';

@Component
export class StylePreviewContent extends Vue {
  @Prop()
  context!: IContext;

  @Prop()
  data?: any;

  @Prop({
    default: false
  })
  isInit?: boolean;

  service!: PSSysCssService;

  /**
   * @description 自定义编辑器值
   * @type {string}
   * @memberof StylePreviewContent
   */
  customValue: string = '';

  /**
   * @description 样式表名称
   * @type {string}
   * @memberof StylePreviewContent
   */
  sysCssName: string = '设计效果预览';

  /**
   * @description 样式名称
   * @type {string}
   * @memberof StylePreviewContent
   */
  cssName: string = '';

  /**
   * @description 表单值
   * @type {string}
   * @memberof StylePreviewContent
   */
  formValue: string = '';

  /**
   * class类名
   *
   * @author zhanghengfeng
   * @date 2023-11-24 17:11:15
   * @type {string}
   */
  className: string = `style-preview-example--${createUUID()}`;

  /**
   * @description 合成样式值
   * @readonly
   * @memberof StylePreviewContent
   */
  get computedValue() {
    return this.formValue + this.customValue;
  }

  @Watch('data')
  onDataChange(newData: any, oldData: any) {
    if (newData && !Object.is(newData, oldData)) {
      this.load(newData);
    }
  }

  async created() {
    this.service = await ___ibz___.gs.getPSSysCssService();
    if (this.data && this.isInit) {
      const data = this.data;
      this.customValue = data.cssstyle || '';
      this.sysCssName = data.pssyscssname ? `设计效果预览-${data.pssyscssname}` : '设计效果预览';
      this.cssName = data.cssname;
      if (this.cssName) {
        this.customValue = this.customValue.replaceAll(`.${this.cssName}`, `.${this.className}.${this.cssName}`);
      }
      this.formValue = this.formatConversion(data);
    }
  }

  /**
   * @description 加载数据
   * @param {*} data
   * @memberof StylePreviewContent
   */
  async load(data: any) {
    Object.assign(this.context, { pssyscss: data.pssyscss });
    const res = await this.service.Get(this.context);
    if (res.ok && res.data) {
      const data = res.data;
      this.customValue = data.cssstyle || '';
      this.sysCssName = data.pssyscssname ? `设计效果预览-${data.pssyscssname}` : '设计效果预览';
      this.cssName = data.cssname;
      if (this.cssName) {
        this.customValue = this.customValue.replace(`.${this.cssName}`, `.${this.className}.${this.cssName}`);
      }
      this.formValue = this.formatConversion(data);
    }
  }

  /**
   * @description 将数据转换为style文本
   * @param {*} entity
   * @return {*}  {string}
   * @memberof StylePreviewContent
   */
  formatConversion(entity: any): string {
    let formValue = `.${this.className}.${entity.cssname}{\r\n`;
    if (entity.margin) {
      const margin = entity.margin.replaceAll(',', 'px ');
      formValue += `    margin:${margin}px;\r\n`;
    } else {
      formValue += `    margin: 0px 0px 0px 0px;\r\n`;
    }
    if (entity.padding) {
      const padding = entity.padding.replaceAll(',', 'px ');
      formValue += `    padding:${padding}px;\r\n`;
    } else {
      formValue += `    padding: 0px 0px 0px 0px;\r\n`;
    }
    if (entity.border) {
      const border = entity.border.replaceAll(',', 'px ');
      formValue += `    border-width:${border}px;\r\n`;
    } else {
      formValue += `    border-width:0px 0px 0px 0px;\r\n`;
    }
    if (entity.borderstyle) {
      formValue += `    border-style:${entity.borderstyle.toLowerCase()};\r\n`;
    }
    if (entity.bordercolor) {
      formValue += `    border-color:${entity.bordercolor};\r\n`;
    }
    if (entity.bkcolor) {
      formValue += `    background-color:${entity.bkcolor};\r\n`;
    }
    if (entity.fontfamily) {
      formValue += `    font-family:${entity.fontfamily};\r\n`;
    }
    if (entity.fontstyle) {
      const fontWeight = Object.is(entity.fontstyle, 1) || Object.is(entity.fontstyle, 3) || Object.is(entity.fontstyle, 5) || Object.is(entity.fontstyle, 7);
      const fontStyle = Object.is(entity.fontstyle, 2) || Object.is(entity.fontstyle, 3) || Object.is(entity.fontstyle, 6) || Object.is(entity.fontstyle, 7);
      const textDecoration = entity.fontstyle >= 4;
      if (fontWeight) {
        formValue += `    font-weight:900;\r\n`;
      }
      if (fontStyle) {
        formValue += `    font-style: italic;\r\n`;
      }
      if (textDecoration) {
        formValue += `    text-decoration: underline;\r\n`;
      }
    }
    if (entity.fontsize) {
      formValue += `    font-size: ${entity.fontsize}px;\r\n`;
    }
    if (entity.fontcolor) {
      formValue += `    color: ${entity.fontcolor};\r\n`;
    }
    if (entity.halign) {
      formValue += `    text-align: ${entity.halign.toLowerCase()};\r\n`;
    }
    if (entity.valign) {
      formValue += `    vertical-align: ${entity.valign.toLowerCase()};\r\n`;
    }
    formValue += '}\r\n';
    return formValue;
  }

  render(h: CreateElement): VNode {
    return (
      <div class='style-preview-content'>
        {this.data ? (
          <div class='style-preview-wrapper'>
            <style>{this.computedValue}</style>
            <div class={['example', this.cssName, this.className]}>{this.sysCssName}</div>
          </div>
        ) : (
          <div class='empty'>样式数据为空，请选择预览样式！</div>
        )}
      </div>
    );
  }
}