<template>
  <div class="more_item trading">
    <div class="header">交易信息</div>
    <div
      v-for="(item, index) in data?.timelineInfo"
      :key="'trading_' + index"
      class="content"
    >
      <div :class="{'point': true, 'default': true, 'date': item?.viewNowDateFlag}" />
      <div :class="{'block': true, 'default': true, 'first': index == 0, 'last': index + 1 == data?.timelineInfo.length }" />
      <div class="head">
        <span class="text">{{ item?.date }} {{ item?.event }}</span>
        <span
          v-if="extensionOpen"
          class="open"
          @click="openInfo(index)"
        >{{ $t('alt.auditInfo') }}
          <icon-font
            name="icon-down"
            :class="'icon-down ' + 'trading_extension_' + index + '_btn'"
          />
        </span>
      </div>
      <div
        v-if="item?.message"
        class="info"
      >
        <div class="base">
          <div
            v-for="(value, key) of item?.message"
            :key="value"
            class="base_item"
          >
            <div class="left">{{ $t(key) }}</div>
            <div class="right">{{ value }}</div>
          </div>
        </div>
        <!-- TODO 交易生命周期不存在中台审批列表，而 eflow 存在。等待后期改造 -->
        <div
          v-if="extensionOpen"
          :class="'extension ' + 'trading_extension_' + index"
        >
          <div class="ext_head border_bottom_line">{{ $t('info.dcs.centerAudit') }}</div>
          <div class="ext_detail">
            <div class="detail_item">
              <div class="item_title">发起人</div>
              <div class="item_desc">wxx</div>
            </div>
            <div class="detail_item">
              <div class="item_title">操作日期</div>
              <div class="item_desc">2025-05-15 09:34:23</div>
            </div>
            <div class="detail_item">
              <div class="item_title">审批状态</div>
              <div class="item_desc">审批退回</div>
            </div>
          </div>
          <div class="ext_detail">
            <div class="detail_item">
              <div class="item_title">发起人</div>
              <div class="item_desc">wxx</div>
            </div>
            <div class="detail_item">
              <div class="item_title">操作日期</div>
              <div class="item_desc">2025-05-15 09:34:23</div>
            </div>
            <div class="detail_item">
              <div class="item_title">审批状态</div>
              <div class="item_desc">生效</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      extensionOpen: false,
    };
  },
  watch: {

  },
  methods: {
    openInfo(index) {
      this.toggleHeightWithAnimation('.trading_extension_' + index);
    },
    toggleBtn(id, animation) {
      const btn = document.querySelector(id + '_btn');
      if (animation == 'up') {
        btn.classList.add('up');
      } else {
        btn.classList.remove('up');
      }
    },
    toggleHeightWithAnimation(id) {
      const box = document.querySelector(id);
      let height = box.style.height;
      if (height) {
        if (Number(height.replace(/px/, '')) > 0) {
          box.style.transition = '0.5s';
          box.style.height = 0 + 'px';
          this.toggleBtn(id, 'down');
          return;
        }
      }
      // 设置高度为 auto（通常这是默认值，但可以明确设置）
      box.style.height = 'auto';

      // 动态获取高度
      height = box.offsetHeight;
      box.style.height = 0;

      // 触发 reflow
      box.clientHeight;

      box.style.transition = '0.5s';
      box.style.height = height + 'px';
      this.toggleBtn(id, 'up');
    },
  },
};
</script>
<style lang="scss" scoped>
.more_item {
  flex: 1;
  padding: 16px;
  background-color: var(--bg-color-main-2);
  border-radius: 4px;

  &:not(:first-child) {
    margin-left: 4px;
  }
}

.more_item.trading {
  .header {
    padding: 5px 11px;
    margin-bottom: 5px;
    position: relative;

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

  .content {
    border-left: 1px dashed var(--primary-color-1);
    padding-bottom: 16px;
    padding-left: 20px;
    position: relative;

    .point {
      z-index: 1;
      &.default {
        position: absolute;
        left: -8px;
        top: 4px;
        width: 16px;
        height: 16px;
        background-color: var(--primary-color-1);
        border-radius: 50%;
        border: 4px solid;
        border-color: var(--primary-color-3);
        background-clip: padding-box;
      }
      &.date {
        position: absolute;
        left: -8px;
        top: 4px;
        width: 16px;
        height: 16px;
        background-color: var(--application-color-7);
        border-radius: 50%;
        border: 4px solid;
        border-color: var(--primary-color-3);
        background-clip: padding-box;
      }
    }

    .block {
      z-index: 0;
      &.default {
        position: absolute;
        left: -8px;
        top: 4px;
        width: 16px;
        height: 16px;
        background-color: var(--bg-color-main-2);
      }
      &.first {
        position: absolute;
        left: -8px;
        top: 0px;
        width: 16px;
        height: 22px;
        background-color: var(--bg-color-main-2);
      }
      &.last {
        position: absolute;
        left: -8px;
        top: 0px;
        width: 16px;
        height: 100%;
        background-color: var(--bg-color-main-2);
      }
    }

    .head {
      .text {
        font-size: 14px;
        color: var(--application-color-1);
      }

      .open {
        padding-left: 8px;
        font-size: 12px;
        position: relative;
        color: var(--primary-color-1);
      }
      .icon-down {
        color: var(--primary-color-1);
        transition: all 0.3s;
        transform: rotate(-90deg);
        &.down {

        }
        &.up {
          transform: rotate(0deg);
        }
      }
    }

    .info {
      margin-top: 12px;
      width: 100%;
      border-radius: 4px;
      border: 1px solid var(--application-color-7);
      padding: 12px;

      .base {
        padding-bottom: 8px;
        display: flex;
        flex-wrap: wrap;

        .base_item {
          padding: 8px 8px;
          width: 33%;
          display: flex;

          .left {
            width: 90px;
            text-align: left;
            color: var(--application-color-3);
            font-size: 12px;
          }

          .right {
            flex: 1;
            text-align: left;
            color: var(--application-color-2);
            font-size: 12px;
          }
        }
      }

      .extension {
        height: 0;
        overflow: hidden;
        transition: height 0.5s;

        .ext_head {
          padding: 8px;
          font-size: 12px;
          color: var(--application-color-2);

          &.border_bottom_line {
            border-top: 1px solid var(--application-color-7);
          }
        }

        .ext_detail {
          font-size: 12px;
          display: flex;
          flex-wrap: wrap;
          padding: 6px 12px;
          border-left: 1px dashed var(--primary-color-1);
          position: relative;

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

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

            &:not(:first-child) {
              padding-left: 16px;
            }

            .item_title {
              color: var(--application-color-3);

              &::after {
                content: ":";
              }
            }

            .item_desc {
              padding-left: 6px;
              color: var(--application-color-2);
            }
          }
        }
      }
    }
  }
}
</style>
