<template>
  <div>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="关联销售合同" name="1">
        <div class="item">
          <div>合同编号：</div>
          <div>下单日期：</div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-collapse
      v-model="activeNamesOne"
      @change="handleChange"
      style="margin-top: 10px"
    >
      <el-collapse-item title="供应商最近采购" name="1">
        <div class="item">
          <div>合同编号：</div>
          <div>下单日期：</div>
          <div>合同金额：</div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-collapse
      v-model="activeNamesTwo"
      @change="handleChange"
      style="margin-top: 10px"
    >
      <el-collapse-item title="产品价格" name="1">
        <div class="item">
          <div>产品名称：</div>
          <div>最近价格：</div>
          <div>历史最高：</div>
          <div>历史最低：</div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
const activeNames = ref("1");
const activeNamesOne = ref("1");
const activeNamesTwo = ref("1");

const handleChange = () => {};
</script>

<style lang="scss" scoped>
.item {
  margin-bottom: 10px;
  background-color: #f1f1f1;
  padding: 5px 10px;
  div {
    color: #999999;
  }
}
.el-collapse-item {
  border: 1px solid #d7d7d7;
  padding: 0px 10px;
}
:deep(.el-collapse-item__content) {
  padding-bottom: 5px;
}
</style>