<template>
  <div class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 h-full">
    <div class="flex justify-between items-center my-2">
      <p class="h2">{{ tableTitle }}&nbsp({{ data.length }})</p>
      <!-- Search -->
      <!-- <Search></Search> -->
    </div>
    <!-- Table -->
    <div class="overflow-y-auto overflow-x-auto scrollbar -mx-2 h-[calc(100%_-_64px)]">
      <DataTable v-model:selection="select" :value="data" breakpoint="0" tableClass="w-full !border-separate !border-spacing-x-2 !table-auto text-sm" @row-select="onRowSelect" @row-unselect="onRowUnselect" @row-select-all="onRowSelectAll" @row-unselect-all="onRowUnelectAll">
        <ColumnGroup type="header">
          <Row>
              <Column selectionMode="multiple" headerClass="w-8 !p-2 !bg-neutral-10 !border-neutral-500 sticky top-0 left-0 z-10 bg-neutral-10"></Column>
              <Column field="label" header="Activity" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" sortable />
              <Column field="occ_value" header="Occurrences" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" sortable :colspan="3" />
              <Column field="case_value" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" header="Cases with Activity" sortable :colspan="3" />
          </Row>
        </ColumnGroup>
        <Column selectionMode="multiple" bodyClass="!p-2 !border-0"></Column>
        <Column field="label" header="Activity" bodyClass="break-words !py-2 !border-0"></Column>
        <Column header="進度條" bodyClass="!py-2 !border-0 min-w-[96px]">
          <template #body="slotProps">
            <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
              <div class="h-full bg-primary" :style="progressWidth(slotProps.data.occ_value)"></div>
            </div>
          </template>
        </Column>
        <Column field="occurrences" header="Occurrences" bodyClass="!text-right !py-2 !border-0"></Column>
        <Column field="occurrence_ratio" header="O2" bodyClass="!text-right !py-2 !border-0"></Column>
        <Column header="進度條" bodyClass="!py-2 !border-0 min-w-[96px]">
          <template #body="slotProps">
            <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
              <div class="h-full bg-primary" :style="progressWidth(slotProps.data.case_value)"></div>
            </div>
          </template>
        </Column>
        <Column field="cases" header="Cases with Activity" bodyClass="!text-right !py-2 !border-0"></Column>
        <Column field="case_ratio" header="C2" bodyClass="!text-right !py-2 !border-0"></Column>
      </DataTable>
    </div>
  </div>
</template>

<script>
import Search from '@/components/Search.vue';

export default {
  props: {
    tableTitle: {
      type: String,
      require: true,
    },
    tableData: {
      type: Array,
      require: true,
    },
    tableSelect: {
      type: Array,
      require: true,
    },
    progressWidth: {
      type: Function,
      require: false,
    }
  },
  data() {
    return {
      select: this.tableSelect,
      data: this.tableData
    }
  },
  components: {
    Search,
  },
  watch: {
    tableSelect(newval){
      this.select = newval;
    }
  },
  methods: {
    onRowSelect() {
      this.$emit('on-row-select', this.select);
    },
    onRowUnselect() {
      this.$emit('on-row-select', this.select);
    },
    onRowSelectAll(e) {
      this.select = e.data;
      this.$emit('on-row-select', this.select);
    },
    onRowUnelectAll(e) {
      this.select = null;
      this.$emit('on-row-select', this.select)
    }
  }
}
</script>
