<script lang='ts' setup>
const quotationModalVisible = ref<boolean>(false)
const rfqId = ref<any>('')
const rfqsRef = ref<any>(null)
function onDetail(id: any) {
  rfqId.value = id
  quotationModalVisible.value = true
}
function addRFQs() {
  rfqId.value = ''
  quotationModalVisible.value = true
}
function updateRFQsList() {
  rfqsRef.value.getTableList()
}
</script>

<template>
  <div>
    <div class="flex justify-between items-center bg-#FAFAFA mb-20px">
      <div class="py-18px px-24px  b-rd-10px text-#000 text-20px fw-500">
        Wish Orders
      </div>
      <el-button class="!bg-#C58C64 !text-#fff  !w-176px !h-48px  !fw-500 !b-rd-8px" @click="addRFQs">
        Post an RFQ
      </el-button>
    </div>
    <business-account-rfqs ref="rfqsRef" @open-model="onDetail" />
    <business-account-rfqs-quotation-modal v-if="quotationModalVisible" v-model:visible="quotationModalVisible" :rfq-id="rfqId" @update:data="updateRFQsList" />
  </div>
</template>

<style lang='less' scoped>
.favorite-tabs {
    background-color: #FAFAFA;
    border-radius: 10px;
    padding: 20px;
    padding-top: 0px;

    ::v-deep(.el-tabs__header) {
        .el-tabs__item {
            color: #333;

            &.is-active {
                color: #C58C64 !important;
            }
        }

        .el-tabs__active-bar {
            background-color: #C58C64 !important;
        }
    }
}
</style>
