jws-frontend/src/pages/09_task-order/order_view/MainPage.vue

<script lang="ts" setup>
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { api } from 'src/boot/axios';
import { Lang } from 'src/utils/ui';
import { baseUrl } from 'stores/utils';

import TaskStatusComponent from '../TaskStatusComponent.vue';
import StateButton from 'src/components/button/StateButton.vue';
import DocumentExpansion from '../expansion/DocumentExpansion.vue';
import ProductExpansion from '../expansion/ProductExpansion.vue';
import PaymentExpansion from '../expansion/PaymentExpansion.vue';
import AdditionalFileExpansion from '../expansion/AdditionalFileExpansion.vue';
import RemarkExpansion from '../expansion/RemarkExpansion.vue';
import InfoMessengerExpansion from '../expansion/receive/InfoMessengerExpansion.vue';
import TableEmployee from '../TableEmployee.vue';
import {
  SaveButton,
  CancelButton,
  MainButton,
  UndoButton,
  EditButton,
} from 'src/components/button';
import FormGroupHead from 'src/pages/08_request-list/FormGroupHead.vue';
import FailRemarkDialog from '../receive_view/FailRemarkDialog.vue';

import { taskStatusOpts } from '../constants';

import SelectReadyRequestWork from '../SelectReadyRequestWork.vue';
import { dialogWarningClose } from 'stores/utils';
import useOptionStore from 'src/stores/options';
import { useTaskOrderForm } from '../form';
import { useTaskOrderStore } from 'src/stores/task-order';
import { dateFormatJS, dateFormat } from 'src/utils/datetime';
import { initLang, initTheme } from 'src/utils/ui';
import { useConfigStore } from 'src/stores/config';
import { storeToRefs } from 'pinia';
import { User } from 'src/stores/user';
import {
  TaskOrderStatus,
  TaskStatus,
  UserTaskStatus,
} from 'src/stores/task-order/types';
import { RequestWork } from 'src/stores/request-list';
import { precisionRound } from 'src/utils/arithmetic';

const taskOrderFormStore = useTaskOrderForm();
const taskOrderStore = useTaskOrderStore();
const route = useRoute();
const router = useRouter();
const configStore = useConfigStore();
const optionStore = useOptionStore();
const { data: config } = storeToRefs(configStore);
const { t } = useI18n();

const { currentFormData, state, fullTaskOrder } =
  storeToRefs(taskOrderFormStore);
const fileList = ref<FileList>();
const fileData = ref<
  {
    name: string;
    progress: number;
    loaded: number;
    total: number;
    url?: string;
  }[]
>([]);

const refProductExpansion = ref<InstanceType<typeof ProductExpansion>>();
const taskProduct = ref<{ productId: string; discount?: number }[]>([]);
const view = ref<TaskOrderStatus>(TaskOrderStatus.Pending);
const taskStatusList = ref<
  {
    code?: string;
    requestWorkId: string;
    step: number;
    failedComment?: string;
    failedType?: string;
  }[]
>([]);

const pageState = reactive({
  productDialog: false,
  failedDialog: false,
});
const formDocument = ref();
const responsibleInstitution = ref<string[]>([]);

const summaryPrice = computed(() => getPrice(taskListGroup.value));

function getPrice(
  list: {
    product: RequestWork['productService']['product'];
    list: (RequestWork & {
      _template?: {
        id: string;
        templateName: string;
        templateStepName: string;
        step: number;
        responsibleInstitution: (string | { group: string })[];
      } | null;
    })[];
  }[],
) {
  return list.reduce(
    (a, c, i) => {
      const pricePerUnit =
        refProductExpansion.value?.calcPricePerUnit(c.product) ?? 0;
      const price = precisionRound(pricePerUnit * c.list.length);
      const disc =
        taskProduct.value.find((v) => v.productId === c.product.id)?.discount ||
        0;
      const vat =
        precisionRound(
          (pricePerUnit * (disc ? c.list.length : 1) - disc) *
            (config.value?.vat || 0.07),
        ) * (!disc ? c.list.length : 1);

      a.totalPrice = precisionRound(a.totalPrice + price);
      a.totalDiscount = precisionRound(a.totalDiscount + Number(disc));
      a.vat = c.product.calcVat ? precisionRound(a.vat + vat) : a.vat;
      a.vatExcluded = c.product.calcVat
        ? a.vatExcluded
        : precisionRound(a.vat + vat);
      a.finalPrice = precisionRound(a.totalPrice - a.totalDiscount + a.vat);

      return a;
    },
    {
      totalPrice: 0,
      totalDiscount: 0,
      vat: 0,
      vatExcluded: 0,
      finalPrice: 0,
    },
  );
}

