<template>
  <section
    :id="`elk-camunda-${name}`"
    class="widget"
  >
    <CountableWidgetTitle
      class="widget__header"
      :title="props.widgetData.block_name"
      :num="getCorrectTitleTotalTasks"
    />
    <div class="widget__controls mb-5">
      <div class="widget__filter">
        <SearchBlock
          v-model="searchValue"
          class="widget__search"
          :placeholder="placeholderSearch"
        />
        <ElDatePicker
          v-model="dates"
          size="small"
          type="daterange"
          range-separator="-"
          :start-placeholder="$t(getCommonCaptionByName('date_from'))"
          :end-placeholder="$t(getCommonCaptionByName('date_to'))"
          :format="$t(getCommonCaptionByName('date_format'))"
          value-format="yyyy-MM-dd"
        />
        <div>
          <ElButton
            class="btn !max-w-[100px]"
            @click="activeFilter(filterNameForBackend.activeAndCompleted)"
          >
            Все
          </ElButton>
          <ElButton
            class="btn !max-w-[100px]"
            @click="activeFilter(filterNameForBackend.active)"
          >
            В работе
          </ElButton>
        </div>
      </div>
    </div>
    <ElkLoader
      v-if="isLoading"
      class="min-h-[600px]"
    />
    <ElkErrorMessage v-else-if="isError" />
    <template v-else>
      <p v-if="!taskList.length">
        {{ emptyList }}
      </p>
      <div
        v-else
        class="widget__content"
      >
        <div class="widget__body">
          <ElTable
            :data="taskList"
            style="width: 100%"
            header-row-class-name="text-base text-gray-400"
            :row-class-name="tableRowClassName"
            :default-sort="{prop: 'time', order: 'descending'}"
            @row-click="openDetails"
          >
            <ElTableColumn
              prop="applicationNumber"
              :label="labelNumber"
              fixed
              min-width="100"
            />

            <ElTableColumn
              prop="time"
              label="Создана"
              sortable
              :sort-method="sort"
              min-width="150"
            />
            <ElTableColumn
              prop="description"
              label="Содержание"
              min-width="300"
            />
            <ElTableColumn
              label="Автор"
              min-width="240"
            >
              <template slot-scope="scope">
                <el-popover
                  placement="bottom-start"
                  width="200"
                  trigger="hover"
                  :open-delay="250"
                  @after-enter="getAuthorCardData(scope.row.processAuthor)"
                >
                  <ElkLoading
                    v-if="popoverIsLoading"
                    :style="{width: '30px', height: '30px', padding: '10px 0'}"
                  />
                  <div
                    v-else
                    class="flex gap-1"
                  >
                    <Avatar
                      :email="scope?.row?.processAuthor"
                      size="24"
                      style="margin-bottom: 0;"
                    />
                    <span class="author__text">{{
                      authorCard &&
                      authorCard.first_name + ' ' + authorCard.last_name
                    }}</span>
                  </div>
                  <div
                    slot="reference"
                    class="name-wrapper"
                  >
                    <span>{{ scope.row.processAuthor }}</span>
                  </div>
                </el-popover>
              </template>
            </ElTableColumn>

            <ElTableColumn
              fixed="right"
              width="150"
              :prop="fieldStatus"
              :label="labelStatus"
            />
          </ElTable>

          <el-pagination
            class="pagination widget__pagination"
            layout="pager"
            :current-page="currentPage"
            :total="totalSize"
            :page-size="pageSize"
            @current-change="pageChange($event)"
          />
        </div>
      </div>
    </template>
  </section>
</template>

<script setup>
import ElkLoader from '@/components/common/elkLoading';
import ElkErrorMessage from '@/components/common/elkErrorMessage';
import SearchBlock from '@/components/SearchBlock';
import CountableWidgetTitle from '@/components/common/CountableTitle';
import CamundaAPI from '@/api/CamundaAPI/CamundaAPI';
import {getCommonCaptionByName} from '@/i18n/utils';
import {CAMUNDA_PROTO_PROCESS} from '@/router/routes';
import {ref, computed, watchEffect} from 'vue';
import store from '@/store';
import {useRouter} from 'vue-router/composables';
import {useI18n} from 'vue-i18n-composable';
import Avatar from '@/components/common/elkAvatar.vue';
import {GET_STAFF_INFO_BY_EMAIL} from '@/api';
import Axios from '@/utils/Elk-Axios';

const {d} = useI18n();

const filterNameForBackend = {
  activeAndCompleted: 'ACTIVE_AND_COMPLETED',
  active: 'ACTIVE'
};

const props = defineProps({
  widgetData: {
    type: Object,
    required: true
  }
});

const router = useRouter();
const name = 'task';
const placeholderSearch = 'Поиск по заявкам';
const emptyList = 'нет заявок';
const fieldStatus = 'statusRu';
const labelNumber = 'Номер';
const labelDate = 'Создана';
const labelStatus = 'Статус';

const activeField = ref(null);

const userEmail = computed(() => store.state.user.email);
const isLoading = ref(false);
const isError = ref(false);
const taskList = ref([]);
const getCorrectTitleTotalTasks = computed(() => taskList.value.length);
const searchValue = ref('');
const dates = ref(null);
const activeType = ref('ACTIVE_AND_COMPLETED');
const currentPage = ref(1);
const totalSize = ref(0);
const pageSize = ref(8);

const dataForRequest = computed(() => ({
  email: userEmail.value,
  activeType: activeType.value,
  taskType: name.toUpperCase(),
  pagination: {
    page: currentPage.value,
    pageSize: pageSize.value
  }
}));

async function getData() {
  isLoading.value = true;
  try {
    const {data} = await CamundaAPI.getDataByUser(dataForRequest.value);

    const tasks = data.taskList.map(task => ({
      ...task,
      active: task.isActive ? 'В работе' : 'Выполнена',
      time: d(new Date(task.taskStartTime), 'officeTask'),
      description: `Заявка №${task.applicationNumber ?? '...'} - ${
        task.processName
      }`
    }));

    taskList.value = tasks;
    totalSize.value = data.taskListSize;
  } catch (error) {
    isError.value = true;
  } finally {
    isLoading.value = false;
  }
}

watchEffect(() => getData());

function openDetails(item) {
  router.push(
    `${CAMUNDA_PROTO_PROCESS}/${item.processInstanceId}/${item.taskDefinitionKey}/${item.id}`
  );
}

function activeFilter(typeName) {
  activeType.value = typeName;
}

function sort(a, b) {
  return Date.parse(a.taskStartTime) - Date.parse(b.taskStartTime);
}

function tableRowClassName({row}) {
  const className = 'cursor-pointer text-base text-dark';
  return row.isActive ? className : `${className} text-opacity-20`;
}

function pageChange(event) {
  console.log(event, ' event');
  currentPage.value = event;
  getData();
}

const authorCard = ref(null);
const popoverIsLoading = ref(false);

const getAuthorCardData = async email => {
  try {
    popoverIsLoading.value = true;

    const {data} = await Axios.get(GET_STAFF_INFO_BY_EMAIL, {
      params: {
        email
      }
    });
    authorCard.value = data;
  } catch (error) {
    console.error(error);
  } finally {
    popoverIsLoading.value = false;
  }
};
</script>

<script>
export default {name: 'ElkCamundaTasks'};
</script>