
<template>
    <form-item
        v-if="isRender"
        :prop="name"
        :error="error"
        :required="required"
        :rules="rules"
        :class="classes"
        :label-width="isShowCaption ? (Object.is(labelPos, 'TOP') || Object.is(labelPos, 'BOTTOM') ? null : labelWidth) : 0"
        :ref="name"
    >
        <template v-if="isShowCaption && labelWidth > 0">
            <span v-if="!tipTag" slot="label" :class="labelclasses" :title="isEmptyCaption ? '' : caption">
                {{ isEmptyCaption ? '' : caption }}
            </span>
            <span v-else slot="label" :class="[labelclasses, 'form-item-tip']" v-ibz-tip ibz-tip-mode='async'
                ibz-tip-placement='left' :ibz-tip-params="tipParams">
                {{ isEmptyCaption ? '' : caption }}
            </span>
        </template>
        <div class="app-editor-contant">
            <slot></slot>
        </div>
        <div
            v-if="$refs[name] && $refs[name].validateState && Object.is($refs[name].validateState, 'error')"
            class="app-error-tip"
        >
            <poptip trigger="hover" placement="left" width="300" :word-wrap="true" :transfer="true">
                <icon type="ios-information-circle-outline" color="#ed4014" size="20"></icon>
                <div slot="content" class="app-form-item-error-info">
                    <div class="icon">
                        <icon type="ios-information-circle-outline" color="#ed4014" size="20"></icon>
                    </div>
                    <div class="contant">{{ $refs[name].validateMessage }}</div>
                </div>
            </poptip>
        </div>
    </form-item>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';

@Component({})
export default class AppFormItem2 extends Vue {

    /**
     * 属性标识
     *
     * @type {string}
     * @memberof AppFormItem2
     */
    @Prop()
    tipTag?: string;

    /**
     * v-ibz-tip指令参数
     *
     * @type {string}
     * @memberof AppFormItem2
     */
    tipParams: string = '';

    /**
     * 监听属性标识tipTag变化
     *
     *
     * @memberof AppFormItem2
     */
    @Watch('tipTag', {
        immediate: true
    })
    tipTagChange() {
        if(this.tipTag) {
            this.tipParams = JSON.stringify({ srftiptag: this.tipTag })
        }else {
            this.tipParams = ''
        }
    }

    /**
     * 名称
     *
     * @type {string}
     * @memberof AppFormItem2
     */
    @Prop() caption!: string;

    /**
     * 错误信息
     *
     * @type {string}
     * @memberof AppFormItem2
     */
    @Prop() error?: string;

    /**
     * label样式
     *
     * @type {string}
     * @memberof AppFormItem2
     */
    @Prop() labelStyle?: string;

    /**
     * 标签位置
     *
     * @type {(string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP')}
     * @memberof AppFormItem2
     */
    @Prop() labelPos?: string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP';

    /**
     * 标签宽度
     *
     * @type {number}
     * @memberof AppFormItem2
     */
    @Prop({}) labelWidth!: number;

    /**
     * 是否显示标题
     *
     * @type {boolean}
     * @memberof AppFormItem2
     */
    @Prop() isShowCaption?: boolean;

    /**
     * 标签是否空白
     *
     * @type {boolean}
     * @memberof AppFormItem2
     */
    @Prop() isEmptyCaption?: boolean;

    /**
     * 表单项名称
     *
     * @type {string}
     * @memberof AppFormItem2
     */
    @Prop() name!: string;

    /**
     * 内置样式
     *
     * @type {string}
     * @memberof AppFormItem2
     */
    @Prop() uiStyle?: string;

    /**
     * 表单项值规则
     *
     * @type {string}
     * @memberof AppFormItem2
     */
    @Prop() itemRules!: any;

    /**
     * 是否必填
     *
     * @type {boolean}
     * @memberof AppFormItem2
     */

    @Prop() required!: boolean;

    /**
     * 值规则数组
     *
     * @type {any[]}
     * @memberof AppFormItem2
     */
    rules: any[] = [];

    /**
     * 是否渲染
     *
     * @type {boolean}
     * @memberof AppFormItem2
     */
    isRender: boolean = true;

    /**
     * 表单项值规则监控
     *
     * @param {*} newVal
     * @param {*} oldVal
     * @memberof AppFormItem2
     */
    @Watch('itemRules', { deep: true, immediate: true })
    onItemRulesChange(newVal: any, oldVal: any) {
        if (newVal) {
            try {
                this.rules = [];
                const _rules: any[] = newVal;
                this.rules = [..._rules];
            } catch (error) {}
        }
    }

    /**
     * 监听是否必填属性变化
     *
     * @param {*} newVal
     * @param {*} oldVal
     * @memberof AppFormItem2
     */
    @Watch('required')
    onRequiredChange(newVal: boolean, oldVal: boolean) {
        if (oldVal && !newVal) {
            this.isRender = false;
            this.$nextTick(() => {
                this.isRender = true;
            });
        }
    }

    /**
     * 计算样式
     *
     * @readonly
     * @type {string[]}
     * @memberof AppFormItem2
     */
    get classes(): string[] {
        return ['app-form-item2', this.name, Object.is(this.labelPos, 'TOP') ? 'app-form-item-label-top' : '', Object.is(this.labelPos, 'BOTTOM') ? 'app-form-item-label-top app-form-item-label-bottom' : ''];
    }

    /**
     * label样式
     *
     * @readonly
     * @type {string}
     * @memberof AppFormItem2
     */
    get labelclasses(): string {
        return this.labelStyle ? this.labelStyle : '';
    }

    /**
     * vue 生命周期
     *
     * @memberof AppFormItem2
     */
    mounted() {
        if (this.itemRules) {
            try {
                const _rules: any[] = this.itemRules;
                this.rules = [..._rules];
                this.rules.some((rule: any) => {
                    if (rule.hasOwnProperty('required')) {
                        this.required = rule.required;
                        return true;
                    }
                    return false;
                });
            } catch (error) {}
        }
    }
}
</script>
<style lang="less">
@import './app-form-item2.less';
</style>