<template>
  <div id="leftGym">
    <div class="leftGymContainer">
      <ContentTop :title="title" :type="1" />
      <div class="pos-relative">
       <AccumulateTip
          iconName="person_icon"
          :paddingTop="18"
          :width="87"
          :height="51"
          :label="title"
          :count="allPeopleNum"
          unit=""
        />
        <div>
          <Sliders
            @sliderChange="handleChange"
            height="190px"
			:textWidth="150"
            :options="useData"
          />
        </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 LeagueItem from "@/components/leagueItem";
import Sliders from "@/components/Sliders";
export default {
  components: {
    Echart,
    ContentTop,
    AccumulateTip,
    LeagueItem,
    Sliders,
  },
  props: {
  	viewData: {
  		type: Object,
  		default: () => {
  			return {}
  		}
  	},
  },
  data() {
    return {
      colorRight: "red",
      rankRadioProps: {
        name: "rankRadio",
        options: [
          { value: "week", label: "等级" },
          { value: "ji", label: "星级" },
        ],
      },
      useData: [],
	  allPeopleNum:0,
    };
  },
  watch: {
  	viewData: {
  		handler(val) {
  			this.title = val.title;
			this.useData=[];
			console.log(val);
			if(val.enoughs && val.enoughs.length){
				val.enoughs.map(item=>{
					this.useData.push({
						value:Number(item.amount),
						label:item.name,
						rightText: "50%"
					})
					this.allPeopleNum+=Number(item.amount)
				})
			}
			
  		},
  		deep: true,
  		immediate: true
  	}
  },
  methods: {
    handleChange(index, value) {
      console.log(index, value);
    },
  },
};
</script>
      
      <style lang="scss" scoped>
@import "../../../assets/scss/index.scss";
#leftGym {
  margin-top: 18px;
  .leftGymContainer {
    // height: 318px;
    width: 100%;
    .slider-wrapper {
      // overflow-y: hidden !important;
    }
    .leagueCenter {
      flex: 1;
      //   background: red;
    }
    .leagueItem {
      .itemBox {
        margin-top: 18px;
        &:first-child {
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
      