<template>
  <div class="app-container">

    <div class="company" v-if="!$store.state.user.tenantId">
      <el-input
        style="width: 200px"
        placeholder="公司名称"
        size="small"
        prefix-icon="el-icon-search"
        v-model="gsInfo.tenantName"
        @keyup.enter.native="getGsInfoList">
      </el-input>
      <div class="cp-content" style="width: 200px">
        <div :class="gsInfo.active_id===item.id?'cp-item active':'cp-item'" @click="changCompany(item.id)" v-for="item in gsInfo.list">{{ item.name }}</div>
      </div>
    </div>

    <div :class="$store.state.user.tenantId?'content-all':'content'">

      <div class="dashboard-editor-container">
        <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
          <!--月工资-->
          <div id="analysis1" style="height: 350px"></div>
        </el-row>

        <el-row :gutter="32">
          <el-col :xs="24" :sm="24" :lg="12">
            <div class="chart-wrapper">
              <dv-scroll-ranking-board :config="srbconfig" style="width:100%;height:350px" />
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="12">
            <div class="chart-wrapper">
              <div id="analysis2" style="height: 350px"></div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="24">
            <div class="chart-wrapper">
              <div id="analysis3" style="height: 350px"></div>
            </div>
          </el-col>
        </el-row>
      </div>

    </div>

  </div>
</template>

<script>
import { listTenant } from "@/api/pay/tenant";
import { getMonthPay, getDeptPay, getChuQin } from "@/api/pay/homepage";
import { scrollRankingBoard } from "@jiaminghi/data-view"
import { parseTime } from "@/utils/ruoyi";
import * as echarts from 'echarts'

let barChart1 = null;
let barChart2 = null;
let barChart3 = null;

function resizeFun() {
  barChart1.resize();
  barChart2.resize();
  barChart3.resize();
}

