<template>
  <div class="body-box">
    <div class="d-flex h-100 w-100">
      <!-- 左侧内容 -->
      <div class="left-wrapper d-flex flex-column">
        <div class="use-rank-wrapper d-flex flex-column">
          <div class="use-rank-content">
            <contentTop :type="2" title="各县区使用频率排行" :topOptionsProps="useRankSelectProps" />
          </div>
          <div class="use-rank-list-content">
            <rank-list viewType="opther" :listHeight="465" :tableTitle="userRankTableTitleList" :list="userRankList" />
          </div>
        </div>
        <div class="use-status-wrapper d-flex flex-column">
          <div class="use-status-top-con">
            <contentTop :type="2" title="活动码使用情况" />
          </div>
          <div class="use-status-con d-flex flex-column">
            <div class="slider-process-wrapper">
              <i class="lade-icon"></i>
              <div class="slider-process-content">
                <div class="slider-process-left" style="width: 33%">
                  <span class="num">33%</span>
                </div>
                <div class="slider-process-right" style="width: 67%">
                  <span class="num">67%</span>
                </div>
              </div>
              <i class="fale-icon"></i>
            </div>
            <p class="distribute-center-text">年龄分布</p>
            <div class="data-distribute d-flex h-100 w-100">
              <div class="distribute-left-content w-100">
                <div class="distribute-img"></div>
                <div class="distribute-process-item line-0 distribute-center-text">25.4%</div>
                <div class="distribute-process-item line-1 distribute-center-text">25.4%</div>
                <div class="distribute-process-item line-2 distribute-center-text">25.4%</div>
                <div class="distribute-process-item line-3 distribute-center-text">25.4%</div>
                <div class="distribute-process-item line-4 distribute-center-text">25.4%</div>
              </div>
              <div class="distribute-right-content d-flex flex-column">
                <div class="distribute-data-item line-0">25-40岁 12,123人</div>
                <div class="distribute-data-item line-1">25-40岁 12,123人</div>
                <div class="distribute-data-item line-2">25-40岁 12,123人</div>
                <div class="distribute-data-item line-3">25-40岁 12,123人</div>
                <div class="distribute-data-item line-4">25-40岁 12,123人</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间内容 -->
      <div class="middle h-100">
        <div class="middle-con d-flex flex-column h-100">
          <div class="sport-code-total-con">
            <p class="sport-title-con">
              <span class="sport-title">运动码总人次</span>
            </p>
            <light-plate :lightNum="[9,6,3,7,8,9,0,6]" />
          </div>
          <div class="sport-bg"></div>
          <div class="one-use-rank-wrapper">
            <div class="one-use-rank-top-con">
              <contentTop title="运动码个人使用情况排行" :topRadioProps="oneUseRadioProps" :topOptionsProps="oneUseRankSelectProps" />
            </div>
            <div class="one-use-rank-con">
              <rank-list :listHeight="340" :tableTitle="oneUseTableTitle" :list="oneUseList" />
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧内容 -->
      <div class="right-wrapper d-flex flex-column">
        <div class="city-rank-wrapper d-flex flex-column">
          <div class="city-rank-content">
            <contentTop :type="2" title="市级协会使用频率排行" :topOptionsProps="cityRankSelectProps" />
          </div>
          <div class="city-rank-list-content">
            <Sliders height="360px" :isHasRight="true" :options="cityRankOptions" :rightTextWidth="55" />
          </div>
        </div>
        <div class="area-use-rank-wrapper d-flex flex-column">
          <div class="area-use-rank-top-con">
            <contentTop :type="2" title="各区县协会使用频率排行" :topOptionsProps="areaUseRankSelectProps" />
          </div>
          <div class="area-use-rank-con">
            <rank-list :listHeight="480" :tableTitle="areaTableTitleList" :list="areaList" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import contentTop from '@/components/contentTop';
import rankList from '@/components/rankList';
import Sliders from '@/components/Sliders';
import lightPlate from '@/components/lightPlate';

