<template>
  <div class="RCSbox main">
    <TransactionStatus
      :data="transactionStatusData"
    />
    <div class="content">
      <TradingTimeline :data="tradingTimelineData" />
      <TradingOperationsTimeline
        :data="tradingOperationsTimelineData"
        :instrument="instrument"
        :product="product"
      />
    </div>
  </div>
</template>
<script>
import TransactionStatus from '../components/TransactionStatus';
import TradingTimeline from '../components/TradingTimeline';
import TradingOperationsTimeline from '../components/TradingOperationsTimeline';
import { getQueryMainInfo, getQueryDeriveInfo } from '@/api/dcsApi';
import FormTools from '@/utils/FormTools';
import { isEmpty } from 'lodash';
export default {
  components: {
    TransactionStatus,
    TradingTimeline,
    TradingOperationsTimeline,
  },
  data() {
    return {
      transactionStatusData: {},
      tradingTimelineData: {},
      tradingOperationsTimelineData: {},
      routeParam: {
        product: '',
        instrument: '',
        dealId: '',
      },
    };
  },
  created() {
    console.log('$route.query', this.$route.query);
    const routeParam = this.$route.query;
    this.queryMainInfo(routeParam);
    this.getDeriveInfo(routeParam);
  },
  methods: {
    async queryMainInfo(routeParam) {
      const param = {
        'queryParam.dealId': routeParam.dealId, 'queryParam.product': routeParam.product, 'queryParam.instrument': routeParam.instrument,
      };
      const data = await getQueryMainInfo(param);
      if (data?.success) {
        const { mainInfo, timelineInfo, serveDate, settleInfo } = data.data.result;

        this.transactionStatusData = {
          ...mainInfo,
          messages: FormTools.parseMapStr(mainInfo.children[0].message),
          settleInfo: FormTools.parseMapStr(settleInfo),
        };

        let viewNowDateFlag = true;
        const timelineInfoChildren = timelineInfo.children
          .filter(item => { return !isEmpty(item); })
          .map((item, index) => {
            if (item?.date == serveDate) {
              viewNowDateFlag = false;
            }
            return { ...item, message: item.message ? FormTools.parseMapStr(item.message) : '' };
          });
        if (viewNowDateFlag) {
          timelineInfoChildren.push({
            date: serveDate,
            event: this.$t('form.nowDate'),
            viewNowDateFlag: viewNowDateFlag,
          });
        }
        timelineInfoChildren.sort((a, b) => { return new Date(a.date) - new Date(b.date); });

        this.tradingTimelineData = {
          timelineInfo: timelineInfoChildren,
          serveDate: serveDate,
        };
      }
    },
    async getDeriveInfo(routeParam) {
      const data = await getQueryDeriveInfo({ 'queryParam.dealId': routeParam.dealId, 'queryParam.product': routeParam.product, 'queryParam.instrument': routeParam.instrument });
      if (data?.success) {
        const { deriveInfo } = data.data.result;
        this.tradingOperationsTimelineData = {
          ...deriveInfo,
          children: deriveInfo?.children ? deriveInfo?.children.map(item => {
            return {
              ...item,
              message: item.message ? FormTools.parseMapStr(item.message) : '',
            };
          }) : [],
        };
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@media (max-width: 1023px) {
  .content {
    flex-direction: column !important;
  }
}

.RCSbox {
  width: 100%;
  height: 100%;
  display: flex;

  &.main {
    flex-direction: column;

    .content {
      margin-top: 4px;
      display: flex;
      flex-direction: row;
    }
  }
}
</style>
