<!-- 套餐推广 -->
<template>
  <div class="gyq_container">
    <div class="gyq_content">
      <HeaderCard name="套餐推广" intro="下单通过用户邀请好友减免金额的方式裂变宣传套餐加购" icon="tctg" showSwitch v-model:isOpen="form.isEnable">
      </HeaderCard>
      <div class="row mt14">
        <tabHeader v-model="tabActiveIndex" :list="tabList" />
      </div>
      <div class="row mt14">
        <groupPage ref="groupPageRef" name="groupPage" key="groupPage" v-if="tabActiveIndex == 0" />
        <groupOrder name="groupOrder" key="groupOrder" v-if="tabActiveIndex == 1" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import groupPage from './components/groupPage.vue'
import groupOrder from './components/groupOrder.vue'
import { packageSwitchGet, packageSwitchPut } from '@/api/market/ware'

const groupPageRef = ref(null)

const tabActiveIndex = ref(0)
const tabList = ref([
  {
    label: '套餐列表',
    value: 0
  },
  {
    label: '订单列表',
    value: 1
  }
])

const form = ref({
  isEnable: 0
})

watch(() => form.value.isEnable, (newValue, OldValue) => {
  if (loading.value == false) {
    if (newValue == 0) {
      ElMessageBox.confirm('关闭套餐推广所有未支付的订单都将自动取消，是否确定关闭？', '注意', {
        confirmButtonText: '确认关闭',
        type: 'danger'
      }).then(() => {
        packageSwitchAjax()
      }).catch(() => {
        form.value.isEnable = 1
      })
    } else {
      packageSwitchAjax()
    }
  }
})

// 拼团商品-活动开关
async function packageSwitchAjax() {
  try {
    await packageSwitchPut({
      status: form.value.isEnable
    })
    groupPageRef.value?.packageGetAjax(1)
  } catch (error) {
    console.log(error);
  }
}

const loading = ref(true)
async function packageSwitchGetAjax() {
  try {
    loading.value = true
    const res = await packageSwitchGet()
    form.value.isEnable = res
  } catch (error) {
    console.log(error);
  }
  setTimeout(() => {
    loading.value = false
  }, 500);
}

onMounted(async () => {
  packageSwitchGetAjax()
})
</script>

<style scoped lang="scss">
.gyq_container {
  padding: 14px;

  .gyq_content {
    padding: 14px;
    background-color: #fff;
    border-radius: 8px;
  }
}

.row {
  &.mt14 {
    margin-top: 14px;
  }
}

.tips {
  margin-top: 14px;
}
</style>