<template>
  <div class="table">
    <table>
      <thead>
        <tr>
          <td colspan="7">基础信息</td>
          <td colspan="8">论坛传播情况汇总</td>
        </tr>
        <tr>
          <td>NO.</td>
          <td>DLR Code</td>
          <td>经销商名称</td>
          <td>所属区域</td>
          <td>发布日期</td>
          <td>资料名称</td>
          <td>反馈日期</td>
          <td>车系</td>
          <td>车型</td>
          <td>发布平台</td>
          <td>发布版块</td>
          <td>项目分类</td>
          <td>内容分类1</td>
          <td>内容分类2</td>
          <td>标题</td>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(obj, index) in tableData"
          :key="index"
          :class="{ table_gray: index % 2 === 0 }"
        >
          <td style="width: 80px">{{ index + 1 }}</td>
          <td>{{ obj.dlrCode }}</td>
          <td style="width: 180px">{{ obj.dlrName }}</td>
          <td>{{ obj.localArea }}</td>
          <td>{{ (obj.publishDate).replace(RegExp("-", "g"), '/') }}</td>
          <td style="width: 180px">{{ obj.informationName }}</td>
          <td>{{ (((obj.reportDate || '').replace('T', ' ')).slice(0, -4)).replace(RegExp("-", "g"), '/') }}</td>
           
          <td>{{ obj.carTypeName }}</td>
          <td>{{ obj.carPlatformName }}</td>
          <td>{{ obj.publishPlatformName || '-' }}</td>
          <td>{{ obj.publishSourceName }}</td>
          <td>{{ obj.projectTypeName || '-'}}</td>
          <td>{{ obj.mediaTypeName }}</td>
          <td>{{ obj.contentTypeName || '-'}}</td>
          <td style="width: 240px">
            <div class="blueStyle" @click="ulrJump(obj.mediaUrl)">
              {{ obj.mediaTitle }}
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    // 表数据
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    pageSize: {
      type: Number,
      default: 20,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
  },
  mounted() {},
  data() {
    return {};
  },
  methods: {
    ulrJump: function (url) {
      console.log(url);
      this.$emit("go_detail", url);
    },
  },
};
</script>

<style scoped lang="less">
.table {
  background-color: #fff;
  width: 100%;
  margin-top: 5px;
  text-align: center;
  table {
    width: 1800px;
    border-collapse: collapse;
    border: none;
    thead {
      td {
        background: #8d9092;
        height: 36px;
        color: #fff;
        border: 1px solid #ccc;
      }
    }
    tbody {
      tr {
        background: #fff;
      }
      td {
        height: 36px;
        border: 1px solid #ccc;
        width: 120px;
      }
      .operation {
        span {
          color: #00f;
          margin: 0 20px;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
  }
}
.table_gray {
  background: #f5f5f5 !important;
}
.blueStyle {
  color: #0056a0;
  text-decoration: none;
}
</style>
