<template>
  <div class="crowd-analysis-wrap">
    <el-radio-group class="crowd-radio" v-model="radio" size="small" @change="updateRadio">
      <el-radio-button label="0">全部人员</el-radio-button>
      <el-radio-button label="1">参与项目</el-radio-button>
      <el-radio-button label="2">通过项目</el-radio-button>
    </el-radio-group>
    <div v-show="!showData" class="empty">
      <p>"没有相关数据，请重新选择查询范围"</p>
    </div>
    <div>
    <div class="chart" v-show="showData">
      <div v-if="showEducation === true">
        <div class="item" id="education" ref="education"></div>
      </div>
      <div v-if="showEducation === false" class="empty-left">
        <div class="title">人员学历分布</div>
        <img src="../../assets/image/noData.png" />
      </div>
      <div v-if="showJob === true">
        <div class="item item-right" id="job" ref="job"></div>
      </div>
      <div v-if="showJob === false" class="empty-left item-right">
        <div class="title">人员职务分布</div>
        <img src="../../assets/image/noData.png" />
      </div>
    </div>
    </div>
    <div>
    <div class="chart" v-show="showData">
      <div class="item">
        <div class="title">人员性别分布</div>
        <div class="sex">
          <div class="sex-item" v-for="(item , index) in sexData" :key="index">
            <!-- <img class="sex-img" v-bind:src="item.src" /> -->
            <!-- <el-progress class="sex-img" :color="item.color" :stroke-width=12 type="circle" :percentage="item.rate"></el-progress> -->
            <div v-if="index == 0" class="sex-img" id="ring0" ref="ring0"></div>
            <div v-if="index == 1" class="sex-img" id="ring1" ref="ring1"></div>
            <div v-if="index == 2" class="sex-img" id="ring2" ref="ring2"></div>
            <p class="sex-num">{{ item.num }}</p>
            <p class="sex-type">{{ item.type }}</p>
          </div>
        </div>
      </div>
      <div v-if="showAge === true">
        <div class="item item-right" id="age" ref="age"></div>
      </div>
      <div v-if="showAge === false" class="empty-left item-right">
        <div class="title">人员年龄分布</div>
        <img src="../../assets/image/noData.png" />
      </div>
    </div>
    </div>
    <div class="spacing"></div>
  </div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { create } from "domain";
