<template>
    <div>
        <!-- 卡片 -->
        <ul class="card-area" v-if="cardData && cardData.length">
            <li v-for="(column,index) in cardData"> 
                <div class="card-div">
                    <div class="search-tpl-mgr-main-area">
                        <div class="fl search-tpl-mgr-l-area">
                            <label :class='{"strong":strongLine==1?true:false}'><span :title="column.name">{{column.name}}</span></label>
                            <label :class='{"strong":strongLine==2?true:false}'><span :title="column.code">{{column.code}}</span></label>
                            <label :class='{"strong":strongLine==3?true:false}'><span :title="column.scenecode">{{column.scenecode}}</span></label>
                        </div>
                        <div class="search-tpl-mgr-r-area">
                            <label><span v-if="column.issys">{{issysName}}</span></label>
                            <i :class="iconName"></i>
                        </div>
                    </div>
                    <div class="search-tpl-mgr-btn-area">
                        <i class="ifbp-icon-edit" @click='cardEditClick(index)' title="编辑"></i>
                        <i class="ifbp-icon-delete" @click='cardDeleteClick(index)' title="删除"></i>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
  export default {
    name: 'ifbpSearchTplMgrCard',
    props: {
        cardData:{
            type:Array,
            default:[]
        },
        strongLine:{
            type:Number,
            default:1
        },
        iconName:{
            type:String,
            default:"ifbp-icon-search"
        },
        issysName:{
            type:String,
            default:"系统预置"
        }
    },
    methods: {
        cardEditClick(index){
            this.$emit('cardEditClick', index);
        },
        cardDeleteClick(index){
            this.$emit('cardDeleteClick', index);
        }
    },
  };
</script>
<style scope>
.card-area  .search-tpl-mgr-main-area{
  position: relative;
  height: 95px;
}
/* 卡片左侧内容 */
.card-area .search-tpl-mgr-l-area{
  vertical-align: top;
  width: 100%;
  box-sizing: border-box;
  padding-right: 96px;
  overflow:hidden;
}
.card-area .search-tpl-mgr-l-area label{
  display: block;
  width:100%; 
  box-sizing: border-box;
  padding-right: 5px;
  white-space:nowrap; 
  overflow:hidden; 
  text-overflow:ellipsis; 
  font-size:14px;
  margin-bottom: 8px;
  color: #75787B;
}
.card-area .search-tpl-mgr-l-area label.strong{ 
  font-size: 18px;
  line-height: 24px;
  color: #2D2D2D;
  margin-bottom: 12px;
}
/* 卡片右侧内容 */
.card-area .search-tpl-mgr-r-area{
  box-sizing: border-box;
  width: 96px;
  padding-left: 16px;
  position: absolute;
  right: 0;
}
.card-area .search-tpl-mgr-r-area label{
  display: block;
  width: auto;
  height: 18px;
  margin-bottom: 10px;
}
.card-area .search-tpl-mgr-r-area span{
  display: inline-block;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 12px;
  line-height: 18px;
  color: #fff;
  background: #A6B7CB;
  border-radius: 2px 0 0 2px;
}
.card-area .search-tpl-mgr-r-area i{
  font-size: 64px;
  color: #F0F0F5;
}
/* 卡片功能按钮 */
.card-area  .search-tpl-mgr-btn-area{
  visibility: hidden;
  height: 40px;
  text-align: right;
  padding: 0 16px;
}
.card-area li:hover .search-tpl-mgr-btn-area{
  visibility: inherit;
}
.card-area  .search-tpl-mgr-btn-area i{
  margin: 12px 0 0 8px;
  font-size: 18px;
  color:#727171;
}
.card-area  .search-tpl-mgr-btn-area i:hover{
  cursor: pointer;
  color:#0089FA;
}
</style>
