<template>
  <view class="tutorial-list">
    <view class="tutorial-list-head">
      <view class="tutorial-list-head-matter">
        <view class="tutorial-list-head-matter_cot">
          <x-icon style="height: 16px;"
                  name="icon-search"
                  size="14"
                  color="#80878c"></x-icon>
          <input v-model="searchValue"
                 @input="search"
                 class="tutorial-list-head-matter_cot_input"
                 placeholder="搜索" />
        </view>
      </view>
    </view>
    <view style="height: 110rpx;"></view>
    <view class="tutorial-list_apply">
      <view class="tutorial-list_apply-ali"
            v-for="(aItem,aIndex) in viewModel"
            :key="aIndex"
            @click="to('/admin/tutorial/show?id='+aItem.id)">
        <text class="tutorial-list_apply-ali-p1">{{aItem.title}}</text>
        <text class="tutorial-list_apply-ali-p2">{{aItem.createTime}}</text>
      </view>
    </view>
  </view>
</template>
<script>
import ala from '@/service/ala'
import mixin from '@/service/mixins'
export default {
  mixins: [mixin],
  data () {
    return {
      value: '',
      viewModel: null,
      searchModel: null,
      searchValue: ''
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      var repones = await ala.diyHttpGet('Api/Tutorial/QueryList')
      this.searchModel = repones
      this.viewModel = repones
    },
    async search () {
      var arr = []
      if (this.searchValue) {
        this.searchModel.forEach((res) => {
          if (res.title.indexOf(this.searchValue) > -1 || res.id.indexOf(this.searchValue) > -1 || res.intro.indexOf(this.searchValue) > -1) {
            arr.push(res)
          }
        })
      } else {
        arr = this.searchModel
      }
      this.viewModel = arr
    }
  }
}
</script>
<style lang="scss">
@import "./var.scss";
</style>