<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 v-show="!showData" class="empty">
      <p>"没有相关数据，请重新选择查询范围"</p>
    </div>
    <div class="chart" v-show="showData">
      <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 v-bind:src="item.src" class="sex-img" />
            <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 { $on, $off, $once, $emit } from '../../../utils/gogocodeTransfer'
import BreadCrumb from '../../components/breadcrumb.vue'
import { create } from 'domain'
import { mapGetters } from 'vuex'
import { openLoading, closeLoading } from '../../utils-o/utils'
import * as commonUtil from '../../utils-o/utils'
import * as operationData from '../../utils-o/operation'
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,
    },
  },
  data() {
    return {
      radio: 1,
      sexData: [],
      projectId: '',
      crowdData: {},
      showData: false,
      echartsData: {
        chart1: {},
        chart2: {},
        chart3: {},
      },
    }
  },
  created() {
    vm = this
    this.projectId = vm.getUrlSearch(window.location.href, 'id')
  },
  mounted: function () {
    // commonUtil.resizeHeight();
    //父组件传值
    $on(this, 'search', () => {
      vm.radio = 1
      this.search()
    })
    $on(this, 'init', () => {
      this.$nextTick(function () {
        if (vm.formInline.region.length != 0) {
          this.search()
        }
      })
    })
    $on(this, 'reset', () => {
      this.showData = false
      this.crowdData = {}
    })
    if (this.activeName == 'second') {
    }
  },
  methods: {
    search() {
      if (vm.formInline.region.length == 0) {
        const h = this.$createElement
        vm.$message({
          message: h(
            'p',
            { style: 'color: #FF3399' },
            '请先选择地区后再进行查询 '
          ),
        })
        return
      }
      let checkAll = operationData.hasAll(vm.formInline.organization)
      let req = {
        projectId: vm.projectId,
        cityOrHospitalId: operationData.getIds(
          vm.formInline,
          vm.organizationList,
          checkAll
        ),
        kind: operationData.getSearchType(vm.formInline, checkAll),
        type: vm.radio,
        originalFlag: vm.formInline.checked == false ? 0 : 1,
      }
      console.log('2 req', req)
      openLoading(vm)
      vm.reportGET('report/portal/getPeoplesDetails', 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()
            vm.jobDivision()
            vm.getSexData()
            vm.ageDivision()
          }, 20)
          // this.educationDivision();
          // this.jobDivision();
          // this.getSexData();
          // this.ageDivision();
        } 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) {
      console.log(value, vm.radio)
      this.search()
    },
    //用户性别分布
    getSexData() {
      let sexList = this.crowdData.sexList
      // if(sexList.length <3) {
      //   this.sexData = [];
      //   return;
      // }
      this.sexData = [
        {
          src: require('../../assets/image/man.png'),
          type: '男性',
          num: 0,
        },
        {
          src: require('../../assets/image/weman.png'),
          type: '女性',
          num: 0,
        },
        {
          src: require('../../assets/image/question.png'),
          type: '未完善信息',
          num: 0,
        },
      ]
      for (let i = 0; i < sexList.length; i++) {
        if (sexList[i].name == '男') {
          this.sexData[0].num = sexList[i].value
        } else if (sexList[i].name == '女') {
          this.sexData[1].num = sexList[i].value
        } else {
          this.sexData[2].num = sexList[i].value
        }
      }
    },
    educationDivision(data) {
      let myChart = echarts.init(this.$refs.education)
      let educationList = operationData.removeZero(this.crowdData.educationList)
      let legendData = []
      let seriesData = []
      let colorData = [
        '#FF9F7F',
        '#008000',
        '#E062AE',
        '#37A2DA',
        '#0050DC',
        '#67E0E3',
        '#8A2BE2',
      ]
      // for (let i = 0; i < educationList.length; i++) {
      //   legendData[i] = educationList[i].name;
      // }
      if (educationList.length > 0) {
        legendData = [
          '博士后',
          '博士',
          '硕士',
          '本科',
          '大专',
          '中专及以下',
          '其他',
        ]
      }
      seriesData = educationList
      let option = operationData.getPicOption(
        '用户学历分布',
        legendData,
        colorData,
        seriesData
      )
      myChart.setOption(option)
      vm.echartsData.chart1 = myChart
      vm.updateResize()
    },
    jobDivision(data) {
      let myChart2 = echarts.init(this.$refs.job)
      let jobTitle = operationData.removeZero(this.crowdData.jobTitle)
      let legendData = []
      let seriesData = []
      let colorData = [
        '#FF9F7F',
        '#008000',
        '#E062AE',
        '#37A2DA',
        '#0050DC',
        '#67E0E3',
        '#8A2BE2',
      ]
      for (let i = 0; i < jobTitle.length; i++) {
        legendData[i] = jobTitle[i].name
      }
      seriesData = jobTitle
      let option = operationData.getPicOption(
        '用户职务分布',
        legendData,
        colorData,
        seriesData
      )
      myChart2.setOption(option)
      vm.echartsData.chart2 = myChart2
      vm.updateResize()
    },
    ageDivision(data) {
      let myChart3 = echarts.init(this.$refs.age)
      let xAxisData = []
      let seriesData = []
      let ageList = this.crowdData.ageList
      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 = operationData.getBarOption(xAxisData, seriesData)

      myChart3.setOption(option)
      vm.echartsData.chart3 = myChart3
      vm.updateResize()
    },
  },
}
</script>

<style lang="scss">
.crowd-analysis-wrap {
  background: #fff;
  overflow: hidden;
  padding: 10px;
  .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;
  }
  .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: 15px auto 10px auto;
        font-size: 18px;
        text-align: center;
        font-weight: bold;
      }
      .sex {
        position: relative;
        top: 42px;
        left: 0;
        .sex-item {
          float: left;
          height: 350px;
          width: 33.3%;
          .sex-img {
            margin: 0 auto;
            position: relative;
            left: 10%;
            // width: 80%;
            width: 60%;
            margin-left: 10%;
          }
          .sex-type {
            text-align: center;
          }
          .sex-num {
            margin-top: 40px;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
          }
        }
      }
    }
    .item-right {
      float: right;
    }
  }
}
</style>