function getTemplateData(
  requestWork: RequestWork,
  targetStep: number,
): {
  id: string;
  templateName: string;
  templateStepName: string;
  step: number;
  responsibleInstitution: (string | { group: string })[];
} | null {
  const flow = requestWork.productService.service?.workflow;
  if (!flow) return null;
  const step = flow.step.find((v) => v.order === targetStep);
  if (!step) return null;
  return {
    id: step.id,
    templateName: flow.name,
    templateStepName: step.name || '-',
    step: step.order,
    responsibleInstitution: step.responsibleInstitution.map((v) =>
      typeof v === 'string' ? v : v.group,
    ),
  };
}

const messengerListGroup = computed(() =>
  currentFormData.value.taskList.reduce<
    {
      responsibleUser: User;
      list: {
        product: RequestWork['productService']['product'];
        list: (RequestWork & {
          _template?: {
            id: string;
            templateName: string;
            templateStepName: string;
            step: number;
            responsibleInstitution: (string | { group: string })[];
          } | null;
          taskStatus: TaskStatus;
        })[];
      }[];
    }[]
  >((acc, curr) => {
    const taskStatus = curr.taskStatus;
    const step = curr.step;
    const task = curr.requestWorkStep;

    if (!task) return acc;

    if (task.responsibleUser && task.requestWork) {
      const indexUser = acc.findIndex(
        (v) => v.responsibleUser.id === task.responsibleUser?.id,
      );

      const record = Object.assign(task.requestWork, {
        _template: getTemplateData(task.requestWork, step),
        taskStatus: taskStatus ?? TaskStatus.Pending,
      });

      if (indexUser === -1) {
        acc.push({
          responsibleUser: task.responsibleUser,
          list: [
            {
              product: task.requestWork.productService.product,
              list: [record],
            },
          ],
        });
      }

      if (indexUser !== -1) {
        const indexProduct = acc[indexUser].list.findIndex(
          (v) => v.product.id === task.requestWork.productService.product.id,
        );

        if (indexProduct === -1) {
          acc[indexUser].list.push({
            product: task.requestWork.productService.product,
            list: [record],
          });
        }

        if (indexProduct !== -1) {
          acc[indexUser].list[indexProduct].list.push(record);
        }
      }
    }

    return acc;
  }, []),
);

let taskListGroup = computed(() => {
  let tempValueInstitution: string[] = [];

  const cacheData = currentFormData.value.taskList.reduce<
    {
      product: RequestWork['productService']['product'];
      list: (RequestWork & {
        _template?: {
          id: string;
          templateName: string;
          templateStepName: string;
          step: number;
          responsibleInstitution: (string | { group: string })[];
        } | null;
      })[];
    }[]
  >((acc, curr) => {
    if (
      fullTaskOrder.value?.taskOrderStatus === TaskOrderStatus.Complete &&
      curr.taskStatus !== TaskStatus.Complete
    ) {
      return acc;
    }

    const task = curr.requestWorkStep;
    const step = curr.step;

    if (!task) return acc;

    if (task.requestWork) {
      let exist = acc.find(
        (item) => task.requestWork.productService.productId == item.product.id,
      );
      const record = Object.assign(task.requestWork, {
        _template: getTemplateData(task.requestWork, step),
      });

      const template = getTemplateData(task.requestWork, step);

      if (template) {
        tempValueInstitution.push(
          ...template.responsibleInstitution.map((v) =>
            typeof v === 'string' ? v : (v.group ?? 'unknown'),
          ),
        );
      }

      if (exist) {
        exist.list.push(task.requestWork);
      } else {
        acc.push({
          product: task.requestWork.productService.product,
          list: [record],
        });
      }
    }

    return acc;
  }, []);

  responsibleInstitution.value = Array.from(new Set(tempValueInstitution));

  return cacheData;
});

const statusTabForm = ref<
  {
    title: string;
    status: 'done' | 'doing' | 'waiting';
    handler: () => void;
    active?: () => boolean;
  }[]
