<template>
  <div class="body-box">
    <div class="d-flex jc-between h-100">
      <!-- 左边数据 -->
      <div class="d-flex flex-column left-content">
        <div class="d-flex flex-column rank-wrapper">
          <ContentTop
            title="赛事活动排名"
            :type="2"
            :topOptionsProps="rankTopOptionsProps"
            @topSelectChange="topSelectChange"
          />
          <div class="rank-radio d-flex jc-end w-100">
            <Radio
              :radioProps="activeRankRadioProps"
            />
          </div>
          <div class="rank-list">
            <rank-list :listWidth="400" view-type="other" :listHeight="430" :tableTitle="activeRankTableTitle" :list="activeRankList" />
          </div>
        </div>
        <div class="d-flex flex-column data-wrapper">
          <ContentTop
            title="运动赛事数据"
            :type="2"
            :topOptionsProps="rankTopOptionsProps"
            @topSelectChange="topSelectChange"
          />
          <div class="slider-process-wrapper">
            <i class="lade-icon"></i>
            <div class="slider-process-content">
              <div class="slider-process-left" style="width: 33.3%">
                <span class="num">33.3%</span>
              </div>
              <div class="slider-process-right" style="width: 66.7%">
                <span class="num">66.7%</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 class="middle w-100 h-100">
        <div class="middler-wrapper d-flex flex-column">
          <div class="middle-top d-flex">
            <div class="match-total-num match-num-item d-flex">
              <div class="total-num-icon match-icon"></div>
              <div class="text d-flex ai-center">赛事活动总数:</div>
              <div class="total-num number-content d-flex ai-center">
                <span class="num">7,366,789</span>
                <span class="unit">场</span>
              </div>
            </div>
            <div class="match-server-num match-num-item d-flex">
              <div class="server-num-icon match-icon"></div>
              <div class="text d-flex ai-center">服务总人数:</div>
              <div class="server-num number-content d-flex ai-center">
                <span class="num">944,789,00</span>
                <span class="unit">人</span>
              </div>
            </div>
          </div>
          <div class="middle-bottom">
            <div class="middle-bottom-wrapper d-flex flex-column">
              <div class="sign-in-wrapper d-flex flex-column">
                <div class="sign-title">
                  <span class="sign-title-text">相关签到率</span>
                </div>
                <div class="sign-in-content d-flex">
                  <div class="img1">
                    <piechart
                      :datalist="cyData"
                      style="width: 550px"
                    ></piechart>
                  </div>
                  <div class="img-label d-flex flex-column jc-center">
                    <div class="label-item d-flex ai-center d-flex">
                      <span class="color-block" style="background-color: #01f9cc;"></span>
                      <span class="label-text">市级协会</span>
                      <span class="label-unit" style="color: #01f9cc;">68%</span>
                    </div>
                    <div class="label-item d-flex ai-center d-flex">
                      <span class="color-block" style="background-color: #02adf2;"></span>
                      <span class="label-text">县市级协会</span>
                      <span class="label-unit" style="color: #02adf2;">30%</span>
                    </div>
                    <div class="label-item d-flex ai-center d-flex">
                      <span class="color-block" style="background-color: #fcbc01;"></span>
                      <span class="label-text">各县市区</span>
                      <span class="label-unit" style="color: #fcbc01;">2%</span>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <ContentTop
                  title="各区县协会赛事活动排名"
                  :topRadioProps="activeRankTopRadioProps"
                  :topOptionsProps="activeRankTopSelectProps"
                />
                <div class="active-rank-list">
                  <rank-list
                    :listWidth="700"
                    :listHeight="350"
                    :tableTitle="activeRankTitle"
                    :list="areaRankList"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右边数据 -->
      <div class="rigth-content d-flex flex-column h-100">
        <div class="d-flex flex-column">
          <ContentTop title="赛事级别排名" :type="2" />
          <div class="rank-radio d-flex jc-end w-100">
            <Radio
              :radioProps="levelRankRadioProps"
            />
          </div>
          <Sliders @sliderChange="sliderChange" />
        </div>
        <div class="city-active-wrapper d-flex flex-column">
          <ContentTop title="市级协会赛事活动排名" :topOptionsProps="cityActiveOptionProps" :type="2" />
          <div class="rank-list">
            <rank-list :listHeight="500"  :tableTitle="cityRankTableTitle" :list="cityRankList" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ContentTop from '@/components/contentTop';
import Radio from '@/components/Radio';
import rankList from "@/components/rankList";
import piechart from '@/components/pieChart';
import Sliders from '@/components/Sliders'

