<!--  -->
<template>
  <div>
    <main-top :crumb="crumbData"></main-top>
    <div class="table-interface">
      <div class="top">
        <div class="top-left">
          <div class="tl-bottom" v-for="(item, i) in nums" :key="i">
            <Nums :data="item"/>
          </div>
        </div>
        <div class="top-right card">
          <p class="theme-color1">展示方案访问数</p>
          <!-- <div class="select">A馆万物墙10</div> -->
          <div class="nlt">
            <PowerBar class="n-i" v-for="(item,i) in nlt" :data='item' :key="i"/>
          </div>
        </div>
      </div>

      <div class="plate02">
        <div class="p2-left">
           <!-- <div class="p2l card">
             <p class="theme-color1" style="font-weight:bold">文物类别统计</p>
             <PieTu v-if="wwlb.data.length>0" :id="'wwlb'" :data='wwlb'/>
           </div> -->
          <div class="p2r card">
             <p class="theme-color1" style="font-weight:bold">搜索热词</p>
             <ul>
               <li class="p2top">
                 <span>文物名称</span>
                 <span>热度</span>
               </li>
               <li v-for="(item,i) in reci" :key="i">
                 <span>{{item.name}}</span>
                 <span class="theme-color1">{{item.hot}}</span>
               </li>
             </ul>
           </div>
        </div>
        <div class="p2-right card">
          <HotBang v-if="hot.length>0" :data='hot'/>
        </div>
      </div>

      <div class="plate03 card">
        <FocusBang v-if="focus.length>0" :data="focus"/>
      </div>

      <div class="plate04 card">
          <CollectionList />
      </div>

    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

import MainTop from '@/components/main-top'
import SearchBar from '@/components/search-bar'
import Nums from '@/components/nums'
import PowerBar from '@/components/power-bar'
import trend from '@/components/trend'
import HotBang from '@/components/hot-bang'
import FocusBang from '@/components/focus-bang'
import PieTu from '@/components/pie-tu'
import CollectionList from '@/components/collectionList'

const cardArr = [
  {
    name: '系统总体运行时间',
    icon: 'iconsys',
    sub1: [
      {
        bold: {
          txt: '1236',
          color: '#a09d50'
        },
        txt: '天'
      }
    ],
    sub2: [
      {
        bold: {
          txt: '18',
          color: '#a09d50'
        },
        txt: '时'
      }, {
        bold: {
          txt: '21',
          color: '#a09d50'
        },
        txt: '分'
      }, {
        bold: {
          txt: '53',
          color: '#a09d50'
        },
        txt: '秒'
      }
    ]
  },
  {
    name: '无人互动运行时间',
    icon: 'iconsys1',
    sub1: [
      {
        bold: {
          txt: '8',
          color: '#a09d50'
        },
        txt: '天'
      }
    ],
    sub2: [
      {
        bold: {
          txt: '07',
          color: '#a09d50'
        },
        txt: '时'
      }, {
        bold: {
          txt: '32',
          color: '#a09d50'
        },
        txt: '分'
      }, {
        bold: {
          txt: '36',
          color: '#a09d50'
        },
        txt: '秒'
      }
    ]
  }
]

const nums = [
  {
    name: '展示总数',
    sum: 0,
    icon: 'sys01@2x.png',
    danwei: '件'
  },
  {
    name: '文物总数',
    sum: 0,
    icon: 'sys02@2x.png',
    danwei: '件'
  },
  {
    name: '累计点赞数',
    sum: 0,
    icon: 'sys04@2x.png',
    danwei: '次'
  }
]

const nlt = [
  {
    num: 365845,
    content: 25,
    color: '#67c241',
    bottomname: '青铜'
  },
  {
    num: 245854,
    content: 20,
    color: '#e6a139',
    bottomname: '瓷器'
  },
  {
    num: 175458,
    content: 15,
    color: '#f76b6c',
    bottomname: '陶器'
  }
]

const reci = [
  {
    name: '陶瓷',
    hot: '+8'
  }, {
    name: '青铜器',
    hot: '+6'
  }, {
    name: '玉器',
    hot: '+5'
  }, {
    name: '书画',
    hot: '+3'
  }, {
    name: '西周',
    hot: '+2'
  }
]

const wwlb = {
  header: ['青铜', '瓷器', '陶器'],
  data: [],
  color: ['#67c241', '#e6a139', '#f76b6c']
}

let colors = ['#6EC388', '#3EA5B7', '#F06A47', '#617C8C', '#6FB7EE', '#FEBA61']

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    MainTop,
    SearchBar,
    Nums,
    PowerBar,
    trend,
    HotBang,
    FocusBang,
    PieTu,
    CollectionList
  },
  props: {
    crumbData: {
      type: Array,
      default: function () {
        return [
          {
            name: '数据统计',
            id: -1
          }
        ]
      }
    }
  },
  data () {
    return {
      nlt,
      cardArr,
      nums,
      hot: [],
      reci,
      focus: [],
      wwlb
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    getData () {
      this.$http.post('/statistics/total').then(res => {
        if (res.code === 0) {
          this.statistics = res.data
          this.nums = [
            {
              name: '展示总数',
              sum: this.statistics.exhibitionTotal,
              icon: 'sys01@2x.png',
              danwei: '次'
            },
            {
              name: '文物总数',
              sum: this.statistics.total,
              icon: 'sys02@2x.png',
              danwei: '件'
            },
            {
              name: '累计点赞数',
              sum: this.statistics.likeTotal,
              icon: 'sys04@2x.png',
              danwei: '件'
            }
          ]
          let arr = this.statistics.exhibitionList.map(item => item.openNum)
          let max = Math.max(...arr)
          this.statistics.exhibitionList.forEach((item, i) => {
            this.nlt[i] = {
              num: item.openNum,
              content: Math.floor(item.openNum / max * 25),
              color: colors[i] || '#67c241',
              bottomname: item.name
            }
          })

          let typearr = this.statistics.collectionTypeTotal.map(item => item.typeName)
          this.wwlb.header = typearr
          this.statistics.collectionTypeTotal.forEach((item, i) => {
            this.wwlb.data[i] = {value: item.typeNum, name: item.typeName}
          })
          this.wwlb.color = colors

          this.statistics.collectionSearchList.forEach((item, i) => {
            this.reci[i] = {
              name: item.name,
              hot: '+' + item.searchNum
            }
          })

          this.statistics.collectionLikeList.forEach((item, i) => {
            this.hot[i] = {
              name: item.name,
              num: item.likeNum
            }
          })

          this.statistics.collectionOpenList.forEach((item, i) => {
            this.focus[i] = {
              num: i + 1,
              zan: item.openNum,
              sub1: item.timeName + ' ' + item.typeName,
              sub2: '',
              name: item.name,
              img: item.pic
            }
          })
        }
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.getData()
  }
}
</script>

<style scoped>
/* 引入公共css类 */
@import url(./style);
</style>
