<template>
    <div v-if="inputData" class="app-list-itemlayoutpanel">
        <h4 class="srfmajortext">{{inputData.srfmajortext}}</h4>
        <template v-for="(tagitem,index) of tagArr">
            <el-tag v-if="tagArr" type="info" size="medium" :key="index">{{tagitem}}</el-tag>
        </template>
        <p class="srfdescription">{{inputData.srfdescription}}</p>
        <div class="user-information">
            <div class="srficon">
                <img v-if="inputData.srficon" :src="inputData.srficon" />
                <img v-else src="/assets/img/noimage.png" alt="">
            </div>
            <span class="srfdate">{{inputData.srfdate}}</span>
        </div>
        <div class="app-list-item-action">
            <template v-for="(action,index) in Object.keys(actionModel)">
                <a :key="index" style="display: inline-block;margin: 0 12px;" @click="uiAction(inputData, action, $event)">
                    <i :class="actionModel[action].icon" style="margin-right:2px;"></i>
                    <span>{{actionModel[action].caption}}</span>
                </a>
            </template>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator';
import { Subject,Subscription } from 'rxjs';
@Component({
})
export default class AppListItemlayoutpanel extends Vue { 

    /**
     * 传递数据
     * 
     * @type {any}
     * @memberof AppListItemlayoutpanel
     */
    @Prop() public inputData: any;

    /**
     * 操作栏模型
     * 
     * @type {*}
     * @memberof AppListItemlayoutpanel
     */
    @Prop() public actionModel:any;

    /**
     * 处理数据
     * 
     * @memberof AppListItemlayoutpanel
     */
    public tagArr:Array<any>=[];

    /**
     * 操作列界面行为
     *
     * @param {*} data
     * @param {*} tag
     * @param {*} $event
     * @memberof AppListItemlayoutpanel
     */
	public uiAction(data: any, tag: any, $event: any) {
        this.$emit('uiAction',data, tag, $event)
    }

    /**
     * vue生命周期
     * 
     * @memberof AppListItemlayoutpanel
     */
    public created(){
        if(this.inputData && this.inputData.srftag){
            this.tagArr = this.inputData.srftag.split(',');
        }
    }
}
</script>

<style lang='less'>
@import './app-list-itemlayoutpanel.less';
</style>