<template>
  <div class="q-pa-md">
    <q-table  :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" >
      <template v-slot:body-cell-description="props">
          <q-td :props="props">
              <q-scroll-area  class="description-cell">
                <div v-html="props.row.description" ></div>
              </q-scroll-area>
          </q-td>
      </template>
    </q-table>
  </div>
</template>
<script >
import { ref,onMounted,reactive } from 'vue'
import { api } from 'boot/axios';
import { LeftDataBus } from './flowEditor/left/DataBus';

export default {
  name: 'AppSelect',
  props: {
    name: String,
    type: String
  },
  setup() {
  const columns = [
  { name: 'id', required: true,label: 'ID',align: 'left',field: 'id',sortable: true},
  { name: 'name', label: 'アプリ名', field: 'name', sortable: true,align:'left' },
  { name: 'description', label: '概要', field: 'description',align:'left', sortable: false },
  { name: 'createdate', label: '作成日時', field: 'createdate',align:'left'}
  ]
  const rows = reactive([])
    onMounted( () => {
        api.get('api/v1/allapps').then(res =>{
          res.data.apps.forEach((item) =>
              {
                rows.push({
                  id:item.appId,
                  name:item.name,
                  description:item.description,
                  createdate:dateFormat(item.createdAt)});
              }
            )
        });
      });

    const dateFormat=(dateStr)=>{
      const date = new Date(dateStr);
      const pad = (num) => num.toString().padStart(2, '0');
      const year = date.getFullYear();
      const month = pad(date.getMonth() + 1);
      const day = pad(date.getDate());
      const hours = pad(date.getHours());
      const minutes = pad(date.getMinutes());
      const seconds = pad(date.getSeconds());
      return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
    }
    return {
      columns,
      rows,
      selected: ref([])
    }
  },

}
</script>
<style lang="scss">
.description-cell{
  height: 60px;
  width: 300px;
  max-height: 60px;
  max-width: 300px;
}
</style>
