<template>
  <div class="page-content">
    <van-list class="pt-10">
      <van-cell v-for="item in subscriptionList" :key="item.id" :title="item.subscriptionItemName">
        <template #value>
          <van-switch size="16" :disabled="item.disabled" v-model="item.isSubscription" @change="changeSub(item)" />
        </template>
      </van-cell>
    </van-list>
  </div>
</template>
<script setup lang="ts">
import { getSubscriptionList, delSubscription, saveSubscription } from '@/utils/api'
import { ref } from 'vue'
const subscriptionList = ref()
const getSubList = async () => {
  const { data } = await getSubscriptionList()
  subscriptionList.value = data.map((item: any) => {
    return {
      ...item,
      disabled: false,
      isSubscription: !!item.userId
    }
  })
}
getSubList()
const changeSub = async (item: any) => {
  item.disabled = true
  if (!item.isSubscription) {
    await delSubscription(item.id)
  } else {
    await saveSubscription(item.subscriptionItem)
  }
  await getSubList()
  item.disabled = false
}
</script>

<style lang="scss" scoped>
.pt-10 {
  padding-top: 10px;
}

.van-cell {
  margin: 12px 16px 0;
  width: calc(100vw - 32px);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  @media screen and (min-width: 678px) {
    width: 646px;
  }
}
</style>