export default {
  components: { ContentTop, Radio, rankList, piechart, Sliders },
  data() {
    return {
      // 赛事活动排名活动数据
      rankTopOptionsProps: {
        selects: [
          {
            name: 'one',
            options: [
              {
                value: 1,
                label: 111
              },
              {
                value: 2,
                label: 222
              }
            ]
          }
        ]
      },
      // 赛事活动排名单选数据
      activeRankRadioProps: {
        name: 'rankRadio',
        width: 130,
        options: [
          { value: 'week', label: '周' },
          { value: 'ji', label: '季' },
          { value: 'month', label: '月' },
          { value: 'year', label: '年' }
        ]
      },
      // 赛事级别排名单选数据
      levelRankRadioProps: {
        name: 'levelRankRadio',
        width: 131,
        options: [
          { value: 'qu', label: '区级' },
          { value: 'xian', label: '县级' },
          { value: 'shi', label: '市级' }
        ]
      },
      activeRankTableTitle: [
        { title: '排名', width: '80' },
        { title: '赛事活动排名', val:'first', width: '120' },
        { title: '活动场数', val:'second', width: '100' },
        { title: '服务人次', val:'three', width: '100' },
      ],
      activeRankList: [
        { first:'羽毛球赛事', second:'6场', three:'1000次' },
        { first:'羽毛球赛事', second:'6场', three:'1000次' },
        { first:'羽毛球赛事', second:'6场', three:'1000次' },
        { first:'羽毛球赛事', second:'6场', three:'1000次' },
        { first:'羽毛球赛事', second:'6场', three:'1000次' },
        { first:'羽毛球赛事', second:'6场', three:'1000次' },
        { first:'羽毛球赛事', second:'6场', three:'1000次' },
        { first:'羽毛球赛事', second:'6场', three:'1000次' },
        { first:'羽毛球赛事', second:'6场', three:'1000次' }
      ],
      cyData: [{
        name: '林地面积统计',
        value: 10000,
        itemStyle: {
          color: '#22c4ff',
        }
      }, {
        name: '草地面积统计',
        value: 12116,
        itemStyle: {
          color: '#aaff00'
        }
      }, {
        name: '耕地地面积统计',
        value: 16616,
        itemStyle: {
          color: '#ffaaff'
        }
      }],
      activeRankTopRadioProps: {
        name: 'activeRank',
        width: 60,
        options: [
          { value: 'qu', label: '区' },
          { value: 'xian', label: '县' }
        ]
      },
      activeRankTopSelectProps: {
        selects: [
          {
            name: 'select1',
            options: [
              { value: 22, label: 222}
            ]
          }
        ]
      },
      activeRankTitle: [{
        title: '排名',
        width: '100'
      }, {
        title: '赛事活动名称',
        val:'first',
        width: '280'
      }, {
        title: '活动人数',
        val:'second',
        width: '280'
      }, {
        title: '参与率',
        val:'last',
        width: '100'
      }],
      areaRankList: [
        { first: '羽毛球赛事活动', second: '2000', last: '90%' },
        { first: '羽毛球赛事活动', second: '2000', last: '90%' },
        { first: '羽毛球赛事活动', second: '2000', last: '90%' },
        { first: '羽毛球赛事活动', second: '2000', last: '90%' },
        { first: '羽毛球赛事活动', second: '2000', last: '90%' },
        { first: '羽毛球赛事活动', second: '2000', last: '90%' },
        { first: '羽毛球赛事活动', second: '2000', last: '90%' },
        { first: '羽毛球赛事活动', second: '2000', last: '90%' },
        { first: '羽毛球赛事活动', second: '2000', last: '90%' },
        { first: '羽毛球赛事活动', second: '2000', last: '90%' },
        { first: '羽毛球赛事活动', second: '2000', last: '90%' },
        { first: '羽毛球赛事活动', second: '2000', last: '90%' }
      ],
      // 市级协会赛事活动排名 top下拉
      cityActiveOptionProps: {
        selects: [
          {
            name: 'cityTopSelect',
            options: [
              { value: 1, label: '红榜' }
            ]
          }
        ]
      },
      cityRankTableTitle: [
        { title: '排名', width: 80 },
        { title: '赛事活动名称', val:'first', width: 130 },
        { title: '活动人数', val:'second', width: 100 },
        { title: '参与率', val:'last', width: 70 },
      ],
      cityRankList: [
        { first: '羽毛球赛事活动', second: '2000', last: '100%' },
        { first: '羽毛球赛事活动', second: '2000', last: '100%' },
        { first: '羽毛球赛事活动', second: '2000', last: '100%' },
        { first: '羽毛球赛事活动', second: '2000', last: '100%' },
        { first: '羽毛球赛事活动', second: '2000', last: '100%' },
        { first: '羽毛球赛事活动', second: '2000', last: '100%' },
        { first: '羽毛球赛事活动', second: '2000', last: '100%' },
        { first: '羽毛球赛事活动', second: '2000', last: '100%' },
        { first: '羽毛球赛事活动', second: '2000', last: '100%' },
        { first: '羽毛球赛事活动', second: '2000', last: '100%' },
        { first: '羽毛球赛事活动', second: '2000', last: '100%' },
        { first: '羽毛球赛事活动', second: '2000', last: '100%' }
      ]
    }
  },
  methods: {
    topSelectChange(name, value) {
      console.log(name, value)
    },
    sliderChange(index, value) {
      console.log(index, value)
    }
  }
}
</script>

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