<template>
  <div class="app-container">
    <div class="tab_box">
      <span :class="type === 1 ? `active` : ''" @click="changeType(1 , `职能管理部门`)">
        职能管理部门
      </span>
      <span :class="type === 2 ? `active` : ''" @click="changeType(2 , `生产运行部门`)">
        生产运行部门
      </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>
      <topBigChart
        :type="type"
        :queryParams="queryParams"
        ref="topBigChartRef"
      />
    </div>

    <p>
      <span> 岗检覆盖率： </span>
      <el-select v-model="selType" placeholder="请选择岗检覆盖率" @change="changeCover">
        <el-option label="公司" :value="1"></el-option>
        <el-option label="部门" :value="2"></el-option>
        <el-option label="关键岗位" :value="3"></el-option>
      </el-select>
    </p>

    <div class="center_top_chart_box">
      <topLeftOneChart
        :type="type"
        :queryParams="queryParams"
        :selType="selType"
        ref="topLeftOneChartRef"
      />
      <topLeftTwoChart
        :type="type"
        :queryParams="queryParams"
        :selType="selType"
        ref="topLeftTwoChartRef"
      />
    </div>
    <div class="center_top_chart_box">
      <topCenterChart
        :type="type"
        :queryParams="queryParams"
        ref="topCenterChartRef"
      />
      <topRigthChart
        :type="type"
        :queryParams="queryParams"
        ref="topRigthChartRef"
      />
    </div>

    <div class="top_center_chart_box">
      <h3>岗检问题属性及类别占比</h3>
      <centerBigchart
        :type="type"
        :queryParams="queryParams"
        ref="centerBigchart"
      />
    </div>

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

    <h3>部门详情</h3>
    <AtopForm :type="type" ref="AtopFormtRef" />
  </div>
</template>

<script>
import topBigChart from '../topBigChart.vue'
import topLeftChart from '../topLeftChart.vue'
import topLeftOneChart from '../topLeftOneChart.vue'
import topLeftTwoChart from '../topLeftTwoChart.vue'
import topCenterChart from '../topCenterChart.vue'
import topRigthChart from '../topRigthChart.vue'
import centerBigchart from '../centerBigchart.vue'
import bottomChart from '../bottomChart.vue'

import AtopForm from '../AtopForm.vue'
import { deptTree } from '@/api/allApi/index.js'
export default {
  name: 'PostCheckWebIndex',
  components: {
    topBigChart,
    topLeftChart,
    topCenterChart,
    topRigthChart,
    centerBigchart,
    bottomChart,
    AtopForm,
    topLeftOneChart,
    topLeftTwoChart
  },

  data() {
    return {
      title:"职能管理部门",
      selType: 1,
      type: 1,
      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.topBigChartRef.initList()
        this.$refs.topLeftOneChartRef.initList()
        this.$refs.topLeftTwoChartRef.initList()
        this.$refs.topCenterChartRef.initList()
        this.$refs.topRigthChartRef.initList()
        this.$refs.centerBigchart.initList()
        this.$refs.bottomChart.initList()
        this.$refs.AtopFormtRef.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.$nextTick(()=>{
        this.handleQuery()
      })
    },
    changeCover(val){
      this.$nextTick(()=>{
        this.$refs.topLeftOneChartRef.initList()
        this.$refs.topLeftTwoChartRef.initList()
      })
    }
  }
}
</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: 20rem;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
</style>