<template>
  <div class="learn-detail-content">
    <div class="page-wrapper">
      <van-search
        v-model="searchVal"
        shape="round"
        right-icon="search"
        left-icon
        placeholder="请输入搜索关键词"
      />
      <div class="detail-body">
        <van-swipe-cell v-for="(item,index) in list" :key="index" :stop-propagation="true">
          <van-card :title="item.title" :thumb="item.image" @click="goDetail(item)"/>
          <template #right>
            <van-button
              @click="optFn(item)"
              square
              :text="active?'启用':'删除'"
              type="danger"
              :class="{'delete-button':active===0,'enable-button':active===1}"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["active"],
  data() {
    return {
      searchVal:"",
      list: [
        { image: "https://img01.yzcdn.cn/vant/cat.jpeg", title: "学习内容1" },
        { image: "https://img01.yzcdn.cn/vant/cat.jpeg", title: "学习内容2" },
        { image: "https://img01.yzcdn.cn/vant/cat.jpeg", title: "学习内容3" },
        { image: "https://img01.yzcdn.cn/vant/cat.jpeg", title: "学习内容4" }
      ]
    };
  },
  mounted() {},
  methods: {
    optFn(item) {
      if (this.active === 1) {
        console.log("启用", item);
      } else {
        console.log("删除", item);
      }
    },
    goDetail(item) {
      console.log('12121',item);
      this.$router.push({path:'/learnDetail',query:{id:item.title}})
    }
  }
};
</script>

<style lang="scss" scoped>
.learn-detail-content {
  height: calc(100% - 150px);
  overflow-y: auto;
  .van-search {
    padding: 20px 0;
    .van-cell {
      line-height: 30px;
    }
  }
  /deep/.van-field__right-icon {
    color: #ac9374;
    .van-icon {
      font-size: 20px;
    }
  }
  .delete-button {
    height: 100%;
    background: #a4151d;
    font-size: 16px;
  }
  .enable-button {
    height: 100%;
    background: #6bc20b;
    font-size: 16px;
  }
  .van-button--danger {
    border: none;
  }
  .van-card {
    padding: 16px;
    background-color: transparent;
    border-bottom: 1px solid #eee;
    .van-card__thumb {
      width: 64px;
      height: 40px;
    }
    .van-card__content {
      min-height: 40px;
      .van-card__title {
        line-height: 40px;
        font-size: 16px;
        color: #333;
      }
    }
  }
}
</style>