<template>
  <div class="layout-page layout-page_a" :style="themeStyle">
    <v-header :title="$t('help.a3')"></v-header>
    <main class="layout-main">
			<view class="d-flex" style="justify-content: space-between;">
				<view v-for="(item1,index1) in list" :key="index1" @click="tab = index1"
				 style="text-align: center;padding: 20px 0px 0px;">
					<image :src="'../../static/img/help/'+(+index1+1)+'.png'" mode="" style="width: 12vw;height: 12vw;"></image>
					<view class="">{{item1.name}}</view>
				</view>
			</view>
			<view class="">
				<view class="" style="font-size: 20px;font-weight: bold;padding: 20px 0px 20px 15px;">{{$t("ybgcoins3.a9")}}</view>
				<view v-for="(parentItem,index2) in list" :key="index2" v-if="tab==index2">
					<v-link
					  tag="div"
					  :to="{path:'/pages/help/sort',query:{id:parentItem.id,title:parentItem.name}}"
					  class="p-md fn-20 "
					  :key="parentItem.id"
					>{{parentItem.name}}</v-link>
					<div class="m-x-md m-b-md p-md rounded box-shadow" :key="parentItem.id+'s'"
					style="background-color: #f5f5f5;">
						<block v-for="item2 in parentItem.article":key="item2.id">
							<v-link
							  tag="div"
							  :to="{path:'/pages/help/detail',query:{id:item2.id}}"
							  class="item border-b d-flex justify-between"
								style="align-items: center;padding: 10px 0px 20px;"
							>
								<img :src="item2.full_cover" style="width: 16vw;height: 12vw;border-radius: 8px;" />
							  <div class="eps-1" style="flex: 1;margin: 0 10px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">{{item2.title}}</div>
							  <van-icon name="arrow" />
							</v-link>
						</block>
					</div>
					<!-- <div class="m-x-md m-b-md p-md rounded box-shadow" :key="parentItem.id+'s'"
					style="background-color: #f5f5f5;">
					  <v-link
					    tag="div"
					    :to="{path:'/pages/help/detail',query:{id:item2.id}}"
					    class="item p-y-xs border-b d-flex justify-between"
					    v-for="item2 in parentItem.article"
					    :key="item2.id"
					  >
					    <div class="eps-1">{{item2.title}}</div>
					    <van-icon name="arrow" />
					  </v-link>
					</div> -->
				</view>
			</view>
      
    </main>
  </div>
</template>
<script>
import College from "@/api/college";
import {mapGetters} from 'vuex'
export default {
  name: "help",
  data() {
    return {
      list: [],
			tab: 0,
    };
  },
  computed: {
    ...mapGetters(['themeStyle'])
  },
  methods: {
    college() {
			// let lang = uni.getStorageSync('language')=='zh-CN'?'zh-CN':'en';
			let lang = uni.getStorageSync('language');
			let data={
					lang:lang
			};
      College.college(data).then((res) => {
        // this.list = res.data.categoryList;
				// 对象转数组
				for(let i in res.data.categoryList){
					// console.log(i, 11111)
					this.list.push(res.data.categoryList[i])
				}
      });
    },
  },
  created() {
    this.college();
  },
};
</script>
<style lang="scss" scoped>
	.layout-page_a{
		display: flex;
		flex-direction: column;
		color: #333 !important;
		background-color: #fff !important;
	}
	.layout-main{
		color: #333 !important;
		background-color: #fff !important;
	}
	/deep/ .van-nav-bar__left .van-nav-bar__arrow{
		color: #000;
	}
	/deep/ .van-nav-bar__title{
		color: #000;
	}
</style>