export default {
  name: 'sportCode',
  components: { contentTop, rankList, Sliders, lightPlate },
  data() {
    return {
      // 各县区使用频率排行
      useRankSelectProps: {
        selects: [
          {
            name: 'useRank1',
            options: [
              { value: 1, label: '红榜' }
            ]
          },
          {
            name: 'useRank2',
            options: [
              { value: 1, label: '区' }
            ]
          }
        ]
      },
      userRankTableTitleList: [
        { title: '排名', width: '80' },
        { title: '名称', val: 'first', width: '160' },
        { title: '使用频率', val: 'second', width: '160' }
      ],
      userRankList: [
        { first: '瓯海区', second: '90%' },
        { first: '龙湾区', second: '90%' },
        { first: '鹿城区', second: '90%' },
        { first: '永嘉县', second: '90%' },
        { first: '乐清市', second: '90%' },
        { first: '瑞安市', second: '90%' },
        { first: '文成县', second: '90%' },
        { first: '平阳县', second: '90%' },
        { first: '龙港市', second: '90%' },
        { first: '洞头区', second: '90%' }
      ],
      // 运动码个人使用情况排行
      oneUseRadioProps: {
        name: 'onuseradio',
        width: 100,
        options: [
          { value: 1, label: '周' },
          { value: 2, label: '月' },
          { value: 3, label: '年' },
        ]
      },
      oneUseRankSelectProps: {
        selects: [
          {
            name: 'oneuse1',
            options: [
              { value: 1, label: '红榜' }
            ]
          }
        ]
      },
      oneUseTableTitle: [
        { title: '排名', width: '80' },
        { title: '用户姓名', val:'first', width: '180' }, 
        { title: '使用时间(h)', val:'second', width: '180' },
        { title: '使用频率', val:'third', width: '180' }
      ],
      oneUseList: [
        { first: '顾阳', second: '30', third: '92%' },
        { first: '顾阳', second: '30', third: '92%' },
        { first: '顾阳', second: '30', third: '92%' },
        { first: '顾阳', second: '30', third: '92%' },
        { first: '顾阳', second: '30', third: '92%' },
        { first: '顾阳', second: '30', third: '92%' },
        { first: '顾阳', second: '30', third: '92%' },
        { first: '顾阳', second: '30', third: '92%' },
        { first: '顾阳', second: '30', third: '92%' },
        { first: '顾阳', second: '30', third: '92%' },
        { first: '顾阳', second: '30', third: '92%' },
        { first: '顾阳', second: '30', third: '92%' },
        { first: '顾阳', second: '30', third: '92%' },
        { first: '顾阳', second: '30', third: '92%' }
      ],
      // 市级协会使用频率排行
      cityRankSelectProps: {
        selects: [
          {
            name: 'cityRank1',
            options: [
              { value: 1, label: '红榜' }
            ]
          }
        ]
      },
      cityRankOptions: [
        { value: 100, label: '鹿城区', rightText: 12000 },
        { value: 90, label: '瓯海区', rightText: 9876 },
        { value: 80, label: '龙海区', rightText: 8734 },
        { value: 70, label: '洞头区', rightText: 6789 },
        { value: 60, label: '永嘉县', rightText: 6000 },
        { value: 50, label: '乐清市', rightText: 6000 },
        { value: 40, label: '文成县', rightText: 6000 },
        { value: 30, label: '文成县', rightText: 6000 },
        { value: 30, label: '文成县', rightText: 6000 },
        { value: 30, label: '文成县', rightText: 6000 },
      ],
      // 各区县协会使用频率排行
      areaUseRankSelectProps: {
        selects: [
        {
            name: 'areause1',
            options: [
              { value: 1, label: '红榜' }
            ]
          },
          {
            name: 'areause2',
            options: [
              { value: 1, label: '区' }
            ]
          }
        ]
      },
      areaTableTitleList: [
        { title: '排名', width: '80' },
        { title: '名称', val:'first', width: '180' }, 
        { title: '使用频率', val:'second', width: '180' }
      ],
      areaList: [
        { first: '瓯海区', second: '90%' },
        { first: '龙湾区', second: '90%' },
        { first: '鹿城区', second: '90%' },
        { first: '永嘉县', second: '90%' },
        { first: '乐清市', second: '90%' },
        { first: '瑞安市', second: '90%' },
        { first: '文成县', second: '90%' },
        { first: '平阳县', second: '90%' },
        { first: '龙港市', second: '90%' },
        { first: '洞头区', second: '90%' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/scss/sportCode.scss';
</style>