<template>
  <div class="gyq_container">
    <div class="gyq_content">
      <HeaderCard name="商品拼团" intro="拼团" icon="sppt" 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 { shopInfoGet } from '@/api/coupon/index'
import groupPage from './components/groupPage.vue'
import groupOrder from './components/groupOrder.vue'
import { upShopConfig } 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(() => {
        upShopConfigAjax()
      }).catch(() => {
        form.value.isEnable = 1
      })
    } else {
      upShopConfigAjax()
    }
  }
})

// 拼团商品-活动开关
async function upShopConfigAjax() {
  try {
    await upShopConfig({
      onlineStatus: form.value.isEnable
    })
    groupPageRef.value?.getGbWarePageAjax(1)
  } catch (error) {
    console.log(error);
  }
}

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

onMounted(() => {
  getOnlineStatus()
})
</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>