<template>
  <el-table
    ref="mutipleTable"
    v-loading="loading"
    :data="tableData"
  >
    <el-table-column
      label="主题"
      align="center"
    >
      <template slot-scope="scope">
        <span class="inline-column-table">
          <i :class="['iconImg', scope.row.type === '1' ? 'iconImg1' : (scope.row.type === '2' ? 'iconImg2' : '')]">
            <img :src="imgList[scope.row.type] ? imgList[scope.row.type] : imgList[0]" alt="">
          </i>
          {{ scope.row.themaName }}
        </span>
      </template>
    </el-table-column>>
    <el-table-column
      label="发送时间"
      align="center"
      prop="time"
    />
    <el-table-column
      label="操作"
      align="center"
      width="100"
    >
      <template>
        <el-button type="text">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'MessageTable',
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      loading: false,
      imgList: {
        '0': require('../../../../assets/img/shopmall/systemMessage.png'),
        '1': require('../../../../assets/img/shopmall/activeMessage.png'),
        '2': require('../../../../assets/img/shopmall/logisticsMessage.png')
      }
    }
  }
}
</script>

<style scoped lang="less">
    .inline-column-table {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .iconImg {
            display: flex;
            width: 50px;
            height: 50px;
            justify-content: center;
            align-items: center;
            background-color: #dadada;
            border-radius: 50%;
            margin-right: 20px;
            margin-left: 30px;

            img {
                width: 25px;
                height: 25px;
            }
        }
        .iconImg1 {
            background-color: #9fdd39;
        }
        .iconImg2 {
            background-color: #f9b72c;
        }
    }
</style>
