<template>
  <div class="dk-image" :class="'dk-image-'+type">
    <div v-for="(item, key) in imageList" :key="key" class="dk-image-content" :style="_style">
      <van-image
        :src="item.img"
        :fit="fit"
        width="100%"
        :height="heightAuto?height:''"
        style="overflow:hidden;"
      />
      <div v-if="showText && item.title" :class="'text-type-'+textType">{{ item.title }}</div>
    </div>
    <div v-if="imageList.length<=0">
      <el-empty description="请添加图片数据" />
    </div>
  </div>

</template>

<script>
// import { Image as VanImage } from 'vant'

export default {
  name: 'DkImage',
  components: {
    // VanImage
  },
  props: {
    value: { default: '', type: String },
    type: { default: 'default', type: String },
    textType: { default: 'default', type: String },
    heightAuto: { default: false, type: Boolean },
    showText: { default: false, type: Boolean },
    height: { default: '', type: [Number, String] },
    width: { default: '', type: [Number, String] },
    borderRadius: { default: '', type: [Number, String] },
    marginBottom: { default: '', type: [Number, String] },
    marginRight: { default: '', type: [Number, String] },
    imageList: { default: () => [], type: [Array] },

    fit: { default: 'cover', type: String }
  },
  data() {
    return {}
  },
  computed: {
    _style() {
      var style = {}
      if (this.type === 'default') {
        style['marginBottom'] = this.marginBottom + 'px'
      } else {
        style['width'] = this.width + '%'
        style['marginRight'] = this.marginRight + 'px'
      }
      style['borderRadius'] = this.borderRadius + 'px'
      return style
    }
  },
  mounted() {
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.dk-image {

  &.dk-image-default {
    display: flex;
    flex-direction: column;
    .van-image{
      display: block;
    }
    .dk-image-content{
      display: block;
    }
  }

  &.dk-image-slide {
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;

    .dk-image-content {
      position: relative;
      display: inline-block;
      margin-right: 10px;
      vertical-align: top;
    }
  }

  .dk-image-content {
    position: relative;
    overflow: hidden;
    &:last-child{
      margin: 0!important;
    }
    .text-type-footer {
      text-align: center;
      height: 48px;
      line-height: 48px;
    }

    .text-type-default {
      color: #fff;
      text-align: center;
      position: absolute;
      background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .75));
      bottom: 0;
      height: 48px;
      line-height: 48px;
      width: 100%;
    }
  }
}
</style>