>([
  {
    title: 'title',
    status: currentFormData.value.id !== undefined ? 'done' : 'doing',
    active: () => view.value === TaskOrderStatus.Pending,
    handler: () => {},
  },
  {
    title: 'inProgress',
    status: 'waiting',
    active: () => view.value === TaskOrderStatus.InProgress,
    handler: () => {},
  },
  {
    title: 'validate',
    status: 'waiting',
    active: () => view.value === TaskOrderStatus.Validate,
    handler: () => {},
  },
  {
    title: 'goodReceipt',
    status: 'waiting',
    active: () => view.value === TaskOrderStatus.Complete,
    handler: () => {},
  },
]);

const TAB_STATUS = ['Pending', 'InProgress', 'Validate', 'Complete'];

function getStatus(
  status: typeof currentFormData.value.taskStatus,
  doneIndex: number,
  doingIndex: number,
) {
  return TAB_STATUS.findIndex((v) => v === status) >= doneIndex
    ? 'done'
    : TAB_STATUS.findIndex((v) => v === status) >= doingIndex
      ? 'doing'
      : 'waiting';
}

async function fetchStatus() {
  statusTabForm.value = [
    {
      title: 'title',
      status:
        fullTaskOrder.value?.taskOrderStatus !== undefined ? 'done' : 'doing',
      active: () => view.value === TaskOrderStatus.Pending,
      handler: () => (view.value = TaskOrderStatus.Pending),
    },
    {
      title: 'inProgress',
      status:
        fullTaskOrder.value?.taskOrderStatus === TaskOrderStatus.Pending ||
        fullTaskOrder.value?.taskOrderStatus === TaskOrderStatus.InProgress
          ? 'doing'
          : 'done',
      active: () => view.value === TaskOrderStatus.InProgress,
      handler: () => (view.value = TaskOrderStatus.InProgress),
    },
    {
      title: 'validate',
      status:
        fullTaskOrder.value?.taskOrderStatus === TaskOrderStatus.Pending ||
        fullTaskOrder.value?.taskOrderStatus === TaskOrderStatus.InProgress
          ? 'doing'
          : 'done',
      active: () => view.value === TaskOrderStatus.Validate,
      handler: () => (view.value = TaskOrderStatus.Validate),
    },
    {
      title: 'goodReceipt',
      status: getStatus(fullTaskOrder.value?.taskOrderStatus, 3, 3),
      active: () => view.value === TaskOrderStatus.Complete,
      handler: () => (view.value = TaskOrderStatus.Complete),
    },
  ];
}

async function submitForm() {
  const res = await taskOrderFormStore.submitTask({
    taskProduct: taskProduct.value,
  });
  if (res && currentFormData.value.id) {
    await taskOrderFormStore.assignFormData(currentFormData.value.id);
    router.push({
      name: 'TaskOrderView',
      params: { id: currentFormData.value.id },
    });
  }

  fetchStatus();
  state.value.mode = 'info';
}

function openProductDialog() {
  pageState.productDialog = true;
}

onMounted(async () => {
  initTheme();
  initLang();
  await configStore.getConfig();

  let currentId = route.params['id'] === 'add' ? undefined : route.params['id'];
  if (route.path === '/task-order/order/add') {
    state.value.mode = 'create';
  }

  if (currentId !== undefined && typeof currentId === 'string') {
    await taskOrderFormStore.assignFormData(currentId);
    await fetchStatus();

    if (fullTaskOrder.value) {
      taskProduct.value = fullTaskOrder.value.taskProduct;
    }

    if (fullTaskOrder.value?.taskOrderStatus === TaskOrderStatus.InProgress)
      view.value = TaskOrderStatus.InProgress;

    if (fullTaskOrder.value?.taskOrderStatus === TaskOrderStatus.Complete)
      view.value = TaskOrderStatus.Complete;

    if (fullTaskOrder.value?.taskOrderStatus === TaskOrderStatus.Validate)
      view.value = TaskOrderStatus.Validate;
  }
});

