<template>
  <div>
    <div class="flex bg-white p-4 text-lg border-b border-gray-300 h-20 items-center">
      <div class="flex-1 font-semibold">{{ trans('Requests') }}</div>
    </div>
    <a-table
      :dataSource="requests"
      :columns="columns"
      :pagination="false"
      expand-row-by-click
      rowKey="id"
    >
      <span
        slot="id"
        slot-scope="_, __, index"
        class="text-right"
        v-text="index + 1"
      />
      <span slot="actions" slot-scope="_, row" class="text-center">
        <a-button @click.stop="() => reply(row)"> {{ trans('Reply') }} </a-button>
        <!-- <a-tooltip :title="trans('Delete')">
          <a-button
            type="danger"
            ghost
            icon="delete"
            @click="() => destroy('requests', row.id)"
          />
        </a-tooltip> -->
      </span>
      <a-table
        slot="expandedRowRender"
        slot-scope="row"
        :columns="innerColumns"
        :data-source="row.items"
        :pagination="false"
        :show-header="false"
        rowKey="id"
      >
        <span slot="count" slot-scope="_, row">
          {{ row.count }} {{ row.unit }}
        </span>
      </a-table>
    </a-table>
  </div>
</template>

<script>
import columns from "@/data/request-columns";
export default {
  props: ["requests"],

  metaInfo() {
    return {
      title: this.trans('Requests'),
    }
  },

  computed: {
    columns() {
      return columns.map((column) => {
        column.title = this.trans(column.title)
        return column
      });
    },

    innerColumns() {
      return [
        {
          dataIndex: "title",
          key: "title",
        },
        {
          dataIndex: "count",
          key: "count",
          scopedSlots: { customRender: "count" },
          width: 160,
        },
      ];
    },
  },

  methods: {
    reply(row) {
      window.open(`mailto:${row.email}`, "_blank");
    },
  },
};
</script>
