<template>
  <div class="table_template">
    <table class="table">
      <thead>
        <tr>
          <td>序号</td>
          <td>经销商名称</td>
          <td>DLR Code</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: 10%">{{ (currentPage-1) * pageSize + 1 + index }}</td>
          <td style="width: 40%">{{ obj.dlrName }}</td>
          <td style="width: 20%">{{ obj.dlrCode }}</td>
          <td style="width: 15%">{{ obj.localArea }}</td>
          <td style="width: 15%">
            <img
              src="../../../../img/add.png"
              @click="changeIcon(index)"
              v-if="!obj.flag"
            />
            <img
              src="../../../../img/delete.png"
              @click="changeIcon(index)"
              v-else
            />
          </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,
    },
  },
  methods: {
    changeIcon: function (index) {
      this.$emit("change_icon", index);
    },
  },
  mounted() {},
  data() {
    return {};
  },
};
</script>

<style scoped lang="less">
.table_template {
  text-align: center;
  .table {
    background-color: #fff;
    border-collapse: collapse;
    border: none;
    width: 100%;
    thead {
      tr {
        background: #8d9092;
        height: 36px;
        color: #fff;
      }
    }
    td {
      border: 1px solid #ccc;
    }
    span {
      &:hover {
        cursor: pointer;
      }
    }
    tbody {
      tr {
        height: 30px;
      }
      td {
        background: #ffffff;
        height: 30px;
        width: 20%;
        img {
          height: 20px;
          width: 20px;
        }
      }
    }
  }
}
.table_gray {
  background: #f5f5f5;
}
</style>
