<template>
  <div class="crowd-analysis-wrap">
    <el-radio-group class="crowd-radio" v-model="radio" size="small" @change="updateRadio">
      <el-radio-button label="1">全部用户</el-radio-button>
      <el-radio-button label="2">参与项目</el-radio-button>
      <el-radio-button label="3">通过项目</el-radio-button>
    </el-radio-group>
    <div class="chart">
      <div class="item" id="education" ref="education"></div>
      <div class="item item-right" id="job" ref="job"></div>
      <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">
            <p class="sex-type">{{ item.type }}</p>
            <p></p>
            <p class="sex-num">{{ item.num }}</p>
          </div>
        </div>
      </div>
      <div class="item item-right" id="age" ref="age"></div>
    </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 echarts from "echarts";
import { setTimeout } from "timers";
let vm = null;
export default {
  components: {
    BreadCrumb
  },
  props: {
    formInline: {
      type: Object
    },
    activeName: {
      type: String
    }
  },
  data() {
    return {
      radio: 1,
      updateCrowd: false,
      sexData: []
    };
  },
  created() {
    vm = this;
    this.$nextTick(function() {
      this.search();
    });
  },
  mounted: function() {
    commonUtil.resizeHeight();
    //父组件传值
    this.$on("search", () => {
      this.updateCrowd = true;
      this.search();
    });
    this.$on("init", () => {
      this.$nextTick(function() {
        this.search();
      });
    });
    if (this.activeName == "second") {
      this.updateResize();
    }
  },
  methods: {
    search() {
      if (this.activeName == "second") {
        this.getEducationData();
        this.getJobData();
        this.getSexData();
        this.getAgeData();
      }
    },
    updateResize() {
      this.$nextTick(function() {
        let chartEducation = echarts.init(document.getElementById("education"));
        let chartJob = echarts.init(document.getElementById("job"));
        let chartAge = echarts.init(document.getElementById("age"));
        window.onresize = function() {
          chartEducation.resize();
          chartJob.resize();
          chartAge.resize();
        };
      });
    },
    updateRadio(value) {
      console.log(value);
      this.search();
    },
    //用户学历分布
    getEducationData() {
      let data = [22, 50, 350, 80, 95];
      if (this.updateCrowd == true) {
        data = [33, 90, 100, 22, 75];
      }
      this.educationDivision(data);
    },
    //用户职务分布
    getJobData() {
      let data = [27, 70, 65, 50];
      this.jobDivision(data);
    },
    //用户性别分布
    getSexData() {
      this.sexData = [
        {
          src: require("../../assets/image/man.png"),
          type: "男性",
          num: 21715
        },
        {
          src: require("../../assets/image/weman.png"),
          type: "女性",
          num: 19715
        },
        {
          src: require("../../assets/image/question.png"),
          type: "未完善信息",
          num: 1715
        }
      ];
    },
    //用户年龄分布
    getAgeData() {
      let data = [1000, 25000, 15000, 8000, 7000, 500];
      this.ageDivision(data);
    },
    educationDivision(data) {
      let myChart = echarts.init(this.$refs.education);
      let legendData = ["博士", "硕士", "本科", "大专", "大专以下"];
      let colorData = ["#FF9F7F", "#FFDB5C", "#E062AE", "#37A2DA", "#67E0E3"];
      let seriesData = [
        { value: 22, name: "博士" },
        { value: 50, name: "硕士" },
        { value: 350, name: "本科" },
        { value: 80, name: "大专" },
        { value: 95, name: "大专以下" }
      ];
      for (let i = 0; i < data.length; i++) {
        seriesData[i].value = data[i];
      }
      let option = operationData.getPicOption(
        "用户学历分布",
        legendData,
        colorData,
        seriesData
      );
      myChart.setOption(option);
    },
    jobDivision(data) {
      let myChart = echarts.init(this.$refs.job);
      let legendData = ["医生", "护士", "医护人员", "其他"];
      let colorData = ["#FF9F7F", "#37A2DA", "#67E0E3", "#FFDB5C"];
      let seriesData = [
        { value: 270, name: "医生" },
        { value: 70, name: "护士" },
        { value: 65, name: "医护人员" },
        { value: 50, name: "其他" }
      ];
      for (let i = 0; i < data.length; i++) {
        seriesData[i].value = data[i];
      }
      let option = operationData.getPicOption(
        "用户职务分布",
        legendData,
        colorData,
        seriesData
      );
      myChart.setOption(option);
    },
    ageDivision(data) {
      let myChart = echarts.init(this.$refs.age);
      let xAxisData = [
        "16-30",
        "30-40",
        "40-50",
        "50-60",
        "60以上",
        "未完善信息"
      ];
      let seriesData = data;
      let option = operationData.getBarOption(xAxisData, seriesData);

      myChart.setOption(option);
    }
  }
};
</script>
<style lang="scss">
.crowd-analysis-wrap {
  background: #fff;
  padding: 10px;
  .header-title {
    padding: 10px 12px;
    font-size: 12px;
    color: #449284;
    border-bottom: 1px solid #efefef;
  }
  .crowd-radio {
    position: relative;
    left: 50%;
    margin-left: -119px;
    .is-active {
      .el-radio-button__inner {
        // background: #fff;
        // color: #409EFF;
      }
    }
  }
  .chart {
    position: relative;
    margin: 20px auto 0 auto;
    width: 100%;
    overflow: auto;
    .item {
      position: relative;
      float: left;
      margin-top: 20px;
      padding: 0;
      width: 48%;
      // height: 20vw;
      height: 350px;
      border: 1px solid #dedede;
      .title {
        position: relative;
        margin: 10px auto;
        text-align: center;
        font-weight: bold;
      }
      .sex {
        position: relative;
        top: 0;
        left: 0;
        .sex-item {
          float: left;
          height: 350px;
          width: 33.3%;
          .sex-img {
            margin: 0 auto;
            position: relative;
            left: 10%;
            width: 80%;
          }
          .sex-type {
            text-align: center;
          }
          .sex-num {
            margin-top: 40px;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
          }
        }
      }
    }
    .item-right {
      float: right;
    }
  }
}
</style>