<template>
  <div class="form-sort" :style="{ width: $attrs.width,}">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div
            class="row align-items-center justify-content-center style-label p-3"
          >
            <div v-for="item in columns" :class="item.class">
              {{ item.label }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid set-scroll firefox-scrollbar">
      <div class="row">
        <div v-for="item in listItem" class="col-12">
          <div
            class="row align-items-center justify-content-center my-border-bottom"
          >
            <div class="col-style" v-for="col in columns" :class="col.class">
              {{ getValue(item, col.key) }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    listItem: [],
    columns: {
      default() {
        return [
          { label: "تاریخ", key: "normalDate", class: "col-2" },
          { label: "دسته", key: "category", class: "col-3" },
          { label: "عنوان", key: "title", class: "col-6" },
          { label: "مدت", key: "duration", class: "col-1" },
        ];
      },
    },
  },
  methods : {

    getValue(item, key){
      if(item[key] && item[key] != "")
        return item[key]
      else
        return "نامشخص"
    }
  },
  
  
  
};
</script>

<style scoped lang="scss">
.form-sort {
  padding: 1em;
  // width: 40em;
  // border-radius: 0.25em;
  // border: 1px rgb(223 223 223) solid;
  box-shadow: -1px 2px 11px 3px #eee;

  .set-scroll {
    height: calc(100vh - 18em);
    overflow-y: auto;
    overflow-x: hidden;

    .my-border-bottom {
      position: relative;

      &::before {
        content:'';
        display: block;

        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 75%;
        margin: auto;
        border-bottom: 1px solid #eee;
      }
      .col-style {
        display: flex;
        align-items: center;
        line-height: 3;
        font-size: 0.9rem;
        // height: 4em;
        // border-bottom: 1px rgb(223 223 223) solid;
      }
    }
  }
  .style-label {
    background-color: #eee;
  }
}
</style>
