<template>
  <div id="leftLeague">
    <div class="leftLeagueContainer">
      <ContentTop title="体育社团情况" :type="1" />
      <div class="item-chart-top pos-relative">
        <!-- <div class="radioStyle">
          <Radio :radioProps="rankRadioProps" class="d-flex jc-end" />
        </div>  -->
        <AccumulateTip
          :width="66"
          label="社团总人数"
          :count="733667"
          unit="人"
          hasSub
          subLabel="社团总个数"
          :subCount="66789"
          subUnit="个"
        />
        <div class="d-flex jc-between" style="margin-top: 16px">
          <LeagueItem :dataSoure="topLeftData" />
          <LeagueItem :dataSoure="topRightData" />
        </div>
        <div class="d-flex jc-between" style="margin-top: 10px">
          <div class="leagueItem">
            <div class="itemBox" v-for="(item, index) in leftData" :key="index">
              <LeagueItem :dataSoure="leftData[index]" />
            </div>
          </div>
          <div class="leagueCenter">
            
            <!-- width="166px" -->
            <Echart
              :options="options"
              id="bottomLeftChart2"
              height="164px"
              width="100%"
            ></Echart>
          </div>
          <div class="leagueItem">
            <div
              class="itemBox"
              v-for="(item, index) in rightData"
              :key="index"
            >
              <LeagueItem :color="colorRight" :dataSoure="leftData[index]" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
    
    <script>
import echarts from "echarts";
import Echart from "@/common/echart";
import ContentTop from "@/components/contentTop";
import AccumulateTip from "@/components/accumulateTip";
import Radio from "@/components/Radio";
import LeagueItem from "@/components/leagueItem";
export default {
  components: {
    Echart,
    ContentTop,
    AccumulateTip,
    Radio,
    LeagueItem,
  },
  data() {
    return {
      colorRight: "#6DC5F2",
      options: {
        color: ["#6dc5f2", "#ed73e8"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        grid: {
          // 让图表占满容器
          top: "0px",
          left: "0px",
          right: "0px",
          bottom: "0px",
        },
        calculable: true,
        series: [
          {
            name: "访问来源",
            type: "pie",
            selectedMode: "single",
            raduis: [0, "100%"],
            label: {
              normal: {
                position: "inner",
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              { value: 679, name: "县级" },
              { value: 935, name: "市级" },
            ],
          },
        ],
      },
      rankRadioProps: {
        name: "rankRadio",
        options: [
          { value: "week", label: "等级" },
          { value: "ji", label: "星级" },
        ],
      },
      topLeftData: {
        label: "市级社团个数",
        count: 38690,
        subLabel: "市级社团人数",
        subCount: 63486,
      },
      topRightData: {
        label: "县(市，区)级社团个数",
        count: 38690,
        subLabel: "县(市，区)级社团人数",
        subCount: 63486,
      },
      leftData: [
        {
          label: "5A级个数",
          count: 38690,
          subLabel: "5A级人数",
          subCount: 63486,
        },
        {
          label: "4A级个数",
          count: 38690,
          subLabel: "4A级人数",
          subCount: 63486,
        },
        {
          label: "3A级个数",
          count: 38690,
          subLabel: "3A级人数",
          subCount: 63486,
        },
      ],
      rightData: [
        {
          label: "5A级个数",
          count: 38690,
          subLabel: "5A级人数",
          subCount: 63486,
        },
        {
          label: "4A级个数",
          count: 38690,
          subLabel: "4A级人数",
          subCount: 63486,
        },
        {
          label: "3A级个数",
          count: 38690,
          subLabel: "3A级人数",
          subCount: 63486,
        },
      ],
    };
  },
};
</script>
    
    <style lang="scss" scoped>
@import "../../../assets/scss/index.scss";
#leftLeague {
  .leftLeagueContainer {
    // height: 318px;
    width: 100%;
    // padding: 20px 30px;
    .radioStyle {
      position: absolute;
      right: 0;
    }
    .leagueCenter {
      flex: 1;
      //   background: red;
    }
    .leagueItem {
      .itemBox {
        margin-top: 10px;
        // text-align: center;
        &:first-child {
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
    