<template>
  <div class="aff_list_com">

    <van-nav-bar title="帮助中心" left-text="返回" @click-left="$route_back" left-arrow>
      <div slot="right" @click="$router.push({name: 'comment'})" style="color:#fff;">反馈</div>

    </van-nav-bar>
    <div class="aff_list_com_body_com has_header">
      <scroller ref="my_scroller" :on-refresh="refresh" :on-infinite="infinite">

        <div style="height: 0.16rem;"></div>
        <div class="aff_list_com_box">
          <div class="aff_list_item" v-for="(item,index) in list" :key="index">


            <van-collapse :border="false" v-model="item.activeNames" v-if="item.children && item.children.length > 0">
              <van-collapse-item :border="false" @click="$router.push({name:'help_detail', query:{id:item.id}})"
                                 :title="item.document_name" name="1">
                <van-cell-group>
                  <van-cell :key="child_index" v-for="(child_item,child_index) in item.children" @click="detail(child_item)" :title="child_item.document_name" is-link />
                </van-cell-group>
              </van-collapse-item>
            </van-collapse>


              <van-cell v-else @click="detail(item)" :title="item.document_name" is-link />


          </div>


        </div>
      </scroller>
    </div>
    <!-- sku -->

  </div>
</template>

<script>
  import Vue from 'vue'
  import {Lazyload} from 'vant'
  import {getToken} from '@/utils/auth'
  import moment from 'moment'
  import {Collapse, CollapseItem} from 'vant';

  Vue.use(Collapse);
  Vue.use(CollapseItem);
  Vue.use(Lazyload)
  import request from '@/utils/request'

  export default {
    data: function () {

      let sku = {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [],
        price: '0', // 默认价格（单位元）
        stock_num: 0, // 商品总库存
        collection_id: 0, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: true, // 是否无规格商品
        messages: [],
        hide_stock: false
      }

      return {
        activeNames: [],
        list_map: {},
        showCustomAction: false,
        initialSku: sku,
        sku: sku,
        goods: {title: '', picture: ''},
        list: {},
        filter: {
          page: 1,
          fliter: {}
        }
      }
    },
    created() {

      this.$nextTick(() => {
        this.$refs.my_scroller.finishInfinite(false)
      })
      if (this.$route.query.category_id > 0) {
        this.filter['category_id'] = this.$route.query.category_id
      }
    },

    filters: {
      parsePriceInt(val) {
        return Math.floor(val)
      },
      parsePriceFloat(val) {
        let arr = val.toString().split('.')
        if (arr.length > 1) {
          return '.' + arr[1]
        }
        return ''
      },
      datetime(val) {
        return moment(val * 1000).format('YYYY-MM-DD HH:mm')
      }
    },
    methods: {
      toTree(data) {
        let result = []
        if (!Array.isArray(data)) {
          return result
        }
        data.forEach(item => {
          delete item.children;
        });
        let map = {};
        data.forEach(item => {
          map[item.document_id] = item;
        });
        data.forEach(item => {
          let parent = map[item.parent_id];
          if (parent) {
            (parent.children || (parent.children = [])).push(item);
          } else {
            result.push(item);
          }
        });
        return result;
      },
      get_list(done) {
        let self = this
        request('get','/api/doc/help').then((res) => {
          done()
          let all_doc_name = []
          for (let i in res.data.data.list) {
            res.data.data.list[i]['activeNames'] = ['1']
            localStorage.setItem('help_detail'+ res.data.data.list[i].identify,  res.data.data.list[i].content)
            all_doc_name.push(res.data.data.list[i].identify)
          }
          localStorage.setItem('all_doc_name', JSON.stringify(all_doc_name))
          let list_map = {}
          self.$refs.my_scroller.finishInfinite(true)
          self.list = self.toTree(res.data.data.list)
          self.filter.page++
        })
      },
      refresh(done) {
        let self = this
        setTimeout(() => {
          this.filter.page = 1
          this.get_list(function () {
            self.list = []
            done()
          })
          // this.$refs.my_scroller.finishPullToRefresh()
        }, 100)
      },
      del(id, index) {
        request('get','/public/index.php/index/address/del',{id: id}).then((res) => {
          if (res.data.code == 1) {
            this.$toast(res.data.msg)
            this.list.splice(index, 1)
          } else {
            this.$toast(res.data.msg)
          }
        })
      },
      infinite(done) {
        this.get_list(done)
      },
      detail(item){
        this.$router.push({name:'help_detail', query: {name: item.identify}})
      }
    },

  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .aff_list_com {
    background-color: #f5f5f5;
  }

  .aff_list_com_box {
    padding: 0 0.08rem;
  }

  .aff_list_com_item_box {
    background-color: #fff;
    border-radius: 0.1rem;
    margin: 0.08rem;
    overflow: hidden;
    margin-top: 0.2rem;
    padding-bottom: 0.2rem;
  }

  .aff_list_com_item .aff_list_com_link {
    display: block;
  }

  .aff_list_com_item .aff_list_com_image {
    max-width: 100%;
  }

  .aff_list_com_text {
    padding: 0 0.16rem;
  }

  .aff_list_com_goods_name {
    line-height: 1.75;
    font-size: 0.32rem;
    font-weight: normal;
    margin: 0;
  }

  .aff_list_com_price {
    color: #ff4a39;
  }

  .aff_list_com_price .aff_list_com_char {
    font-size: 0.2rem;
    margin-right: 0.1rem;
  }

  .aff_list_com_price .aff_list_com_price_number {
    font-size: 0.32rem;
    letter-spacing: 0.03rem;
  }

  .aff_list_com_price .price_small {
    font-size: 0.2rem;
  }

  .aff_list_com_shopping_cart {
    float: right;
    font-size: 0.36rem;
    margin-top: 0.1rem;
    margin-right: 0.1rem;
  }

  .aff_list_com_body_com {
    height: calc(100vh - 1rem);
    position: relative;
  }

  .aff_list_com_body_com.has_header {
    height: calc(100vh - 0.92rem);
  }

  .aff_list_item {
    font-size: 0.32rem;
    color: #333;
    background-color: #fff;
    padding: 0.16rem;
    margin-bottom: 0.16rem;
  }
  .aff_list_com /deep/ .van-collapse-item__content{
    padding:0 0.32rem !important;
  }
  .info_name {
  }

  .info_username {
  }

  .info_level_name {
  }

  .reg_time {
    color: #999;
  }
</style>
