<!--  -->
<template>
  <div>
    <main-top :crumb="crumbData"></main-top>
    <div class="table-interface">
      <div class="top">
        <div class="top-left">
          <div class="tl-top">
            <InfoCard  v-for="(item,i) in cardArr" :key="i" :data='item' class="i-card"/>
          </div>
          <div class="tl-bottom card">
            <Nums v-for="(item, i) in nums" :key="i" :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">
          <trend />
        </div>
        <div class="p2-right card">
          <HotBang :data='hot'/>
        </div>
      </div>

      <div class="plate03 card">
        <FocusBang :data="focus"/>
        <div class="pla3">
          <div class="p3-left">
           <p class="p3-txt theme-color1">{{wwlb.name}}</p>
           <PieTu :id="'wwlb'" :data='wwlb'/>
          </div>
          <div class="p3-right">
           <div class="pr-l">
             <p class="theme-color1">搜索热词</p>
             <ul>
               <li v-for="(item,i) in reci" :key="i">
                 <span>{{item.name}}</span>
                 <span class="theme-color1">{{item.hot}}</span>
               </li>
             </ul>
           </div>
           <div class="v-line"></div>
           <div class="pr-c">
             <p class="theme-color1">日上升最快</p>
             <ul>
               <li v-for="(item,i) in shangsheng" :key="i">
                 <span>
                   <img :src="item.img" alt="">
                   {{item.name}}
                 </span>
                 <span class="theme-color1">{{item.hot}}</span>
               </li>
             </ul>
           </div>
           <div class="v-line"></div>
           <div class="pr-r">
             <p class="theme-color1">日下降最快</p>
             <ul>
               <li v-for="(item,i) in xiajiang" :key="i">
                 <span>
                   <img :src="item.img" alt="">
                   {{item.name}}
                 </span>
                 <span class="theme-color1">{{item.hot}}</span>
               </li>
             </ul>
           </div>
          </div>
        </div>
      </div>

      <div class="plate04">
        <div  class="pl4-i card" v-for="(item,i) in tongji" :key="i">
          <p class="p3-txt theme-color1">{{item.name}}</p>
          <PieTu  :id="'pie'+i" :data="item"/>
        </div>
      </div>
    </div>
  </div>
</template>

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

import MainTop from '@/components/main-top'
import SearchBar from '@/components/search-bar'
import InfoCard from '@/components/info-card'
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'

const crumbData = [
  {
    name: '数据统计',
    id: -1
  }
]

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: '秒'
      }
    ]
  },
  {
    name: '终端展示数',
    icon: 'iconsys2',
    sub1: [
      {
        bold: {
          txt: '8',
          color: '#a09d50'
        },
        txt: '已启用'
      }
    ],
    sub2: [
      {
        bold: {
          txt: '16',
          color: '#a09d50'
        },
        txt: '总数'
      }
    ]
  }
]

const nums = [
  {
    name: '展示总数',
    sum: 5
  },
  {
    name: '文物总数',
    sum: 2634
  },
  {
    name: '本月新增文物',
    sum: 36
  },
  {
    name: '文物下载量',
    sum: 162685
  },
  {
    name: '累计点赞数',
    sum: 625658
  }
]

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

const hot = [
  {
    name: '西周克盉',
    num: 95684
  },
  {
    name: '青白玉“绵绵瓜瓞”御制诗洗',
    num: 85685
  },
  {
    name: '吃古柯叶的厄瓜多尔祭司',
    num: 95342
  },
  {
    name: '宋代定窑白釉童子诵经壶',
    num: 95681
  },
  {
    name: '西周伯矩鬲',
    num: 75684
  },
  {
    name: '雍正珊瑚红地珐琅彩花鸟纹瓶',
    num: 95685
  },
  {
    name: '西周克罍',
    num: 95124
  },
  {
    name: '元代白玉凌霄花饰件',
    num: 93483
  },
  {
    name: '北魏“大代”款铜鎏金释迦牟...',
    num: 99684
  },
  {
    name: '秘鲁莫切人物陶罐',
    num: 85686
  }
]

const focus = [
  {
    num: 1,
    zan: 368,
    sub1: '清 陶器',
    sub2: '国家一级文物',
    name: '青白玉“绵绵瓜瓞”御制诗洗',
    img: 'http://show.4dage.com/3D/2018/model/SD/images/s10.jpg'
  },
  {
    num: 2,
    zan: 297,
    sub1: '唐 陶器',
    sub2: '国家一级文物',
    name: '秘鲁莫切人物陶罐',
    img: 'http://model3d.4dage.com/3D/2018/model/DG/images/ger01.jpg'

  },
  {
    num: 3,
    zan: 242,
    sub1: '唐 陶器',
    sub2: '国家一级文物',
    name: '西周克盉',
    img: 'http://show.4dage.com/3D/2018/model/SD/images/s08.jpg'
  }
]

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