import { mapGetters } from "vuex";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation";
import * as chartData from "../../utils/learning/chartData";
import echarts from "echarts";
import { setTimeout } from "timers";
let vm = null;
export default {
  components: {
    BreadCrumb
  },
  props: {
    formInline: {
      type: Object
    },
    activeName: {
      type: String
    },
    organizationList: {
      type: Array
    },
    timeInfoData: {
      type: Object
    },
  },
  data() {
    return {
      radio: '0',
      sexData: [
        {
          color: '#1890FF',
          type: "男性",
          num: 0,
          rate: 0,
        },
        {
          color: '#FB5B52',
          type: "女性",
          num: 0,
          rate: 0,
        },
        {
          color: '#5D7092',
          type: "未完善信息",
          num: 0,
          rate: 0,
        }
      ],
      projectId: "",
      crowdData: {},
      showData: true,
      echartsData: {
        chart1: {},
        chart2: {},
        chart3: {},
      },
      downloadId: null,
      timeInfoChild: {},

      showEducation: true,
      showJob: true,
      showAge: true,
    };
  },
  watch: {
    timeInfoData: {
      deep: true,
      handler(nv, ov) {
        vm.timeInfoChild = nv;
      }
    }
  },
  created() {
    vm = this;
    vm.projectId = vm.getUrlSearch(window.location.href, "id");
    vm.downloadId = vm.getUrlSearch(window.location.href, "downloadId");
  },
  mounted: function() {
    // commonUtil.resizeHeight();
    //父组件传值
    this.$on("search", () => {
      vm.radio = '0';
      this.search();
    });
    this.$on("init", () => {
      this.$nextTick(function() {
        if (vm.formInline.region.length != 0) {
          this.search();
        }
      });
    });
    this.$on("reset", () => {
    });
    this.$on("static", () => {
      vm.getStatic();
    });
  },
  methods: {
    getStatic() {
      // console.log(vm.timeInfoChild);
      let userAnalysisModel = vm.timeInfoChild.userAnalysisModel;
      setTimeout(function() {
        vm.educationDivision(userAnalysisModel.eduListInMap[0]);
        vm.jobDivision(userAnalysisModel.titleListInMap[0]);
        vm.getSexData(userAnalysisModel.sexListInMap[0]);
        vm.ageDivision(userAnalysisModel.ageListInMap[0]);
      },20);
    },
    search() {
      // let checkAll = operationData.hasAll(vm.formInline.organization);
      let req = {
        projectId: vm.projectId,
        beginDate: operationData.setDuringTime(vm.formInline.during, "begin"),
        endDate: operationData.setDuringTime(vm.formInline.during, "end"),
        hospitalIdList: vm.formInline.organization,
        originalFlag: vm.formInline.checked == false ? 2 : 1,
        regionId: vm.formInline.region[vm.formInline.region.length - 1],
        timeFlag: vm.formInline.timeFlag
      };
      // console.log("2 req", req);
      // openLoading(vm);
      vm.POST("stats/report/userAnalysis_pc/"+vm.radio, req).then(res => {
        // closeLoading(vm);
        if (res.code == "000000") {
          // if(res.data.educationList.length == 0 && res.data.jobTitle.length == 0 ) {
          //   vm.$message("没有相关数据，请重新选择查询范围");
          //   this.showData = false;
          // } else {
          //   this.showData = true;
          // }
          this.crowdData = res.data;
          setTimeout(function() {
            vm.educationDivision(res.data.eduList);
            vm.jobDivision(res.data.titleList);
            vm.getSexData(res.data.sexList);
            vm.ageDivision(res.data.ageList);
          },20);
        } else {
          vm.$message(res.message);
        }
      });
    },
    updateResize() {
      this.$nextTick(function() {
        window.onresize = function() {
          vm.echartsData.chart1.resize();
          vm.echartsData.chart2.resize();
          vm.echartsData.chart3.resize();
        };
      });
    },
    updateRadio(value) {
      if(vm.downloadId == null) {
        console.log(value,vm.radio);
        this.search();
      } else {
        let index = parseInt(value);
        let userAnalysisModel = vm.timeInfoChild.userAnalysisModel;
        setTimeout(function() {
          vm.educationDivision(userAnalysisModel.eduListInMap[index]);
          vm.jobDivision(userAnalysisModel.titleListInMap[index]);
          vm.getSexData(userAnalysisModel.sexListInMap[index]);
          vm.ageDivision(userAnalysisModel.ageListInMap[index]);
        },20);
      }
    },
    //用户性别分布
    getSexData(data) {
      let sexList = data;
      let sexData = [
        {
          color: '#1890FF',
          type: "男性",
          num: 0,
          rate: 0,
        },
        {
          color: '#FB5B52',
          type: "女性",
          num: 0,
          rate: 0,
        },
        {
          color: '#5D7092',
          type: "未完善信息",
          num: 0,
          rate: 0,
        }
      ];
      let sum = 0;

      if(sexList.length > 0) {
        for(let i = 0 ; i<sexList.length; i++) {
          sum += sexList[i].value;
        }
        sexData[0].num =  sexList[1].value;
        sexData[1].num =  sexList[2].value;
        sexData[2].num =  sexList[0].value;
        if(sum > 0) {
          sexData[0].rate = (sexList[1].value / sum *100).toFixed(1);
          sexData[1].rate = (sexList[2].value / sum *100).toFixed(1);
          sexData[2].rate = (sexList[0].value / sum *100).toFixed(1);
        }
      }
      // if(sexList.length >= 3) {
      //   sexData[1].num =  sexList[2].value;
      //   sexData[1].rate = (sexList[2].value / sum *100).toFixed(1);
      // }

      // console.log('this.$refs.ring0',this.$refs.ring0[0]);
      let myChartRing0 = echarts.init(this.$refs.ring0[0]);
      let option0 = chartData.ringOption(sexData[0].rate, sexData[0].color);
      myChartRing0.setOption(option0);

      let myChartRing1 = echarts.init(this.$refs.ring1[0]);
      let option1 = chartData.ringOption(sexData[1].rate, sexData[1].color);
      myChartRing1.setOption(option1);

      let myChartRing2 = echarts.init(this.$refs.ring2[0]);
      let option2 = chartData.ringOption(sexData[2].rate, sexData[2].color);
      myChartRing2.setOption(option2);

      vm.sexData = sexData;
    },
    educationDivision(data) {
      if(data.length == 0) {
        vm.showEducation = false;
        return;
      } else {
        vm.showEducation = true;
      }
      let educationList = data;
      let legendData = [];
      let seriesData = [];
      let colorData = ["#7453FF", "#3BA0FF", "#5D7092", "#39AF9A", "#FFBC3D", "#FF9A4B", "#B87F00"];

      for (let i = 0; i < educationList.length; i++) {
        legendData[i] = educationList[i].name;
        seriesData[i] = educationList[i];
      }
      let centerValue = ["242", "57.2%"];
      let option = chartData.getPicOption(
        "人员学历发布",
        legendData,
        colorData,
        seriesData,
        centerValue
      );
      setTimeout(function(){
        let myChart = echarts.init(vm.$refs.education);
        myChart.setOption(option);
        vm.echartsData.chart1 = myChart;
      },20);
    },
    jobDivision(data) {
      if(data.length == 0) {
        vm.showJob = false;
        return;
      } else {
        vm.showJob = true;
      }
      let titleList = data;
      let legendData = [];
      let seriesData = [];
      let colorData = ["#3BA0FF", "#366BCB", "#39AF9A", "#FFBC3D", "#FF9A4B", "#B87F00", "#7453FF"];
      for (let i = 0; i < titleList.length; i++) {
        legendData[i] = titleList[i].name;
        seriesData[i] = titleList[i];
      }
      let centerValue = ["242", "57.2%"];
      let option = chartData.getPicOption(
        "人员职务分布",
        legendData,
        colorData,
        seriesData,
        centerValue,
      );
      setTimeout(function(){
        let myChart2 = echarts.init(vm.$refs.job);
        myChart2.setOption(option);
        vm.echartsData.chart2 = myChart2;
      },20);
    },
    ageDivision(data) {
      if(data.length == 0) {
        vm.showAge = false;
        return;
      } else {
        vm.showAge = true;
      }
      let xAxisData = [];
      let seriesData = [];
      let ageList = data;
      for (let i = 0; i < ageList.length; i++) {
        // xAxisData[i] = ageList[i].name;
        if(ageList[i].value != 0) {
          xAxisData.push(ageList[i].name);
        }
      }
      for (let i = 0; i < ageList.length; i++) {
        // seriesData[i] = ageList[i].value;
        if(ageList[i].value != 0) {
          seriesData.push(ageList[i].value);
        }
      }
      let option = chartData.getBarOption(xAxisData, seriesData);

      setTimeout(function(){
        let myChart3 = echarts.init(vm.$refs.age);
        myChart3.setOption(option);
        vm.echartsData.chart3 = myChart3;
      },20);
    }
  }
};
</script>
<style lang="scss">
.crowd-analysis-wrap {
  // background: #fff;
  overflow: hidden;
  // padding: 10px;
  overflow-x: auto;
  .header-title {
    padding: 10px 12px;
    font-size: 12px;
    color: #449284;
    border-bottom: 1px solid #efefef;
  }
  .crowd-radio {
    position: relative;
    left: 50%;
    margin-top: 25px;
    margin-left: -119px;
    .is-active {
      .el-radio-button__inner {
        // background: #fff;
        // color: #409EFF;
      }
    }
  }
  .empty {
    height: 300px;
    line-height: 300px;
    color: #FF3399;
    text-align: center;
  }
  .spacing {
    position: relative;
    width: 100%;
    height: 20px;
    background: #f0f2f5;
  }
  .chart {
    position: relative;
    margin: 20px auto 0 auto;
    width: 1124px;
    overflow-x: hidden;
    .empty-left {
      position: relative;
      float: left;
      margin-right: 20px;
      padding: 0;
      width: 552px;
      height: 360px;
      display: flex;
      background: #ffffff;
      .title {
        position: relative;
        margin-top: 20px;
        margin-left: 20px;
        font-size: 18px;
        font-weight: bold;
      }
      img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        height: 24px;
        width: 106px;
      }
    }
    
    .item {
      position: relative;
      float: left;
      margin-right: 20px;
      padding: 0;
      // width: 48%;
      width: 552px;
      height: 360px;
      background: #ffffff;
      // border: 1px solid #dedede;
      .title {
        position: relative;
        margin-top: 20px;
        margin-left: 20px;
        font-size: 18px;
        font-weight: bold;
      }
      .sex {
        position: relative;
        top: 67px;
        left: 0;
        .sex-item {
          float: left;
          width: 184px;
          .sex-img {
            margin: 0 auto;
            position: relative;
            // left: 16%;
            height: 125px;
            width: 125px;
          }
          .sex-num {
            margin-top: 18px;
            height:24px;
            line-height:24px;
            font-size:24px;
            font-weight:600;
            text-align: center;
          }
          .sex-type {
            margin-top: 8px;
            height:14px;
            font-size:14px;
            color: #999999;
            text-align: center;
          }
        }
      }
    }
    .item-right {
      margin-right: 0;
    }
  }
}
</style>