import { showToast } from './toast.js'

// 接口api域名
import { host } from './url.js'

// 获取列表元素
const elementUl = document.querySelector('.combo-list')

const setLiElement = item => {
  const {comboDuration, comboPrice, comboName} = item
  const li = document.createElement('li')
  li.setAttribute('class', `combo-list-item combo-${item.orderId}`)
  li.innerHTML = `
    <p class="flex" data-id="${item.orderId}">
      <span class="combo-item-label" data-id="${item.orderId}">名称：</span>
      <span class="combo-item-content" data-id="${item.orderId}">${comboName}</span>
    </p>
    <p class="flex" data-id="${item.orderId}">
      <span class="combo-item-label" data-id="${item.orderId}">时长：</span>
      <span class="combo-item-content" data-id="${item.orderId}">${comboDuration} 分钟</span>
    </p>
    <p class="flex" data-id="${item.orderId}">
      <span class="combo-item-label" data-id="${item.orderId}">价格：</span>
      <span class="combo-item-content" data-id="${item.orderId}">${comboPrice} 元</span>
    </p>
  `
  elementUl.appendChild(li)
}

let activeCombo = ''
// 添加列表点击事件
elementUl.addEventListener('click', event => {
  const id = event.target.dataset.id
  if (!id) {
    return;
  }
  activeCombo = id
  updateCurrentCombo(id)
})

// 更新样式
const updateCurrentCombo = (id) => {
  document.querySelector('.combo-list-item.active')?.classList.remove('active')
  document.querySelector(`.combo-${id}`).classList.add('active')
}

// 点击去使用
document.querySelector('.go-use-btn').addEventListener('click', async () => {
  if (!activeCombo) {
    return window.$toast('请选择套餐')
  }
  if (window.confirm('使用后该套餐将失效，请您确认')) {
    try {
      const res = await (await fetch(`../h5/writeOff?orderId=${activeCombo}`, {
        headers: {
          token: sessionStorage.getItem('token')
        }
      })).json()
      const { code, message } = res
      if (code !== 200) {
        return showToast(message)
      }
      window.location.href = 'https://www.peaktcm.com/open-miniprogram.html'
    } catch (error) {
      console.log(error)
    }
  }
})

// 获取页面数据
const getCombosData = async () => {
  JSON.parse(sessionStorage.getItem('combo-list')).forEach((item, index) => setLiElement(item, index))
}
getCombosData()