const shangsheng = [
  {
    name: '青白玉“绵绵瓜瓞”御制诗洗',
    hot: '+8',
    img: 'http://show.4dage.com/3D/2018/model/SD/images/s10.jpg'
  }, {
    name: '秘鲁莫切人物陶罐',
    hot: '+6',
    img: 'http://model3d.4dage.com/3D/2018/model/DG/images/ger01.jpg'
  }, {
    name: '西周克罍',
    hot: '+5',
    img: 'http://show.4dage.com/3D/2018/model/SD/images/s08.jpg'
  }, {
    name: '北魏“大代”款铜鎏金释迦牟尼佛坐像',
    hot: '+3',
    img: 'http://show.4dage.com/3D/2018/model/SD/images/s05.jpg'
  }, {
    name: '元青花凤首扁壶',
    hot: '+2',
    img: 'http://show.4dage.com/3D/2018/model/SD/images/s03.jpg'
  }
]

const xiajiang = [
  {
    name: '青白玉“绵绵瓜瓞”御制诗洗',
    hot: '-8',
    img: 'http://show.4dage.com/3D/2018/model/SD/images/s10.jpg'
  }, {
    name: '秘鲁莫切人物陶罐',
    hot: '-6',
    img: 'http://model3d.4dage.com/3D/2018/model/DG/images/ger01.jpg'
  }, {
    name: '西周克罍',
    hot: '-5',
    img: 'http://show.4dage.com/3D/2018/model/SD/images/s08.jpg'
  }, {
    name: '北魏“大代”款铜鎏金释迦牟尼佛坐像',
    hot: '-3',
    img: 'http://show.4dage.com/3D/2018/model/SD/images/s05.jpg'
  }, {
    name: '元青花凤首扁壶',
    hot: '-2',
    img: 'http://show.4dage.com/3D/2018/model/SD/images/s03.jpg'
  }
]

const wwlb = {
  name: 'Top100文物占比',
  header: ['青铜', '瓷器', '陶器'],
  data: [
    {value: 335, name: '青铜'},
    {value: 310, name: '瓷器'},
    {value: 734, name: '陶器'}
  ],
  color: ['#67c241', '#e6a139', '#f76b6c']
}

const tongji = [
  {
    name: '文物类别统计',
    header: ['青铜', '瓷器', '陶器'],
    center: ['65%', '60%'],
    data: [
      {value: 335, name: '青铜'},
      {value: 310, name: '瓷器'},
      {value: 734, name: '陶器'}
    ],
    color: ['#67c241', '#e6a139', '#f76b6c']
  },
  {
    name: '文物品级统计',
    center: ['65%', '60%'],
    header: ['国家一级文物', '国家二级文物', '国家三级文物', '一般文物'],
    data: [
      {value: 335, name: '国家一级文物'},
      {value: 310, name: '国家二级文物'},
      {value: 734, name: '国家三级文物'},
      {value: 40, name: '一般文物'}

    ],
    color: ['#62AF3E', '#4DD0EC', '#E6A23C', '#EE7818']
  },
  {
    name: '各分馆人流访问量',
    center: ['65%', '60%'],
    header: ['展馆A', '展馆B', '展馆C', '展馆D', '展馆E', '展馆F'],
    data: [
      {value: 335, name: '展馆A'},
      {value: 210, name: '展馆B'},
      {value: 350, name: '展馆C'},
      {value: 410, name: '展馆D'},
      {value: 510, name: '展馆E'},
      {value: 810, name: '展馆F'}
    ],
    color: ['#62AF3E', '#4DD0EC', '#E6A23C', '#EE7818', '#F56C6C', '#3B87ED']
  },
  {
    name: '展览/维修文物统计',
    center: ['65%', '60%'],
    header: ['展览中', '维修中'],
    data: [
      {value: 735, name: '展览中'},
      {value: 134, name: '维修中'}
    ],
    color: ['#A7A15F', '#E6A23C']
  }
]

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    MainTop,
    SearchBar,
    InfoCard,
    Nums,
    PowerBar,
    trend,
    HotBang,
    FocusBang,
    PieTu
  },
  data () {
    return {
      crumbData,
      nlt,
      cardArr,
      nums,
      hot,
      reci,
      xiajiang,
      focus,
      shangsheng,
      wwlb,
      tongji
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  }
}
</script>

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