<template>
  <div class="Right_box">
    <div class="foldbox">
      <div
        class="header"
        @click="handleModalChange(0)"
      >
        <div class="header-icon">
          <icon-font
            name="icon-account"
            size="11"
          />
        </div>
        <div class="header-title">现金流预算</div>
        <div class="header-rotate">
          <i
            v-if="!isOpen0"
            class="el-icon-arrow-right"
          />
          <i
            v-if="isOpen0"
            class="el-icon-arrow-down"
          />
        </div>
      </div>
      <div
        v-if="isOpen0"
        class="content"
      />
      <CashPreview v-show="isOpen0" />
    </div>

    <div class="foldbox">
      <div
        class="header"
        @click="handleModalChange(1)"
      >
        <div class="header-icon">
          <icon-font
            name="icon-operational-risk"
            size="11"
          />
        </div>
        <div class="header-title">操作风险检查</div>
        <div class="header-rotate">
          <i
            v-if="!isOpen1"
            class="el-icon-arrow-right"
          />
          <i
            v-if="isOpen1"
            class="el-icon-arrow-down"
          />
        </div>
      </div>
      <div
        v-if="isOpen1"
        class="content"
      />
      <Operate v-show="isOpen1" />
    </div>

    <div class="foldbox">
      <div
        class="header"
        @click="handleModalChange(2)"
      >
        <div class="header-icon">
          <icon-font
            name="icon-credit-risk"
            size="11"
          />
        </div>
        <div class="header-title">信用风险检查</div>
        <div class="header-rotate">
          <i
            v-if="!isOpen2"
            class="el-icon-arrow-right"
          />
          <i
            v-if="isOpen2"
            class="el-icon-arrow-down"
          />
        </div>
      </div>
      <div
        v-if="isOpen2"
        class="content"
      />
      <Credit v-show="isOpen2" />
    </div>

    <div class="foldbox">
      <div
        class="header"
        @click="handleModalChange(3)"
      >
        <div class="header-icon">
          <icon-font
            name="icon-market-risk"
            size="11"
          />
        </div>
        <div class="header-title">市场风险检查</div>
        <div class="header-rotate">
          <i
            v-if="!isOpen3"
            class="el-icon-arrow-right"
          />
          <i
            v-if="isOpen3"
            class="el-icon-arrow-down"
          />
        </div>
      </div>
      <div
        v-if="isOpen3"
        class="content"
      />
      <Market v-show="isOpen3" />
    </div>
  </div>
</template>

<script>
import CashPreview from '../component/cashFlowBudgetPreview.vue'; // 现金流预览
// import Cash from '../component/cashFlowBudget.vue'; // 现金流
import Operate from '../component/operaterisk.vue';
import Credit from '../component/creditsrisk.vue';
import Market from '../component/marketrisk.vue';

export default {
  components: {
    CashPreview,
    Operate,
    Credit,
    Market,
  },
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      isOpen0: false,
      isOpen1: false,
      isOpen2: false,
      isOpen3: false,
    };
  },
  watch: {
    value(nVal) {
      this.handleModalOpen(nVal);
    },
  },
  methods: {
    // 中间按钮传入事件
    handleModalOpen(nVal) {
      for (let index = 0; index <= 3; index++) {
        this[`isOpen${nVal}`] = true;
        if (index !== nVal) {
          this[`isOpen${index}`] = false;
        }
      }
    },
    // 当前栏点击事件
    handleModalChange(num) {
      this.$emit('handleModal', num);
    },
  },
};
</script>

<style lang="scss" scoped>
.Right_box {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  .foldbox {
  margin-bottom: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 4px;
  background-color: var(--desktop-bg-color-1);
}
.header {
  display: flex;
  width: 100%;
  font-weight: 800;
  align-items: center;
  height: 24px;
  .header-icon {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: var(--desktop-bg-color-1);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header-title {
    margin-left: 8px;
    font-size: 14px;
  }
  .header-rotate {
    margin-left: 14px;
  }
}
.content {
  margin-top: 10px;
  padding-top: 7px;
  width: 100%;
  border-top: 1px solid var(--card-border);
}
.fade-enter-active {
  transition: opacity 2s ease, height 2s ease;
}
.fade-leave-active {
  transition: opacity 0s, height 0s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
}
</style>
