<template>
  <div class="hot-container">
    <div class="head">
      <slot name="head"></slot>
    </div>
    <div class="content">
      <div class="title" :style="tabStyle">
        <span v-for="c, index in columns" :key="index">{{ c.text }}</span>
      </div>
      <div v-for="hot, i in reloadData" :key="i" class="cell" :style="tabStyle">
        <template v-if="isObj(hot)">
          <div v-for="_, index in columns" :key="index">
            <div v-if="is_picture(hot[_.label])" class="picture"><el-image v-if="hot[_.label]" :src="hot[_.label]" fit="contain" /></div>
            <div v-else-if="!is_picture(hot[_.label]) && _.label !== 'top'" class="text">{{ hot[_.label] || '' }}</div>
            <div v-else>{{ i + 1 }}</div>
          </div>
        </template>
        <template v-else>
          <div class="text">{{ hot }}</div>
          <div>{{ i + 1 }}</div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    hotData: {
      type: Array,
      default: () => [
        {
          logo: 'https://baidu.jpg',
          bandName: '百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度',
          top: 1
        }
      ]
    }
  },
  computed: {
    tabStyle() {
      const columns = this.columns.map(c => c.labelWidth ? c.labelWidth + 'px' : 'auto').join(' ')
      return {
        gridTemplateColumns: columns,
        gridGap: '10px'
      }
    },
    reloadData() {
      const d = this.hotData
      return d.map(e => {
        if (e) {
          return e
        } else return {}
      })
    }
  },
  methods: {
    isObj(str) {
      return (typeof str === 'object')
    },
    is_picture(str) {
      const r = new RegExp(/\.(png|jpe?g|gif|svg|JPEG)(\?.*)?$/)
      return r.test(str)
    }
  }
}
</script>

<style scoped lang="scss">
.hot-container {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ccc;
  box-shadow: 0 0 4px #ccc;
  .head {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
  }
  .content {
    padding: 10px;
    font-size: 14px;
    .title {
      display: grid;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
      align-items: center;
      span {
        text-align: center;
      }
    }
    .cell {
      padding: 10px 0;
      display: grid;
      box-sizing: border-box;
      width: 100%;
      border-bottom: 1px solid #ccc;
      align-items: center;
      text-align: center;
      height: 60px;
      .picture {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .text {
        text-align: center;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      ::v-deep .el-image {
        width: 60px;
        height: 40px;
      }
    }
  }
}
</style>
