<template>
  <div>
    <commodity-cell v-for="item in datas" :url="url" :key="item"></commodity-cell>
    <!-- 分页 -->
    <section class="com-pagination" v-if="paginationShow">
      <div class="com_page_total">共 {{ pagination.total }} 个条目</div>
      <div class="com_page_num" v-if="pageSizeShow">
        <div class="com_page_num_sel">
          <el-select
            v-model="pagination.rowsPerPage"
            placeholder="请选择"
            size="mini"
            @change="handleSizeChange"
          >
            <el-option
              v-for="item in pageOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div>条 / 页</div>
      </div>
      <div class="com_page_control">
        <el-button
          icon="el-icon-arrow-left"
          circle
          size="mini"
          @click="handleCurrentChange(-1)"
          :disabled="pagination.page == 1"
        ></el-button>
        &nbsp;&nbsp;第{{ pagination.page }}页 / 共{{
        Math.ceil(pagination.total / pagination.rowsPerPage)
        }}页
        <el-button
          icon="el-icon-arrow-right"
          circle
          size="mini"
          @click="handleCurrentChange(1)"
          :disabled="
            pagination.page >=
              Math.ceil(pagination.total / pagination.rowsPerPage)
          "
        ></el-button>
      </div>
    </section>
  </div>
</template>

<script>
import CommodityCell from "@/components/commodity-cell.vue";
export default {
  components: {
    "commodity-cell": CommodityCell
  },
  props: {
    datas: { type: Array, default: [] },
    url: { type: String, default: "" },
    paginationShow: {
      type: Boolean,
      default: false
    },
    pageSizeShow: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    pagination: {
      rowsPerPage: 10,
      page: 1,
      total: 0
    },
    pageOptions: [
      {
        value: "10",
        label: "10"
      },
      {
        value: "20",
        label: "20"
      },
      {
        value: "50",
        label: "50"
      }
    ]
  }),
  computed: {},
  watch: {},
  methods: {
    handleSizeChange(val) {
      this.pagination.rowsPerPage = val;
      this.$emit("refresh");
    },
    handleCurrentChange(val) {
      this.pagination.page += val;
      this.$emit("refresh");
    },
    getTotal() {
      this.total = this.datas.length;
    }
  },
  mounted() {
    this.getTotal();
  }
};
</script>

<style scoped>
.com-pagination {
  margin-top: 20px;
  padding-bottom: 20px;
  font-size: 14px;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.com_page_num {
  width: 120px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.com_page_num_sel {
  width: 66px;
}
</style>
<style>
.com_page_control .el-button {
  border: 0;
}
</style>