<template>
  <detail-field-table
    detailField="comment"
    type="single"
    :columns="columns"
    sortBy="id"
    :sortDesc="true"
    :fetchData="fetchVersionHistory"
    @update:selected="(item) => { selected = item }"
  >
    <template v-slot:body-cell-id="p">
      <div class="flex justify-between">
        <span>{{ p.row.id }}</span>
        <q-badge v-if="p.row.isActive" color="primary">現在</q-badge>
      </div>
    </template>
  </detail-field-table>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';
import { IAppDisplay, IAppVersion, IAppVersionDisplay } from 'src/types/AppTypes';
import { date } from 'quasar';
import { api } from 'boot/axios';
import DetailFieldTable from './DetailFieldTable.vue';
import { IUser, IUserDisplay } from 'src/types/UserTypes';

interface IVersionDisplay extends IAppVersionDisplay {
  isActive : boolean
}

export default defineComponent({
  name: 'VersionHistory',
  components: {
    DetailFieldTable
  },
  props: {
    app: {
      type: Object as PropType<IAppDisplay>,
      required: true,
    },
  },
  setup(props, { emit }) {
    const selected = ref<IVersionDisplay[]>();

    const columns = [
      { name: 'id', label: 'バージョン', field: 'version', align: 'left', sortable: true },
      { name: 'name', label: 'バージョン名', field: 'name', align: 'left', sortable: true },
      { name: 'comment', label: 'コメント', field: 'comment', align: 'left', sortable: true },
      // { name: 'creator', label: '作成者', field: (row: IVersionDisplay) => row.creator.fullName, align: 'left', sortable: true },
      // { name: 'createTime', label: '作成日時', field: 'createTime', align: 'left', sortable: true },
      // { name: 'updater', label: '更新者', field: (row: IVersionDisplay) => row.updater.fullName, align: 'left', sortable: true },
      // { name: 'updateTime', label: '更新日時', field: 'updateTime', align: 'left', sortable: true },
    ];

    const formatDate = (dateStr: string) => {
      return date.formatDate(dateStr, 'YYYY/MM/DD HH:mm:ss');
    };

    const toUserDisplay = (user: IUser) => {
      return {
        id: user.id,
        firstName: user.first_name,
        lastName: user.last_name,
        fullNameSearch: (user.last_name + user.first_name).toLowerCase(),
        fullName: user.last_name + ' ' + user.first_name,
        email: user.email,
        isActive: user.is_active,
        isSuperuser: user.is_superuser,
      }
    }

    const fetchVersionHistory = async () => {
      const { data } = await api.get(`api/appversions/${props.app.id}`);
      return data.data.reduce((arr: IVersionDisplay[], item: any) => {
        const val = {
          id: item.version,
          isActive: item.version === props.app.version,
          version: item.version,
          appid: item.appid,
          name: item.versionname,
          comment: item.comment,
          // updater: toUserDisplay(item.updateuser),
          // updateTime: formatDate(item.updatetime),
          // creator: toUserDisplay(item.createuser),
          // createTime: formatDate(item.createtime),
        } as IVersionDisplay;
        arr.push(val);
        return arr;
      }, []);
    }

    return {
      fetchVersionHistory,
      columns,
      selected,
    };
  },
});
</script>