<template>
  <v-header title="评价列表" backgroundColor="#fff" border>
    <view class="screen_all flex">
      <view class="comment-header jCenter">
        <view class="comment-title">商品评价<text v-if="count.count &&  count.count>0">({{count.count >99?'99+':count.count}})</text></view>
        <view class="comment-tab-group row">
          <view class="comment-tab row center"
            v-for="(item,index) in tabData"
            :key="index"
            :class="{
              'comment-tab-active': active === index
            }"
                v-if="count[item.key] && count[item.key]>0"
            @click="switchActive(index)"
          >{{item.label}}<text v-if="count[item.key] && count[item.key]>0">({{count[item.key] >99?'99+':count[item.key]}})</text></view>
        </view>
      </view>
      <view class="flex-all-1 overflow">
        <flat-list
            @changeData="flatChangeData"
            background="transparent"
            :ref="base_flat_id"
            @fetch="fetch"
            loadingColor="#FF8080"
        >
          <view :style="{opacity:opacity}">
            <view class="comment-screen"
              v-for="(item,index) in base_flat_data.data"
              :key="index"
            >
              <layout-comment
                  :item="item"
                  size="big"
                  control
                  goDetail
              ></layout-comment>
            </view>

          </view>
        </flat-list>
      </view>
    </view>
  </v-header>
</template>

<script>
import vHeader from '@/components/v-header/main.vue';
import tabData from './data/data';
import flatList from '@/components/flat-list/src/main.vue';
import layoutComment from '@/layout/layout-commet/main.vue';
import mixins from './mixins';
import controlData from './data/control';
export default {
  name: "comment",
  data(){
    return{
      tabData,
      controlData,
      active:0
    }
  },
  components:{
    vHeader,
    flatList,
    layoutComment
  },
  mixins
}
</script>

<style scoped lang="scss" src="./style.scss"></style>