async function getFileList(taskId: string) {
  const fileList = await taskOrderStore.listAttachment({ parentId: taskId });
  if (fileList)
    fileData.value = await Promise.all(
      fileList.map(async (v) => {
        const rse = await taskOrderStore.headAttachment({
          parentId: taskId,
          fileId: v,
        });

        let contentLength = 0;
        if (rse) contentLength = Number(rse['content-length']);

        return {
          name: v,
          progress: 1,
          loaded: contentLength,
          total: contentLength,
          url: `/task/${taskId}/attachment/${v}`,
        };
      }),
    );
}

async function remove(taskId: string, n: string) {
  dialogWarningClose(t, {
    message: t('dialog.message.confirmDelete'),
    action: async () => {
      const res = await taskOrderStore.delAttachment({
        parentId: taskId,
        name: n,
      });
      if (res) {
        getFileList(taskId);
      }
    },
    cancel: () => {},
  });
}

async function uploadFile(taskId: string, list: FileList) {
  const promises: ReturnType<typeof taskOrderStore.putAttachment>[] = [];

  for (let i = 0; i < list.length; i++) {
    const data = {
      name: list[i].name,
      progress: 1,
      loaded: 0,
      total: 0,
      url: `/task/${taskId}/attachment/${list[i].name}`,
    };
    promises.push(
      taskOrderStore.putAttachment({
        parentId: taskId,
        name: list[i].name,
        file: list[i],
        onUploadProgress: (e) => {
          const exists = fileData?.value.find((v) => v.name === data.name);
          if (!exists) return fileData?.value.push(data);
          exists.total = e.total || 0;
          exists.progress = e.progress || 0;
          exists.loaded = e.loaded;
        },
      }),
    );
    fileData?.value.push(data);
  }

  return await Promise.all(promises);
}

async function completeValidate() {
  if (!fullTaskOrder.value) return;
  const res = await taskOrderStore.completeTaskOrder(fullTaskOrder.value.id);
  if (res) {
    await taskOrderFormStore.assignFormData(fullTaskOrder.value.id);
    await fetchStatus();
  }
}

function getMessengerName(
  record: User,
  opts?: {
    gender?: boolean;
    url?: boolean;
    locale?: string;
  },
) {
  const user = record;

  if (!user) return '-';

  const url = `${baseUrl}/user/${user.id}/profile-image/${user.selectedImage}`;

  return opts?.gender
    ? user.gender
    : opts?.url
      ? url
      : {
          [Lang.English]: `${useOptionStore().mapOption(user.namePrefix as string)} ${user.firstNameEN} ${user.lastNameEN}`,
          [Lang.Thai]: `${useOptionStore().mapOption(user.namePrefix as string)} ${user.firstName} ${user.lastName}`,
        }[opts?.locale || Lang.English] || '-';
}

function openFailedDialog(
  row: RequestWork & {
    _template?: {
      id: string;
      templateName: string;
      templateStepName: string;
      step: number;
    };
    taskStatus: TaskStatus;
  },
  index: number,
) {
  taskStatusList.value = [
    {
      code: `${row.productService.product.code}-${row.request.code}`,
      requestWorkId: row.id || '',
      step: row._template?.step || 0,
      failedComment: fullTaskOrder.value?.taskList[index].failedComment || '',
      failedType: fullTaskOrder.value?.taskList[index].failedType || '',
    },
  ];
  pageState.failedDialog = true;
}

function taskStatusCount(index: number, id: string) {
  const task = fullTaskOrder.value?.taskList.filter(
    (t) => t.requestWorkStep.requestWork.productService.productId === id,
  );
  if (index === 1) {
    return task?.filter((t) => t.taskStatus === TaskStatus.InProgress).length;
  } else if (index === 2) {
    return task?.filter(
      (t) =>
        t.taskStatus === TaskStatus.Success ||
        t.taskStatus === TaskStatus.Complete ||
        t.taskStatus === TaskStatus.Validate,
    ).length;
  } else {
    return task?.filter(
      (t) =>
        t.taskStatus === TaskStatus.Canceled ||
        t.taskStatus === TaskStatus.Redo ||
        t.taskStatus === TaskStatus.Failed,
    ).length;
  }
}

watch([currentFormData.value.taskStatus], () => {
  fetchStatus();
});