export default {
  name: 'Index',
  components: {
    scrollRankingBoard
  },
  data() {
    return {
      // 公司信息
      gsInfo:{
        tenantName:'',
        active_id:this.$store.state.user.tenantId,
        list:[]
      },
      lineChartData: {
        actualData: [],
        monthList: []
      },
      srbconfig: {
        data: [],
        rowNum: 6,
        unit: '天'
      },
      pieChartData: {
        year: null,
        month: null,
        workHours: []
      },
      barChartData: {
        year: null,
        month: null,
        departList: [],
        wages: []
      }
    }
  },
  created() {
    if (!this.$store.state.user.tenantId) {
      this.getGsInfoList()
    }else {
      this.gsInfo.active_id = this.$store.state.user.tenantId
      this.getReportDateList();
      this.handleLineList();
      this.getHours();
    }
  },
  methods: {
    // 获取左侧公司列表
    getGsInfoList(){
      listTenant({ name: this.gsInfo.tenantName }).then(response => {
        if(response.rows.length>0){
          this.gsInfo.list = response.rows;
          this.gsInfo.active_id = this.gsInfo.list[0].id
          this.getReportDateList();
          this.handleLineList();
          this.getHours();
        }else{
          this.$alert(`没有查到相关公司，暂无数据！`, `提示`, {
            type: 'warning'
          });
        }
      });
    },
    // 选择公司
    changCompany(id){
      this.gsInfo.active_id = id;
      this.reset();
      window.removeEventListener("resize", resizeFun);
      this.getReportDateList();
      this.handleLineList();
      this.getHours();
    },
    reset(){
      this.lineChartData= {
        actualData: [],
        monthList: []
      }
      this.srbconfig= {
        data: [],
        rowNum: 6,
        unit: '天'
      };
      this.pieChartData= {
        year: null,
        month: null,
        workHours: []
      };
      this.barChartData= {
        year: null,
        month: null,
        departList: [],
        wages: []
      };
    },
    handleLineList() {
      getMonthPay({ tenantId: this.gsInfo.active_id }).then(response => {
        response.rows.forEach(item => {
          this.lineChartData.actualData.push(Math.round(item.actuallyPayMoney * Math.pow(10, 2)) / Math.pow(10, 2))
          var month = null
          month = item.month + '月'
          this.lineChartData.monthList.push(month)
        })

        this.$nextTick(() => {
          this.initChart()
        })
      })
    },
    getReportDateList() {
      let query = {
        date: parseTime(new Date(), '{y}-{m}'),
        tenantId: this.gsInfo.active_id
      }
      getChuQin(query).then(res => {
        this.srbconfig.data = res.data;
        this.srbconfig = {...this.srbconfig};

        this.$nextTick(() => {
          this.initChart()
        })
      })
    },
    getHours() {
      getDeptPay({tenantId: this.gsInfo.active_id}).then(response => {
        response.rows.forEach(mon => {
          var list = {
            value: mon.dayWorkHours,
            name: mon.deptName
          }
          this.pieChartData.workHours.push(list);
          this.barChartData.departList.push(mon.deptName)
          this.barChartData.wages.push(mon.actuallyPayMoney)
        })
        if(response.rows.length>0){
          this.pieChartData.year = response.rows[0].year
          this.pieChartData.month = response.rows[0].month
          this.barChartData.year = response.rows[0].year
          this.barChartData.month = response.rows[0].month
        }

        this.$nextTick(() => {
          this.initChart()
        })
      })
    },
    initChart() {

      barChart1 = echarts.init(document.getElementById('analysis1'));
      barChart2 = echarts.init(document.getElementById('analysis2'))
      barChart3 = echarts.init(document.getElementById('analysis3'))

      barChart1.setOption({
        xAxis: {
          data: this.lineChartData.monthList,
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        legend: {
          // data: ['expected', 'actual']
          data: ['工资']
        },
        series: [
          {
            name: '工资',
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                }
              }
            },
            data: this.lineChartData.actualData,
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }]
      })

      barChart2.setOption({
        title: {
          text: this.pieChartData.year + '-' + this.pieChartData.month + '月工时',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '工时',
            type: 'pie',
            roseType: 'radius',
            radius: [15, 95],
            center: ['50%', '50%'],
            data: this.pieChartData.workHours,
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
        ]
      })

      barChart3.setOption({
        title: {
          text: this.barChartData.year + '-' + this.barChartData.month + '月工资',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {  // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 30,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.barChartData.departList,
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            interval: 0,
            formatter: function(value) {
              return value.split("").join("\n");
            }
          }
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          }
        }],
        series: [{
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: this.barChartData.wages,
          animationDuration: 6000
        }]
      })

      window.addEventListener("resize", resizeFun)
    },
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  .company {
    border-radius: 5px;
    width: 230px;
    height: calc(100vh - 115px);
    overflow-y: auto;
    .cp-content {
      margin-top: 20px;
      .cp-item {
        cursor: pointer;
        padding: 6px 10px 6px 5px;
        color: #424242;
        font-size: 14px;
        &:hover {
          background: #f6f6f6;
        }
      }
      .active{
        background: #edf6ff;
      }
    }
  }
  .content{
    padding-left: 15px;
    width: calc(100% - 250px);
    .el-button--medium {
      padding: 2px 0px;
    }
  }
  .content-all{
    width: 100%;
    .el-button--medium {
      padding: 2px 0px;
    }
  }
}
.dash {
  min-height: calc(100vh - 84px);
  text-align: center;
  background: #A0E1DD;
}
.biaoti {
  font-size: 60px;
  font-weight: bold;
  line-height: calc(100vh - 84px);
  text-shadow: 0px 0px 0 #fff, -1px -1px 0 #fff, -2px -2px 0 #fff,
  -3px -3px 0 #fff, -4px -4px 0 #fff,
  -5px -5px 5px rgb(0, 0, 0),
  -5px -5px 1px rgb(0, 0, 0);
}
.dv-scroll-ranking-board{
  color:#333;
}

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
