<template>
  <div class="rating-timeline">
    <div v-if="timelineData.length < 1" style="display: flex; justify-content: center; align-items: center; height: 100%">
      <q-icon size="2em" name="info" />{{ $t('tip.noData') }}
    </div>
    <q-timeline v-else layout="dense" side="right" color="secondary">
      <template v-for="(opinion, index) in timelineData" :key="index">
        <q-timeline-entry side="left" :color="timelineEntryColor(opinion)">
          <div style="background-color: #f9f9f9">
            {{ opinion['adjReason'] }}
          </div>
          <template #subtitle>
            <div class="flex justify-between">
              <span class="text-sm">{{ timelineTitleFormat(opinion) }}</span>
              <div class="flex gap-x-2">
                <span>{{ opinion['userName'] }}</span>
                <span class="text-blue-grey-6">7分钟以前</span>
              </div>
            </div>
          </template>
        </q-timeline-entry>
      </template>
    </q-timeline>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, inject } from 'vue';
import { $t, axios, Environment } from 'platform-core';
import { Rating } from '@/views/custRating/company/ts/Rating';
import { RatingProcessOperationStatus } from '@/views/custRating/company/ts/Utils';

const timelineData = ref([]);
const rating = <Rating>inject('rating');
const histOpinionUrl = Environment.apiContextPath('api/irbs/ratingOverturn');
const timelineTitleFormat = (opinion: any) => {
  const findResult = RatingProcessOperationStatus.find((item) => item['value'] === opinion['operationOpinion']);
  if (findResult) {
    return findResult['label'];
  }
  return '';
};
const timelineSubTitleFormat = (opinion: any) => {
  return opinion['userName'] + ' ' + timelineTitleFormat(opinion) + ' ' + '7分钟以前';
};
const timelineEntryColor = (opinion: any) => {
  const operator = opinion['operationOpinion'];
  if (operator === '20') {
    return 'red';
  } else if (operator === '30' || operator === '40') {
    return 'orange';
  }
  return 'secondary';
};

onMounted(() => {
  const urlSearchParams = new URLSearchParams({ sortBy: ['-lastModifyDate'] });
  urlSearchParams.append('pageable', 'false');
  const criteria = {
    fieldName: 'ratingId',
    operator: 'equals',
    value: rating.ratingData.value['id'],
  };
  urlSearchParams.append('criteria', JSON.stringify(criteria));
  axios.get(histOpinionUrl, { params: urlSearchParams }).then((resp) => {
    if (resp['code'] === 200) {
      timelineData.value = resp.data.content;
    }
  });
});
</script>
<style lang="css">
.rating-timeline .q-timeline--dense--right .q-timeline__entry {
  padding-left: 25px;
}
.rating-timeline .q-timeline__title {
  margin-top: 0;
  margin-bottom: 0px;
}
.rating-timeline .q-timeline__content {
  padding-bottom: 10px;
}
</style>
