<template>
  <div class="app-container">
    <div class="search-div">
      <el-form ref="dataForm" :inline="true" :model="listQuery" :rules="rules" class="form-container">
        <el-row>
          <el-form-item prop="deptId">
            <el-select v-model="listQuery.deptId" placeholder="考核部门" @change="changeDept">
              <el-option
                v-for="item in deptList"
                :key="item.id"
                :label="item.simplename"
                :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item prop="subDeptId" >
            <el-select v-model="listQuery.subDeptId" :disabled="!listQuery.deptId" placeholder="下属部门" clearable @change="changeSubDept">
              <el-option
                v-for="item in subDeptList"
                :key="item.id"
                :label="item.simplename"
                :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item prop="indexMenuId">
            <el-select v-model="listQuery.indexMenuId" placeholder="指标名称">
              <el-option
                v-for="item in menuList"
                :key="item.id"
                :label="item.indexMenu"
                :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item prop="statisticsTime">
            <el-date-picker
              v-model="listQuery.statisticsTime"
              type="year"
              placeholder="年份"
              value-format="yyyy"
              size="middle"/>
          </el-form-item>
          <el-button type="primary" size="middle" @click="search">查询</el-button>
        </el-row>
      </el-form>
      <el-row style="margin-top: 40px">
        <el-col :span="6" :offset="10">
          <span class="chart-title">{{ title }}</span>
        </el-col>
      </el-row>
      <div class="chart-body">
        <ve-histogram
          :loading="loading"
          :data="chartData"
          :settings="chartSettings"
          :extend="extend"
          :data-empty="dataEmpty"
          :legend-visible="false"/>
      </div>
    </div>
  </div>
</template>

<script>
import selectTree from '@/components/SelectTree/singleSelect'
import { alarmIndexAnalysis, getMenuByDepartment } from '@/api/assessResult'
import { getDeptList } from '@/api/assessRules'

