<template>
  <div class="transaction_status">
    <div
      v-if="data?.dealId"
      class="header"
    >
      <span class="title">{{ data.instrument }}</span>
      <span class="code">{{ data.dealId }}</span>
      <span class="btn">
        <icon-font name="icon-doc-edit" />
      </span>
    </div>
    <div class="pancels">
      <div class="pancel">
        <div class="title">
          <icon-font name="icon-email" />
          <span>{{ $t('alt.quickInfo') }}</span>
        </div>
        <div class="pancel-details">
          <div
            v-for="(value, key) of data?.messages"
            :key="value"
            class="detail-item"
          >
            <div class="status">{{ value }}</div>
            <div class="info">{{ $t(key) }}</div>
          </div>
        </div>
      </div>
      <div class="pancel">
        <div class="title">
          <icon-font name="icon-monitor" />
          <span>{{ $t('alt.backOfficeStatus') }}</span>
        </div>
        <div class="pancel-details">
          <div
            v-for="(value, key) of data?.settleInfo"
            :key="value"
            class="detail-item"
          >
            <div :class="{'status': true, 'success': value == 0, 'warning': value == 1}">{{ value == 0 ? '完成' : '未完成' }}</div>
            <div class="info">{{ $t(key) }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TransactionStatus',
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  watch: {

  },
  methods: {

  },
};
</script>
<style lang="scss" scoped>
@media (max-width: 1023px) {
  .transaction_status {
    .pancels {
      flex-direction: column !important;

      .pancel:not(:first-child) {
        padding-top: 16px !important;
      }
    }
  }
}

@mixin point($color) {
  & {
    color: var($color);
    padding-left: 14px;
  }

  &::before {
    content: "";
    background-color: var($color);
    border-radius: 50%;
    height: 8px;
    width: 8px;
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.transaction_status {
  padding: 16px;
  background-color: var(--bg-color-main-2);
  border-radius: 4px;

  .header {
    padding: 16px;

    .title {
      font-size: 18px;
      color: var(--application-color-1);
    }

    .code {
      padding-left: 8px;
      font-size: 14px;
      color: var(--primary-color-1);
    }

    .btn {
      padding-left: 8px;
      color: var(--primary-color-1);
    }
  }

  .pancels {
    display: flex;
    flex-direction: row;

    .pancel {
      &:last-child {
        border-left: 1px solid var(--application-color-8);
      }

      padding: 0 8px;
      flex: 1;

      .title {
        display: inline-block;
        padding: 4px 8px;
        color: var(--primary-color-1);
        background-color: var(--primary-color-3);
        border-radius: 4px;

        span:last-child {
          padding-left: 8px;
          font-size: 14px;
        }
      }

      &-details {
        padding: 0px 12px 0px 12px;
        display: flex;
        flex-wrap: wrap;

        .detail-item {
          padding-top: 14px;
          width: 25%;
          display: flex;
          flex-direction: column;

          .status {
            color: var(--application-color-1);
            font-size: 18px;
            position: relative;

            &.lose {
              @include point(--application-color-4);
            }

            &.success {
              @include point(--ancillary-color-success-1);
            }

            &.warning {
              @include point(--ancillary-color-warning-1);
            }
          }

          .info {
            padding-top: 10px;
            color: var(--application-color-5);
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
