<template>
    <div class="index">
        <el-card class="box-card">
            <div class="flex jsa">
                <div v-for="(item, index) in topList" :key="item.type" class="f1 p20">
                    <div class="flex top">
                        <img :src="imgList[index]" alt="">
                        <div>
                            <div class="title">{{['昨日新增简历', '上周新增简历', '简历投递总数'][item.type]}}</div>
                            <div class="number" :style="{color: colorList[index]}">{{item.countSize}}</div>
                        </div>
                    </div>
                    <div class="ml5">
                        <div class="time">统计时间：{{$utils.formatYMD(item.countTime) + ' ' + '12:00' + ' ' +'pm'}}</div>
                        <div class="slider" :style="{ background: colorList[index] }">
                            <div class="slider-son" :style="{ background: '#fff', height: '100%', width: item.socialRecruitmentSize / (item.schoolRecruitmentSize + item.socialRecruitmentSize) * 100 + '%', opacity: 0.5}" ></div>
                        </div>
                        <div class="flex jsb recruit">
                            <div>校招:{{item.schoolRecruitmentSize}}</div>
                            <div>社招:{{item.socialRecruitmentSize}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
        <div style="height:20px"></div>
        <!-- <el-card class="box-card"> -->
        <div class="flex" style="margin-bottom:20px">
            <el-card class="box-card" style="width: 60%;margin-right:20px">
                <div ref="mychart1" :style="{width: '100%', height: '500px'}"></div>
            </el-card>
            <el-card class="box-card" style="width: 40%">
                <div ref="mychart2" :style="{width: '100%', height: '500px'}"></div>
            </el-card>
        </div>
        <!-- </el-card> -->
    </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      imgList: [
        require('../../public/img/bar-chart-grouped-line.png'),
        require('../../public/img/line-chart-line.png'),
        require('../../public/img/pie-chart-line.png')
      ],
      colorList: ['#4089FF', '#25D096', '#F34D4E'],
      breadData: [],
      topList: [],
      schoolRecruit: [],
      schoolWeek: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.queryData1()
      this.queryData2()
    })
  },
  methods: {
    queryData1 () {
      this.$api
        .post('/chart/resumeTotal', {
          reqdata: {}
        })
        .then((res) => {
          this.breadData = res.object.pieChartDtoList.map(item => ({ value: item.countSize, name: item.platformName }))
          this.topList = res.object.resumeTotal
          this.initChart2()
        })
    },
    queryData2 () {
      this.$api
        .post('/chart/getResumeChart', {
          reqdata: {
            recruitType: 0
          }
        })
        .then((res) => {
          console.log(res)
          this.timeList = res.object.weekList || []
          this.clubRecruit = res.object.countList || []
          this.clubTotal = res.object.countTotal
          this.clubWeek = this.clubRecruit[this.clubRecruit.length - 1]
          this.$api
            .post('/chart/getResumeChart', {
              reqdata: {
                recruitType: 1
              }
            })
            .then((res) => {
              let arr = []
              let length = this.timeList.indexOf(res.object.weekList && res.object.weekList[0])
              arr.length = length === -1 ? 0 : length
              this.schoolRecruit = [...arr, ...(res.object.countList || [])]
              this.schoolWeek = this.schoolRecruit[this.schoolRecruit.length - 1]
              this.initChart1()
            })
        })
    },
    initChart1 () {
      let myChart = echarts.init(this.$refs.mychart1)
      myChart.setOption({
        title: {
          text: '简历投递信息'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['校招投递简历', '社招投递简历']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.timeList.map(item => item.substring(0, 10)),
          axisLabel: {
            interval: 0,
            rotate: -80
          }
        },
        yAxis: {
          type: 'value'
        },
        color: ['#25D096', '#F34D4E'],
        series: [{
          name: '校招投递简历',
          type: 'line',
          data: this.schoolRecruit
        },
        {
          name: '社招投递简历',
          type: 'line',
          data: this.clubRecruit
        }
        ]
      })
      setTimeout(function () {
        window.onresize = function () {
          myChart.resize()
        }
      }, 200)
    },
    initChart2 () {
      let myChart = echarts.init(this.$refs.mychart2)
      let option = {
        title: {
          text: '社招各平台投递总数占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          bottom: 0,
          left: 'center',
          data: ['51job', '智联招聘', '58同城']
        },
        color: this.colorList,
        series: [
          {
            name: '来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.breadData
          }
        ]
      }
      myChart.setOption(option)
      setTimeout(function () {
        window.onresize = function () {
          myChart.resize()
        }
      }, 200)
    }
  }
}
</script>

<style lang="scss" scoped>
    .f1 {
        width: 300px;
    }
    .jsa {
        justify-content: space-around;
    }
    .fdc {
        flex-direction: column;
    }
    .flex {
        display: flex;
    }
    .jsb {
        justify-content: space-between;
    }
    .p20 {
        padding: 20px 50px;
    }
    .top {
        margin-bottom: 20px;
    }
    img {
        width: 100px;
        // height: 60px;
        height: 100px;
        margin-right: 20px;
    }
    .title {
      margin-top: 5px;
        font-size: 24px;
        margin-bottom: 14px;
    }
    .number {
        font-size: 38px;
        padding-bottom: 20px;
    }
    .time {
        color: #777;
        padding-bottom: 10px;
        font-size: 10px;
    }
    .ml5 {
        margin-left: 10px;
    }
    .slider {
        margin-bottom: 10px;
        height: 15px;
        position: relative;
        &-son {
            position: absolute;
            right: 0;
        }
    }
    .recruit {
        font-size: 12px;
    }
</style>