export default {
  name: 'AlarmIndex',
  components: { selectTree },
  data() {
    return {
      alarmValue: '',
      chartSettings: {
        // axisSite: { right: ['value2'] },
        // yAxisType: ['number', 'percent'],
        yAxisName: ['分数'],
        xAxisName: '月份',
        labelMap: {
          'text': '月份',
          'value': '分数'
        },
        showLine: ['value2']
      },
      extend: {
        series: {
          // label: { show: true, position: 'top' },
          itemStyle: {
            normal: {
              barBorderRadius: [3, 3, 0, 0],
              color: function(params) {
                var colorList = [
                  '#f67287',
                  '#65d186'
                ] // 每根柱子的颜色
                if (parseInt(params.value) < 8) return colorList[0]
                else return colorList[1]
              }
            }
          },
          barMaxWidth: 30
        },
        xAxis: {
          axisLabel: {
            // rotate: 25 // 代表逆时针旋转45度
          }
        }
      },
      listQuery: {
        deptId: '',
        subDeptId: '',
        indexMenuId: '',
        statisticsTime: ''
      },
      rules: {
        indexMenuId: [{ required: true, message: '指标名称必选', trigger: ['blur', 'change'] }],
        statisticsTime: [{ required: true, message: '年份必选', trigger: ['blur', 'change'] }],
        subDeptId: [{ required: true, message: '下属部门必选', trigger: ['blur', 'change'] }]
      },
      menuList: [],
      title: '',
      deptName: '',
      menuName: '',
      deptId: '',
      dateRange: [],
      typeList: [],
      deptList: [],
      subDeptList: [],
      deviceTypeList: [],
      showDeviceType: true,
      chartData: {
        columns: ['text', 'value', 'value2'],
        rows: []
      },
      dataEmpty: false,
      loading: true,
      hasQuery: false,
      colorList: [
        '#f67287',
        '#65d186'
      ]
    }
  },
  created() {
    this.hasQuery = false
    // 如果路径里带参数，解析devcode参数
    var row = this.$route.query
    if (row) {
      this.hasQuery = true
      this.deptName = row.deptName
      this.listQuery.deptId = row.deptid
      this.listQuery.subDeptId = row.subdeptid
      this.listQuery.indexMenuId = row.id
    }
    this.listQuery.statisticsTime = new Date().Format('yyyy')
    this.fetchDeptList()
    this.fetchData()
  },
  activated() {
    this.hasQuery = false
    // 如果路径里带参数，解析devcode参数
    var row = this.$route.query
    if (row) {
      this.hasQuery = true
      this.deptName = row.deptName
      this.listQuery.deptId = row.deptid
      this.listQuery.subDeptId = row.subdeptid
      this.listQuery.indexMenuId = row.id
    }
    this.listQuery.statisticsTime = new Date().Format('yyyy')
    this.fetchDeptList()
    this.fetchData()
  },
  mounted() {
    this.hasQuery = false
  },
  methods: {
    // 查询数据
    search() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.fetchData()
        }
      })
    },
    // 获取数据
    fetchData() {
      this.listLoading = true
      alarmIndexAnalysis(this.listQuery).then(response => {
        debugger
        var data = response.data
        for (var i = 0; i < data.dataList.length; i++) {
          data.dataList[i].value2 = data.dataList[i].value
        }
        this.alarmValue = data.alarmValue
        this.chartData.rows = data.dataList
        this.listLoading = false
        // for (var j = 0; j < this.chartData.rows.length; j++) {
        //   if (parseInt(this.chartData.rows[j].value) < 9) {
        //     this.extend.series.itemStyle.normal.color = this.colorList[0]
        //   } else {
        //     this.extend.series.itemStyle.normal.color = this.colorList[1]
        //   }
        // }
      })
    },
    fetchDeptList() {
      getDeptList('24').then(response => {
        this.deptList = response.data
        if (!this.hasQuery) {
          this.deptName = this.deptList[0].simplename
          this.listQuery.deptId = this.deptList[0].id
        }
        if (this.listQuery.deptId) {
          getDeptList(this.listQuery.deptId).then(response => {
            this.subDeptList = response.data
            if (!this.hasQuery) {
              this.listQuery.subDeptId = response.data[0].id
            }
            const query = {
              deptid: this.listQuery.subDeptId
            }
            getMenuByDepartment(query).then(response => {
              this.menuList = response.data
              if (!this.hasQuery) {
                this.listQuery.indexMenuId = response.data[0].id
              }
              this.menuName = response.data[0].indexMenu
            })
          })
        }
      })
    },
    changeDept() {
      this.listQuery.subDeptId = ''
      this.listQuery.indexMenuId = ''
      // 清除验证
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      if (this.listQuery.deptId) {
        getDeptList(this.listQuery.deptId).then(response => {
          this.subDeptList = response.data
          // this.listQuery.subDeptId = response.data[0].id
        })
      }
    },
    changeSubDept() {
      this.listQuery.indexMenuId = ''
      // 清除验证
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      const query = {
        deptid: this.listQuery.subDeptId
      }
      getMenuByDepartment(query).then(response => {
        this.menuList = response.data
        this.listQuery.indexMenuId = response.data[0].id
        this.menuName = response.data[0].indexMenu
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .app-container{
    padding: 10px;
  }
  $tableTitleHeight:46px;
  .table{
    margin-bottom: 20px;
  }
  .chart-title{
    text-align: center;
    font-size:19px;
    font-weight:600;
    margin-top: 40px
  }
  .pagination-container{
    margin-bottom: 50px;
  }
  .table-title{
    background-color:rgba(243, 243, 243, 1);
    height: $tableTitleHeight;
    .title-header{
      line-height:$tableTitleHeight;
      color: #606266;
      font-size: 15px;
      i{
        margin-left: 5px;
        margin-right: 5px;
      }
    }
  }
  .edit_btns{
    .edit_btn{
      float:right;
      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
    }
  }
  .warning-state{
    color:red
  }
</style>