<template>
  <div>
    <div v-if="urlFilter=='app'" ref="commodityList" class="commodity_card">
      <div ref="commodityCardIn" class="commodity_card_list">
        <div
          v-for="item in datas"
          :cellData="item"
          :url="url"
          :key="item.id"
          class="commodity_card_item"
        >
          <commodity-card class="commodity_card_item_in" :cellData="item" :url="url"></commodity-card>
        </div>
      </div>
    </div>
    <div v-else class="commodity_cell">
      <commodity-cell v-for="item in datas" :cellData="item" :url="url" :key="item.id"></commodity-cell>
    </div>
    <!-- 分页 -->
    <section class="com-pagination" v-if="paginationShow">
      <div class="com_page_total">共 {{ pagination.total }} 个条目</div>
      <div class="com_page_item">
        <div class="com_page_num" v-if="pageSizeShow">
          <div>每页条数：</div>
          <div class="com_page_num_sel">
            <el-select
              v-model="pagination.rowsPerPage"
              placeholder="请选择"
              size="small"
              @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 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>
      </div>
    </section>
  </div>
</template>

<script>
import CommodityCell from "@/components/service-list/commodity-cell.vue";
import CommodityCard from "@/components/service-list/commodity-card.vue";
export default {
  components: {
    "commodity-cell": CommodityCell,
    "commodity-card": CommodityCard
  },
  props: {
    datas: { type: Array, default: [] },
    url: { type: String, default: "" },
    paginationShow: {
      type: Boolean,
      default: false
    },
    pageSizeShow: {
      type: Boolean,
      default: false
    },
    urlFilter: { type: String, default: "" }
  },
  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", this.pagination);
    },
    handleCurrentChange(val) {
      this.pagination.page += val;
      this.$emit("refresh", this.pagination);
    },
    getTotal() {
      this.pagination.total = this.datas.length;
    },
    pageResize() {
      let listWidth = this.$refs.commodityCardIn.clientWidth;
      let rowCardNum = Math.floor(listWidth / 310);
      let cardArr = this.$refs.commodityCardIn.children;
      // console.log(rowCardNum, listWidth / rowCardNum);
      for (let i = 0; i < cardArr.length; i++) {
        cardArr[i].style.width = listWidth / rowCardNum - 1 + "px";
      }
      // console.log(this.$refs.commodityCardIn);
    }
  },
  mounted() {},
  watch: {
    datas: {
      handler(val) {
        this.getTotal();
        if (this.urlFilter == "app") {
          setTimeout(() => {
            this.pageResize();
            window.onresize = () => {
              this.pageResize();
            };
          }, 0);
        }
      }
    }
  }
};
</script>

<style scoped>
.com-pagination {
  margin-top: 20px;
  font-size: 14px;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.com_page_num {
  width: 140px;
  margin-right: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.com_page_num_sel {
  width: 50px;
  font-size: 14px;
  position: relative;
  top: 1px;
}
.com_page_item {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.commodity_card {
}
.commodity_card_list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.commodity_card_item {
  margin: 10px 0;
}
.commodity_card_item_in {
  margin: 0 auto;
}
</style>
<style>
.com_page_control .el-button {
  border: 0;
}
.com_page_num .el-input__inner {
  border: 0;
  padding: 0;
}
</style>