<template>
  <div class="more_item derivation">
    <div class="header">{{ $t('alt.otherInfo') }}</div>
    <div
      v-if="data?.dealId"
      class="content"
    >
      <div class="head">
        <icon-font
          name="icon-down1"
          :class="'icon-down1'"
        />
        <icon-font
          name="icon-layers"
        />
        <span class="text">{{ data?.instrument }}（{{ data?.dealId }}）</span>
        <span
          v-if="false"
          class="open"
          @click="openContentInfo(0)"
        >{{ $t('alt.auditInfo') }}
          <icon-font
            name="icon-down"
            :class="'icon-down' + 'derivation_content_' + 0 + '_btn'"
          />
        </span>
      </div>
      <div class="info derivation_content_0">
        <div
          v-for="(item, index) in data?.children"
          :key="'sub_content_' + index"
          class="sub_content"
        >
          <div class="head">
            <icon-font
              name="icon-down1"
              :class="'icon-down1'"
            />
            <span class="text">{{ item?.event }}-{{ item.instrument }}（{{ item?.dealId }}）
            </span>
            <!-- <span class="status">失效</span> -->
            <span
              class="open"
              @click="openInfo(index, item)"
            >{{ $t('alt.auditInfo') }}
              <icon-font
                name="icon-down"
                :class="'icon-down ' + 'derivation_sub_content_' + index + '_btn'"
              />
            </span>
          </div>
          <div 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>
            <div :class="'extension derivation_sub_content_' + index">
              <div
                v-for="(infoItem, infoIndex) in auditInfos[index]"
                :key="'info_item_' + index + '_' + infoIndex"
                class="ext_container"
              >
                <div class="ext_head">{{ $t(infoItem?.event) }}</div>
                <div
                  v-if="infoItem?.children && infoItem?.children.length > 0"
                  class="ext_detail"
                >
                  <div :class="{'line': true, 'default': true, 'first': true}" />
                  <div class="point" />
                  <div
                    v-for="(sInfoItem, sInfoIndex) in infoItem?.children"
                    :key="'s_info_item_' + index + '_' + infoIndex + '_' + sInfoIndex"
                    class="detail_item"
                  >
                    <div class="item_title">{{ $t(sInfoItem.message) }}</div>
                    <div class="item_desc">{{ sInfoItem == 0 ? '完成' : '未完成' }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getQueryAuditInfo } from '@/api/dcsApi';
export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    product: {
      type: String,
      default: '',
    },
    instrument: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      auditInfos: [],
    };
  },
  watch: {
    data(newVal) {
      if (newVal?.children) {
        this.auditInfos = new Array(newVal?.children.length).fill([]);
      }
    },
  },
  methods: {
    openContentInfo(index) {
      this.toggleHeightWithAnimation('.derivation_content_' + index);
    },
    async openInfo(index, item) {
      const param = { 'queryParam.rcsSerialNo': item.dealId, 'queryParam.dealId': item.dealId, 'queryParam.product': this.product, 'queryParam.instrument': this.instrument };
      await this.getAuditInfo(param, index);
      this.toggleHeightWithAnimation('.derivation_sub_content_' + 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');
    },
    async getAuditInfo(param, index) {
      if (this.auditInfos[index].length > 0) {
        return;
      }

      const data = await getQueryAuditInfo(param);
      if (data?.success) {
        const { auditInfo } = data.data.result;
        this.auditInfos.splice(index, 1, auditInfo);
      }
      return;
    },
  },
};
</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.derivation {
  .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 {
    padding-left: 32px;
    position: relative;

    .head {
      position: relative;

      .icon-down1 {
        position: absolute;
        left: -20px;
        top: 3px;
      }
      .text {
        padding-left: 4px;
        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 {
      padding: 6px;
      margin-top: 12px;
      border: 1px solid var(--application-color-7);

      .sub_content {
        margin-left: 20px;
        position: relative;
        border-left: 1px solid var(--application-color-8);

        .head {
          padding-left: 12px;
          position: relative;

          .icon-down1 {
            position: absolute;
            left: -8px;
            top: 50%;
            transform: translateY(-50%);
          }

          .text {
            font-size: 12px;
            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: none;
          padding: 12px;

          .base {
            padding: 8px;
            background-color: var(--primary-color-3);
            display: flex;
            flex-wrap: wrap;
            border-radius: 4px;

            .base_item {
              padding: 8px 8px;
              display: flex;
              flex-direction: row;

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

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

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

          .extension {
            height: 0;
            overflow: hidden;
            transition: height 0.5s;
            background-color: var(--primary-color-3);
            padding: 0px 16px 0px 16px;
            .ext_container {
              &:first-child {
                .ext_head {
                  border-top: 1px solid var(--application-color-7);
                }
              }
            }

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

            .ext_detail {
              margin-top: 2px;
              font-size: 12px;
              display: flex;
              flex-wrap: wrap;
              padding: 6px 12px;
              position: relative;
              .line {
                z-index: 0;
                position: absolute;
                &.default {
                  width: 1px;
                  height: 100%;
                  left: 6px;
                  top: 50%;
                  transform: translateY(-50%);
                  border-left: 1px dashed var(--primary-color-1);
                }
                &.first {
                  top: calc(50% + 8px);
                  height: calc(50% - 8px);
                }
                &.last {
                  top: 0px;
                }
              }
              .point {
                z-index: 2;
                position: absolute;
                left: 3px;
                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>