function viewDocument(id: string) {
  window.open(`/task-order/doc/${id}`, '_blank');
}
</script>
<template>
  <div class="column surface-0 fullscreen">
    <div
      class="color-bar"
      :class="{
        dark: $q.dark.isActive,
        complete: view === TaskOrderStatus.Complete,
      }"
    >
      <div
        :class="{
          'pink-segment': view !== TaskOrderStatus.Complete,
          'yellow-segment': view === TaskOrderStatus.Complete,
        }"
      ></div>
      <div
        :class="{
          'light-pink-segment': view !== TaskOrderStatus.Complete,
          'light-yellow-segment': view === TaskOrderStatus.Complete,
        }"
      ></div>
      <div class="gray-segment"></div>
    </div>

    <!-- SEC: Header -->
    <header
      class="row q-px-md q-py-sm items-center justify-between relative-position"
    >
      <section class="banner" :class="{ dark: $q.dark.isActive }"></section>
      <div style="flex: 1" class="row items-center">
        <RouterLink to="/task-order">
          <q-img src="/icons/favicon-512x512.png" width="3rem" />
        </RouterLink>
        <span class="column text-h6 text-bold q-ml-md">
          {{
            view === TaskOrderStatus.Complete
              ? $t('taskOrder.goodReceipt')
              : $t('taskOrder.title')
          }}
          <!-- {{ code || '' }} -->
          <span class="text-caption text-regular app-text-muted">
            {{
              $t('quotation.processOn', {
                msg: dateFormatJS({
                  date: fullTaskOrder
                    ? fullTaskOrder.createdAt
                    : new Date(Date.now()),
                  dayStyle: 'numeric',
                  monthStyle: 'long',
                  locale: $i18n.locale === 'tha' ? 'th-Th' : 'en-US',
                }),
              })
            }}
            {{
              dateFormat(
                fullTaskOrder ? fullTaskOrder.createdAt : new Date(Date.now()),
                false,
                true,
              )
            }}
          </span>
        </span>
      </div>
    </header>

    <!-- SEC: Body -->
    <article
      class="col full-width q-pa-md"
      style="flex-grow: 1; overflow-y: auto"
    >
      <section class="col-sm col-12">
        <div class="col q-gutter-y-md">
          <nav
            class="surface-1 q-pa-sm row no-wrap full-width scroll rounded"
            style="gap: 10px"
          >
            <!-- TODO: replace step and status -->
            <StateButton
              v-for="i in statusTabForm"
              :key="i.title"
              :label="$t(`taskOrder.${i.title}`)"
              :status-active="i.active?.()"
              :status-done="i.status === 'done'"
              :status-waiting="i.status === 'waiting'"
              @click="i.handler()"
            />
          </nav>

          <q-form
            ref="formDocument"
            @submit="
              () => {
                submitForm();
              }
            "
          >
            <DocumentExpansion
              :readonly="state.mode !== 'create'"
              v-model:registered-branch-id="currentFormData.registeredBranchId"
              v-model:institution-id="currentFormData.institutionId"
              v-model:task-name="currentFormData.taskName"
              v-model:code="currentFormData.code"
              v-model:contact-name="currentFormData.contactName"
              v-model:contact-tel="currentFormData.contactTel"
              :task-list-group="taskListGroup.length === 0"
              :institution-group="responsibleInstitution"
            />
          </q-form>
          <ProductExpansion
            ref="refProductExpansion"
            v-if="
              view === TaskOrderStatus.Pending ||
              view === TaskOrderStatus.Complete
            "
            :readonly="!['create', 'edit'].includes(state.mode || '')"
            :task-list="taskListGroup"
            v-model:task-product="taskProduct"
            @add-product="openProductDialog"
          />

          <PaymentExpansion
            v-model:summary-price="summaryPrice"
            :complete="view === TaskOrderStatus.Complete"
            v-if="
              view === TaskOrderStatus.Pending ||
              view === TaskOrderStatus.Complete
            "
          />

          <AdditionalFileExpansion
            v-if="
              view === TaskOrderStatus.Pending ||
              view === TaskOrderStatus.Complete
            "
            :readonly="!['create', 'edit'].includes(state.mode || '')"
            v-model:file-data="fileData"
            :transform-url="
              async (url: string) => {
                const result = await api.get<string>(url);
                return result.data;
              }
            "
            @fetch-file-list="
              () => {
                if (!currentFormData.id) return;
                getFileList(currentFormData.id);
              }
            "
            @upload="
              async (f) => {
                if (!currentFormData.id) return;

                fileList = f;

                await uploadFile(currentFormData.id, f);
              }
            "
            @remove="
              async (n) => {
                if (!currentFormData.id) return;
                await remove(currentFormData.id, n);
              }
            "
          />
          <!-- TODO: blind remark, urgent -->
          <RemarkExpansion
            v-if="
              view === TaskOrderStatus.Pending ||
              view === TaskOrderStatus.Complete
            "
            :readonly="false"
          />

          <template
            v-if="
              view === TaskOrderStatus.InProgress ||
              view === TaskOrderStatus.Validate
            "
          >
            <InfoMessengerExpansion
              v-for="(v, i) in messengerListGroup"
              :key="i"
              :gender="getMessengerName(v.responsibleUser, { gender: true })"
              :contact-name="
                getMessengerName(v.responsibleUser, { locale: $i18n.locale })
              "
              :contact-url="getMessengerName(v.responsibleUser, { url: true })"
              :contact-tel="v.responsibleUser.telephoneNo"
              :email="v.responsibleUser.email"
              :status="
                fullTaskOrder?.userTask[i]?.userTaskStatus ||
                UserTaskStatus.Pending
              "
            >
              <template #product>
                <FormGroupHead>
                  {{ $t('menu.product') }}
                </FormGroupHead>
                <div
                  v-for="{ product, list } in v.list"
                  :key="product.id"
                  class="bordered-b"
                >
                  <q-expansion-item
                    dense
                    class="overflow-hidden"
                    switch-toggle-side
                    expand-icon="mdi-chevron-down-circle"
                    header-class="text-medium text-body items-center bordered-b "
                  >
                    <template #header>
                      <q-avatar class="q-mr-md" size="md">
                        <q-img
                          class="text-center"
                          :ratio="1"
                          :src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`"
                        >
                          <template #error>
                            <q-icon
                              class="full-width full-height"
                              name="mdi-shopping-outline"
                              :style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
                            />
                          </template>
                        </q-img>
                      </q-avatar>
                      <span>
                        {{ product.name }}
                        <div class="app-text-muted text-caption">
                          {{ product.code }}
                        </div>
                      </span>
                      <span class="q-ml-auto row items-center q-gutter-x-sm">
                        <div
                          v-for="v in 3"
                          :key="v"
                          class="rounded q-px-sm row items-center"
                          style="background: hsl(var(--text-mute) / 0.1)"
                          :style="`color: hsl(var(--${
                            v === 1
                              ? 'warning'
                              : v === 2
                                ? 'positive'
                                : 'negative'
                          }-bg))`"
                        >
                          <q-icon
                            name="mdi-account-group-outline"
                            size="xs"
                            class="q-pr-sm"
                          />

                          {{ taskStatusCount(v, product.id) }}
                        </div>
                      </span>
                    </template>

                    <div>
                      <div class="full-width q-pa-sm">
                        <TableEmployee step-on :rows="list">
                          <template #append="{ props: subProps }">
                            <TaskStatusComponent
                              :no-action="view !== TaskOrderStatus.Validate"
                              type="order"
                              :readonly="
                                fullTaskOrder?.taskList[i].taskStatus ===
                                TaskStatus.Pending
                              "
                              :status="subProps.row.taskStatus"
                              @click-failed="
                                () => {
                                  openFailedDialog(
                                    subProps.row,
                                    subProps.rowIndex,
                                  );
                                }
                              "
                              @change-status="
                                (status) =>
                                  taskOrderFormStore.changeStatus(
                                    [
                                      {
                                        requestWorkId: subProps.row.id || '',
                                        step: subProps.row._template?.step || 0,
                                      },
                                    ],
                                    status,
                                    () => {
                                      subProps.row.taskStatus = status;

                                      if (fullTaskOrder) {
                                        const target =
                                          fullTaskOrder.taskList.find(
                                            (t) =>
                                              t.requestWorkId ===
                                              subProps.row.id,
                                          );
                                        if (target) {
                                          target.taskStatus = status;
                                        }
                                      }
                                    },
                                  )
                              "
                            />
                          </template>
                        </TableEmployee>
                      </div>
                    </div>
                  </q-expansion-item>
                  <FailRemarkDialog
                    readonly
                    :fail-task-option="list"
                    v-model:set-task-status-list="taskStatusList"
                    v-model:open="pageState.failedDialog"
                    @close="
                      () => {
                        pageState.failedDialog = false;
                        taskStatusList = [];
                      }
                    "
                  />
                </div>
              </template>
            </InfoMessengerExpansion>
          </template>
        </div>
      </section>
    </article>

    <!-- SEC: footer -->
    <footer
      class="surface-1 q-pa-md full-width"
      v-if="
        view === TaskOrderStatus.Validate ||
        view === TaskOrderStatus.Complete ||
        state.mode === 'create'
      "
    >
      <nav class="row justify-end">
        <MainButton
          v-if="currentFormData.id && view === TaskOrderStatus.Complete"
          outlined
          icon="mdi-play-box-outline"
          color="207 96% 32%"
          @click="viewDocument(currentFormData.id)"
        >
          {{ $t('general.view', { msg: $t('general.example') }) }}
        </MainButton>
        <div class="row" style="gap: var(--size-2)">
          <template v-if="state.mode === 'create'">
            <!-- <UndoButton outlined @click="undo()" v-if="state.mode === 'edit'" />
            <CancelButton
              @click="closeTab()"
              v-if="state.mode === 'info'"
              outlined
            /> -->
            <SaveButton
              v-if="state.mode && ['create', 'edit'].includes(state.mode)"
              @click="() => formDocument.submit()"
              solid
            />
            <EditButton
              v-else
              class="no-print"
              @click="state.mode = 'edit'"
              solid
            />
          </template>

          <SaveButton
            v-if="state.mode !== 'create' && view !== TaskOrderStatus.Complete"
            :disabled="
              !fullTaskOrder?.taskList.every(
                (t) =>
                  t.taskStatus === TaskStatus.Complete ||
                  t.taskStatus === TaskStatus.Redo ||
                  t.taskStatus === TaskStatus.Canceled,
              ) || fullTaskOrder.taskOrderStatus === TaskOrderStatus.Complete
            "
            @click="
              dialogWarningClose(t, {
                message: t('dialog.message.confirmValidate'),
                action: async () => {
                  await completeValidate();
                },
                cancel: () => {},
              })
            "
            :label="$t('taskOrder.confirmValidate')"
            icon="mdi-check"
            solid
          ></SaveButton>
        </div>
      </nav>
    </footer>
  </div>

  <!-- SEC: Dialog -->
  <SelectReadyRequestWork
    v-model:open="pageState.productDialog"
    v-model:task-list="currentFormData.taskList"
    @after-submit="
      () => {
        taskProduct = [];
        const taskP = currentFormData.taskList
          .map((v) => ({
            productId:
              v.requestWorkStep?.requestWork.productService.productId ?? '',
            discount: 0,
          }))
          .filter(
            (value, index, self) =>
              index === self.findIndex((t) => t.productId === value.productId),
          );
        taskProduct = taskP;
      }
    "
  />
</template>
<style scoped>
.color-bar {
  width: 100%;
  height: 1vh;
  background: linear-gradient(
    90deg,
    rgb(214, 51, 108) 0%,
    rgba(255, 255, 255, 1) 77%,
    rgba(204, 204, 204, 1) 100%
  );
  display: flex;
  overflow: hidden;

  &.complete {
    background: linear-gradient(
      90deg,
      rgba(245, 159, 0, 1) 0%,
      rgba(255, 255, 255, 1) 77%,
      rgba(204, 204, 204, 1) 100%
    );
  }
}

.color-bar.dark {
  opacity: 0.7;
}

.pink-segment {
  background-color: var(--pink-7);
  flex-grow: 4;
}

.light-pink-segment {
  background-color: hsla(var(--pink-7-hsl) / 0.2);
  flex-grow: 0.5;
}

.yellow-segment {
  background-color: var(--yellow-7);
  flex-grow: 4;
}

.light-yellow-segment {
  background-color: hsla(var(--yellow-7-hsl) / 0.2);
  flex-grow: 0.5;
}

.gray-segment {
  background-color: #ccc;
  flex-grow: 1;
}

.yellow-segment,
.light-yellow-segment,
.pink-segment,
.light-pink-segment,
.gray-segment {
  transform: skewX(-60deg);
}

.banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/images/building-banner.png');
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;

  &.dark {
    filter: invert(100%);
  }
}
</style>