<template>
  <div class="step3-container">
    <div class="content-wrapper">
      <el-tabs v-model="activeTab" tab-position="left" class="left-tabs">
        <el-tab-pane label="付款条件" name="pay">
          <div class="editor-container">
            <el-input
              type="textarea"
              :rows="10"
              v-model="form.pay"
              placeholder="请输入付款条件"
            />
          </div>
        </el-tab-pane>

        <el-tab-pane label="异议" name="objection">
          <div class="editor-container">
            <el-input
              type="textarea"
              :rows="10"
              v-model="form.objection"
              placeholder="请输入异议信息"
            />
          </div>
        </el-tab-pane>

        <el-tab-pane label="不可抗力" name="force">
          <div class="editor-container">
            <el-input
              type="textarea"
              :rows="10"
              v-model="form.force"
              placeholder="请输入不可抗力信息"
            />
          </div>
        </el-tab-pane>

        <el-tab-pane label="争议解决" name="dispute">
          <div class="editor-container">
            <el-input
              type="textarea"
              :rows="10"
              v-model="form.dispute"
              placeholder="请输入争议解决方式"
            />
          </div>
        </el-tab-pane>

        <el-tab-pane label="其他" name="other">
          <div class="editor-container">
            <el-input
              type="textarea"
              :rows="10"
              v-model="form.other"
              placeholder="请输入其他信息"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="btn-row">
      <el-button @click="$emit('prev-step')">上一步</el-button>
      <el-button type="primary" @click="$emit('next-step')">下一步</el-button>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import {
  defaultPaymentTerms,
  defaultObjectionTerms,
  defaultForceTerms,
  defaultDisputeTerms,
} from "@/data/stepMockData";

const activeTab = ref("pay");

const form = reactive({
  pay: defaultPaymentTerms,
  objection: defaultObjectionTerms,
  force: defaultForceTerms,
  dispute: defaultDisputeTerms,
  other: "",
});
</script>

<style scoped lang="scss">
.step3-container {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  height: calc(100vh - 320px);
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  flex: 1;
  overflow: hidden;
}

.left-tabs {
  height: 100%;

  :deep(.el-tabs__content) {
    height: 100%;
    padding: 20px;
  }

  :deep(.el-tabs__nav-wrap) {
    padding-right: 20px;
  }
}

.editor-container {
  height: 100%;
  padding: 0 20px;

  :deep(.el-textarea__inner) {
    height: 100%;
    min-height: 300px;
  }
}

.btn-row {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}
</style> 