<template>
  <div class="roi-param-container">
    <div class="roi-param-container-roi" v-for="(item, index) in roiParamList" :key="index">
      <div class="roi-param-container-roi-label">ROI{{ index + 1 }}</div>
      <div class="roi-param-container-roi-item">
        <div style="text-align: center">Beta</div>
        <a-input :value="item.start" style="margin: 15px 0 20px" />
        <a-input :value="item.stop" />
      </div>
    </div>
    <!-- <div class="roi-param-container-roi">
      <div class="roi-param-container-roi-label">ROI2</div>
      <div class="roi-param-container-roi-item">
        <div style="text-align: center">Beta</div>
        <a-input :value="roiParam.ROITwoStart" style="margin: 15px 0 20px" />
        <a-input :value="roiParam.ROITwoStop" />
      </div>
    </div>
    <div class="roi-param-container-roi">
      <div class="roi-param-container-roi-label">ROI3</div>
      <div class="roi-param-container-roi-item">
        <div style="text-align: center">Beta</div>
        <a-input :value="roiParam.ROIThreeStart" style="margin: 15px 0 20px" />
        <a-input :value="roiParam.ROIThreeStop" />
      </div>
    </div>
    <div class="roi-param-container-roi">
      <div class="roi-param-container-roi-label">ROI4</div>
      <div class="roi-param-container-roi-item">
        <div style="text-align: center">Beta</div>
        <a-input :value="roiParam.ROIFourStart" style="margin: 15px 0 20px" />
        <a-input :value="roiParam.ROIFourStop" />
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  props: {
    roiParamList: {
      type: Array,
      default: () => [],
    },
  },
}
</script>

<style lang="less" scoped>
.roi-param-container {
  height: 100%;
  display: flex;
  gap: 12px;
  &-roi {
    flex: 1;
    // background: #0ff;
    display: flex;
    // align-items: center;
    gap: 10px;
    &-label {
      width: 60px;
      line-height: 160px;
    }
    &--item {
      flex: 1;
    }
  }
}
</style>