<template>
  <div class="app-container">
    <div class="tab_box">
      <span :class="type === 3 ? `active` : ''" @click="changeType(3,`职能管理部门问题整改率`)">
        职能管理部门
      </span>
      <span :class="type === 4 ? `active` : ''" @click="changeType(4,`生产运行部门问题整改率`)">
        生产运行部门
      </span>
    </div>
    <el-form ref="queryForm" size="small" :inline="true">
      <el-form-item label="年度：">
        <el-date-picker
          v-model="queryParams.year"
          style="width: 150px"
          type="year"
          placeholder="选择年度"
          format="yyyy 年"
          value-format="yyyy"
          :clearable="false"
        />
      </el-form-item>
      <el-form-item label="部门：">
        <el-cascader
          style="width: 300px"
          v-model="unitId1"
          :options="postOptions"
          @change="handleChange"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>


    <div class="top_center_chart_box">
      <h3>{{ title }}</h3>
      <topBigZhu :type="type" :queryParams="queryParams" ref="topBigZhuRef" />
    </div>

    <div class="center_top_chart_box">
      <twoTopLeftPie :type="type" :queryParams="queryParams" ref="twoTopLeftPieRef" />
      <twoTopRightZhu :type="type" :queryParams="queryParams" ref="twoTopRightZhuRef" />
    </div>

    <div class="top_center_chart_box_three">
      <leftZhu  :type="type" :queryParams="queryParams" ref="leftZhuRef"/>
      <leftCenterZhu  :type="type" :queryParams="queryParams" ref="leftCenterZhuRef"  />
      <rightZhu  :type="type" :queryParams="queryParams" ref="rightZhuRef"  />
    </div>

    <!-- <div class="top_center_chart_box" style="margin-top: 50px">
      <h3>历年岗检问题数量</h3>
      <bottomChart :type="type" :queryParams="queryParams" ref="bottomChart" />
    </div> -->

    <h3>各部门整改率对比排名</h3>
    <AbottomForm :type="type" ref="AbottomFormRef" :queryParams="queryParams"/>
  </div>
</template>

<script>
import topRigthChart from '../topRigthChart.vue'
import centerBigchart from '../centerBigchart.vue'
import bottomChart from '../bottomChart.vue'
import AbottomForm from '../AbottomForm.vue'

import topBigZhu from '../problemStatistics/topBigZhu.vue';
import leftZhu from '../problemStatistics/leftZhu.vue';
import leftCenterZhu from '../problemStatistics/leftCenterZhu.vue';
import twoTopLeftPie from '../problemStatistics/twoTopLeftPie.vue';
import twoTopRightZhu from '../problemStatistics/twoTopRightZhu.vue';
import rightZhu from '../problemStatistics/rightZhu.vue';
import {
  deptTree
} from '@/api/allApi/index.js'
export default {
  name: 'PostCheckWebIndex',
  components: {
    topRigthChart,
    centerBigchart,
    bottomChart,
    AbottomForm,
    topBigZhu,
    leftZhu,
    leftCenterZhu,
    twoTopLeftPie,
    twoTopRightZhu,
    rightZhu
  },
  data() {
    return {
      title:"职能管理部门问题整改率",
      type: 3,
      loading: false,
      postOptions:[],
      unitId1:[],
      queryParams :{
        year: new Date().toLocaleDateString().split('/')[0],
        postName: '',
        deptId:0
      }
    }
  },

  mounted() {
    this.queryParams.year = new Date().toLocaleDateString().split('/')[0]
    this.initDeptTree()
  },

  methods: {
    changeType(type , title) {
      this.type = type
      this.title = title
      this.$nextTick(()=>{
        this.$refs.topBigZhuRef.initList()
        this.$refs.twoTopLeftPieRef.initList()
        this.$refs.leftZhuRef.initList()
        this.$refs.leftCenterZhuRef.initList()
        this.$refs.rightZhuRef.initList()
        this.$refs.twoTopRightZhuRef.initList()
        this.$refs.AbottomFormRef.getList()
      })
    },
    handleChange(value) {
      this.queryParams.deptId = value[value.length - 1]
    },
    async initDeptTree() {
      const res = await deptTree()
      if (res.code !== 200) return this.$message.error(res.msg)
      this.postOptions = res.data
    },
       /** 搜索按钮操作 */
   handleQuery() {
      this.changeType(this.type)
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.unitId1 = []
      this.queryParams ={
        year: new Date().toLocaleDateString().split('/')[0],
        postName: '',
        deptId:0
      }
      this.handleQuery()
    },
  }
}
</script>

<style lang="scss" scoped>
.tab_box {
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 15px;
  padding-bottom: 10px;

  span {
    margin-right: 20px;
    font-weight: 700;
    cursor: pointer;
  }

  .active {
    padding-bottom: 10px;
    border-bottom: 3px solid #1890ff;
  }
}

.top_center_chart_box {
  width: 100%;
  height: 20rem;
}
.center_top_chart_box {
  width: 100%;
  height: 25rem;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.top_center_chart_box_three {
  display: flex;
  width: 100%;
  height: 20rem;
}
</style>