<template>
  <div class="table">
    <table>
      <thead>
        <tr>
          <td>资料名称</td>
          <td>素材时间</td>
          <td>经销商范围</td>
          <td>下载量</td>
          <td>上传时间</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(obj, index) in tableData"
          :key="index"
          :class="{ table_gray: index % 2 === 0 }"
        >
          <td style="width: 20%">{{ obj.informationName }}</td>
          <td style="width: 10%">{{ (obj.filePulishTime || '').replace('-', '/') }}</td>
          <td style="width: 10%">{{ obj.accountScope === 1 ? "共通" : "部分" }}</td>
          <td style="width: 10%">
            <span>{{ obj. totalCount }}</span
            >/<span style="color: #A30014">{{ obj.downloadCount }}</span>
          </td>
          <td style="width: 15%">{{ (((obj.fileUploadDate || '').replace('T', ' ')).slice(0, -4)).replace(RegExp("-", "g"), '/') }}</td>
          <td style="width: 25%" class="operation">
            <span @click="download(index)">下载</span>
            <span @click="delet(index)">删除</span>
            <span @click="detail(index)">查看详情></span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    // 表数据
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  mounted() {},
  data() {
    return {};
  },
  methods: {
    download: function(i) {
      this.$emit('download', i);
    },
    delet: function(i) {
      this.$emit('delet', i);
    },
    detail: function(i) {
      this.$emit('detail', i);
    }
  }
};
</script>

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