<template>
  <div class="dynamic">
  	<template v-if="type === 'business'">
  		<Tabs size="small">
        <TabPane :label="item.title" v-for="(item, key) in eleConfigMap" :key="key">
          <Row v-for="(arr, index) in item.children" :key="index" class="dynamic-row" type="flex" justify="space-between">
				  	<Col span="11" v-for="config in arr" :key="config.eleName+index">
				  		<Card @dblclick.native="addEle(config.eleName)" draggable="true" @dragend.native="dragend" @dragstart.native="dragstart($event, config.eleName)">
				            <p slot="title">{{ config.title }}</p>
				            <div class="dynamic-row-card">
					            <img
											  :src="config.coverImage || 'http://activitystatic.q-gp.com/low_code.jpg'"
											/>
				            </div>
				        		<span class="dynamic-row-popup">拖拽或双击</span>
				        </Card>
				  	</Col>
				  </Row>
        </TabPane>
      </Tabs>
  	</template>
  	<template v-else>
	  	<Row v-for="(arr, index) in eleConfig" :key="index" class="dynamic-row" type="flex" justify="space-between">
		  	<Col span="11" v-for="config in arr" :key="config.eleName+index">
		  		<Card @dblclick.native="addEle(config.eleName)" draggable="true" @dragend.native="dragend" @dragstart.native="dragstart($event, config.eleName)">
		            <p slot="title">{{ config.title }}</p>
		            <div class="dynamic-row-card">
			            <img
									  :src="config.coverImage || 'http://activitystatic.q-gp.com/low_code.jpg'"
									/>
		            </div>
		            <span class="dynamic-row-popup">拖拽或双击</span>
		        </Card>
		  	</Col>
		  </Row>
  	</template>
  </div>
</template>
<script lang="ts" src="./index.ts"></script>
<style lang="less" scoped>
	.dynamic {
		&-row {
			margin-bottom: 8px;
			p {
				text-align: left;
			}

			&-card {
				display: flex;
				justify-content: center;
				img {
					width: 100%;
					object-fit: fill;
					-webkit-user-drag: none;
				}
			}

			/deep/.ivu-card {
				position: relative;
				overflow: hidden;

				&-head {
					padding: 5px;
				}

				&-body {
					padding: 0;
				}

				.dynamic-row-popup {
					position: absolute;
			    bottom: 0;
			    left: 0;
			    height: 16px;
			    width: 100%;
			    line-height: 16px;
			    font-size: 12px;
			    background: #2E8CF0;
			    text-align: center;
			    color: #fff;
					transform: translateY(100%);
				  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
				}

				&:hover {
					box-shadow: 0 0 14px 0 rgba(46,140,240,0.20);
					border: 1px solid #2E8CF0 !important;
					.dynamic-row-popup {
				    transform: translateY(0);
					}
				}
			}
		}

		/deep/ .ivu-tabs-tab {
			font-size: 14px;
		}
	}
</style>
