import { __decorate } from "tslib";
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import './style-preview-content.less';
import { createUUID } from 'qx-util';
let StylePreviewContent = class StylePreviewContent extends Vue {
    constructor() {
        super(...arguments);
        /**
         * @description 自定义编辑器值
         * @type {string}
         * @memberof StylePreviewContent
         */
        this.customValue = '';
        /**
         * @description 样式表名称
         * @type {string}
         * @memberof StylePreviewContent
         */
        this.sysCssName = '设计效果预览';
        /**
         * @description 样式名称
         * @type {string}
         * @memberof StylePreviewContent
         */
        this.cssName = '';
        /**
         * @description 表单值
         * @type {string}
         * @memberof StylePreviewContent
         */
        this.formValue = '';
        /**
         * class类名
         *
         * @author zhanghengfeng
         * @date 2023-11-24 17:11:15
         * @type {string}
         */
        this.className = `style-preview-example--${createUUID()}`;
    }
    /**
     * @description 合成样式值
     * @readonly
     * @memberof StylePreviewContent
     */
    get computedValue() {
        return this.formValue + this.customValue;
    }
    onDataChange(newData, oldData) {
        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) {
        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) {
        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) {
        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>);
    }
};
__decorate([
    Prop()
], StylePreviewContent.prototype, "context", void 0);
__decorate([
    Prop()
], StylePreviewContent.prototype, "data", void 0);
__decorate([
    Prop({
        default: false
    })
], StylePreviewContent.prototype, "isInit", void 0);
__decorate([
    Watch('data')
], StylePreviewContent.prototype, "onDataChange", null);
StylePreviewContent = __decorate([
    Component
], StylePreviewContent);
export { StylePreviewContent };