<template>
  <div class="af-plan-list-container">
    <!--头部-->
    <div class="header">
      <div class="store-name">
        <p>
          <img src="./image/icon_music@2x.png" alt="">
          <span>{{ objCurrentBarInfo.bar_name }}</span>
        </p>
      </div>
    </div>
    <!--预约日期-->
    <van-tabs
      class="af-van-tab"
      :background="'transparent'"
      :ellipsis="false"
      :sticky="true"
      v-model="active"
      @change="handleChange"
      ref="afTabs">
      <van-tab
        v-for="(item, index) in showPlanList"
        :key="index">
        <template #title>
          <p class="week">{{ item.week }}</p>
          <p class="date">{{ item.time }}</p>
        </template>
        <div class="plan-list"
             v-for="(plan, idx) in item.list"
             :key="idx">
          <div class="left">
            <div class="avatar">
              <img :src="plan.plan_head_url" alt="">
            </div>
            <p class="name">
              <span>{{ plan.plan_author_name }}</span>
              <span>{{ plan.plan_desc }}</span>
            </p>
          </div>
          <div class="right">
            <p>{{ plan.plan_start_time }}-{{ plan.plan_end_time }}</p>
          </div>
        </div>
        <p class="btimap" v-if="booFetch && !item.list.length">暂无数据</p>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Tabs, Tab, Toast } from 'vant'
import { apiShowPlanList } from './api'
import { getCookieValue } from '../../../utils'

export default {
  name: 'index',
  components: {
    'van-tabs': Tabs,
    'van-tab': Tab
  },
  data () {
    return {
      showPlanList: [],
      active: 0,
      listData: [],
      bar_id: '',
      booFetch: false
    }
  },
  computed: {
    ...mapGetters({
      objCurrentBarInfo: 'common/objCurrentBarInfo'
    }),
    phone () {
      return this.$store.getters['common/phone'] || getCookieValue('afhousephone')
    },
    token () {
      return this.$store.getters['common/token'] || getCookieValue('afhousetoken')
    }
  },
  watch: {
    'objCurrentBarInfo.id': {
      immediate: true,
      handler: function () {
        this.fetchShowPlanList()
      }
    }
  },
  async mounted () {
    await this.$nextTick()
  },
  methods: {
    handleChange () {},
    async fetchShowPlanList () {
      const { id } = this.objCurrentBarInfo
      if (!id) {
        return
      }
      try {
        const { data, status, msg } = await apiShowPlanList(id)
        if (status) {
          this.showPlanList = data
        } else {
          Toast(msg)
        }
        this.booFetch = true
      } catch (err) {
        this.booFetch = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./style/index";
</style>
