<!--  -->
<template>
  <div class="optimize">
    <!-- 专家介绍 -->
    <div class="expert-box">
      <van-swipe indicator-color="white">
        <van-swipe-item v-for="(item, index) in expertImages" :key="index">
          <img v-lazy="item.cover" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 心理急救包 -->
    <div class="parenting">
      <div class="title">
        <p>心理急救包</p>
        <a>查看更多</a>
      </div>
      <ul>
        <li>
          <img src="@/assets/optimize/images/3_20.png" alt="拖延症" />
          <p>拖延症</p>
          <span>L1入门 12分钟</span>
        </li>
        <li>
          <img src="@/assets/optimize/images/3_22.png" alt="沉迷网络" />
          <p>沉迷网络</p>
          <span>L1入门 40分钟</span>
        </li>
        <li>
          <img src="@/assets/optimize/images/3_24.png" alt="不自信" />
          <p>不自信</p>
          <span>L1入门 25分钟</span>
        </li>
      </ul>
    </div>
    <!-- 训练营 -->
    <div class="train">
      <div class="title">
        <p>训练营</p>
      </div>
      <div class="main">
        <ul>
          <li v-for="(item, index) in campList" :key="index" @click="goTrainingcamp(item)">
            <div class="left">
              <p>{{ item.name }}</p>
              <span>{{ item.summary }}</span>
              <div>
                <h5>会员价 ¥{{ item.vipPrice }}</h5>
                <s>¥{{ item.price }}</s>
              </div>
            </div>
            <img src="@/assets/today/images/2_42.png" />
          </li>
        </ul>
      </div>
    </div>
    <!-- 专家咨询 -->
    <div class="psychology">
      <div class="title">
        <p>专家咨询</p>
      </div>
      <div class="select">
        <ul>
          <li>
            <img src="@/assets/optimize/icons/3_55.png" alt="" />
          </li>
          <li>
            <img src="@/assets/optimize/icons/3_58.png" alt="" />
          </li>
          <li>
            <img src="@/assets/optimize/icons/3_62.png" alt="" />
          </li>
          <li>
            <img src="@/assets/optimize/icons/3_66.png" alt="" />
          </li>
          <li>
            <img src="@/assets/optimize/icons/3_55.png" alt="" />
          </li>
          <li>
            <img src="@/assets/optimize/icons/3_58.png" alt="" />
          </li>
          <li>
            <img src="@/assets/optimize/icons/3_62.png" alt="" />
          </li>
          <li>
            <img src="@/assets/optimize/icons/3_66.png" alt="" />
          </li>
        </ul>
      </div>
      <div class="main">
        <div class="top">
          <p>黛建松</p>
          <span>清华大学心理学教授</span>
          <div class="avatar">
            <img src="@/assets/optimize/images/3_48.png" alt="" />
          </div>

        </div>
        <div class="bottom">
          <h4>700人次<span>咨询</span>，<span>从业</span>8年</h4>
          <ul>
            <li>焦虑</li>
            <li>抑郁</li>
            <li>儿童心理</li>
            <li>亲子关系</li>
            <li>青春期心理</li>
            <li>家庭关系</li>
            <li>压力管理</li>
          </ul>
          <div class="vip-tips">
            <div class="vip-text">
              <!-- <img src="@/assets/optimize/icons/location.png" alt="" /> -->
              <span>会员免费</span>
            </div>
            <div class="price-strike">
              <span>¥2480</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部导航 -->
    <TabBar />
  </div>
</template>

<script>
import Vue from 'vue';
import TabBar from '@/components/TabBar';
import { Swipe, SwipeItem, Lazyload } from 'vant';
import APIOptimize from '@/api/optimize';
Vue.use(Lazyload);
Vue.use(Lazyload, {
  lazyComponent: true
});
export default {
  components: {
    TabBar,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Lazyload.name]: Lazyload
  },
  data() {
    return {
      expertImages: [

      ],
      campList: []
    };
  },
  created() { },
  mounted() {
    this.$nextTick(() => {
      this.getBanner();
      this.getCampList();
    })
  },
  methods: {
    getCampList() {

      APIOptimize.getCampList().then(res => {
        console.log("训练营列表", res);
        let data = res.data.data;
        this.campList = data;
        console.log("this.campList", this.campList);
      })
    },
    goExperts(id) {
      this.$router.push({
        name: 'experts',
        query: {
          id: id
        }
      });
    },
    goTrainingcamp(item) {
      this.$store.commit('campId', item.id);
      this.$router.push({
        name: 'trainingcamp',
        query: {
          id: item.id
        }
      });
    },
    getBanner() {
      APIOptimize.getBanner().then(res => {
        console.log("轮播图", res);
        let data = res.data.data;
        this.expertImages = data;
        console.log("this.expertImages", this.expertImages);
      })
    }
  }
};
</script>
<style scoped lang="scss">
@import './scss/index.scss';
</style>
