<!--隐患统计--->
<template>
  <div class="page-container checkItem">
    <div class="page-container checkItem" v-if="pageType == 1">
      <div class="page-top-title-box">
        <p class="page-top-title-name-p">{{propsData.planTitle}}</p>
        <p class="page-top-title-out-p" @click="backPage">返回</p>
      </div>
      <div class="page-container-min checkItem-min scrollbar-box">
        <div class="hiddenDanger" id="hiddenDanger-box" v-if="identityType == 1"></div>
        <div class="tabs">
          <div class="tabs-li" :class="tabsIndex==index?'color-B':'color-A'" @click="tabsClick(index)"
               v-for="(item,index) in tabsList" :key="index">
            <img :src="tabsIndex==index?item.img2:item.img"/>
            <p>{{item.name}}</p>
          </div>
        </div>
        <div class="content-box scrollbar-box">
          <div class="page-form-title-box" style="border:none;">
            <el-form :model="queryParams" class="form-box" ref="queryForm"
                     :inline="true" style="width:100%;">
              <el-form-item label="" prop="deptId" v-if="identityType == 1">
                <el-select v-model="queryParams.deptId" placeholder="学院单位" style="width: 120px">
                  <el-option
                    v-for="dict in optionList"
                    :key="dict.deptId"
                    :label="dict.deptName"
                    :value="dict.deptId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="searchValue" v-if="identityType == 2">
                <el-input
                  maxLength="20"
                  v-model="queryParams.searchValue"
                  placeholder="实验室/房间号"
                  style="width: 120px"
                />
              </el-form-item>
              <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
              <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
              <div class="num-data-box">
                {{formTitleData}}
              </div>
              <p class="page-submit-common-style-button"
                 style="float: right;"
                 @click="tableButton(1)"

              >数据刷新</p>
              <el-form-item style="float: right;">
                <export-component :exportConfig="exportConfig"></export-component>
              </el-form-item>
            </el-form>
          </div>
          <!--校级列表-->
          <div class="page-content-box" style="padding-top:0;" v-if="tabsIndex==0">
            <el-table class="table-box" v-loading="loading" border ref="table-box" :data="dataList"
                      @selection-change="handleSelectionChange" :row-key="getRowKeys" @sort-change="sortChange">
              <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
              <el-table-column label="序号" type="index" width="60"/>
              <el-table-column label="学院单位" prop="deptName" v-if="identityType == 1" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.deptName}}</span>
                </template>
              </el-table-column>
              <el-table-column label="实验室名称" prop="subName" v-if="identityType != 1" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.subName}}</span>
                </template>
              </el-table-column>
              <el-table-column label="检查数" prop="checkNum" width="180" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.checkNum}}</span>
                </template>
              </el-table-column>
              <el-table-column label="隐患数" sortable="custom" prop="hazardNum" width="180" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.hazardNum}}</span>
                </template>
              </el-table-column>
              <el-table-column label="已整改数" prop="rectifyNum" width="180" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.rectifyNum}}</span>
                </template>
              </el-table-column>
              <el-table-column label="未整改数" prop="notRectifyNum" width="180" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.notRectifyNum}}</span>
                </template>
              </el-table-column>
              <el-table-column label="整改完成率" prop="ratio" width="180" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.ratio}}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="112" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div class="table-button-box">
                    <p class="table-button-null"></p>
                    <p class="table-button-p"
                       @click="tableButton(2,scope.row)"

                    >详情</p>
                    <p class="table-button-null"></p>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <pagination :page-sizes="[20, 30, 40, 50]"
                        v-show="total>0"
                        :total="total"
                        :page.sync="queryParams.page"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getList"
            />
          </div>
          <!--院级列表-->
          <div class="page-content-box" style="padding-top:0;" v-if="tabsIndex==1">
            <el-table class="table-box" v-loading="loading" border ref="table-box" :data="dataList" v-if="tableShowType"
                      @selection-change="handleSelectionChange" :row-key="getRowKeysTow" @sort-change="sortChange">
              <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
              <el-table-column label="序号" type="index" width="60"/>
              <el-table-column label="学院单位" prop="deptName" v-if="identityType == 1" show-overflow-tooltip/>
              <el-table-column label="实验室名称" prop="subName" v-if="identityType != 1" show-overflow-tooltip/>
              <el-table-column label="隐患总数" sortable="custom" prop="hazardNum" width="130" show-overflow-tooltip/>
              <el-table-column v-for="(item,index) in tableTitleList" :key="index"
                               :label="item.name" :prop="item.code" width="130" show-overflow-tooltip/>
              <el-table-column label="操作" width="112" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div class="table-button-box">
                    <p class="table-button-null"></p>
                    <p class="table-button-p"
                       @click="tableButton(3,scope.row)"

                    >详情</p>
                    <p class="table-button-null"></p>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <pagination :page-sizes="[20, 30, 40, 50]"
                        v-show="total>0"
                        :total="total"
                        :page.sync="queryParams.page"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getList"
            />
          </div>
        </div>
      </div>
    </div>
    <inspect-statistics :propsData="minPropsData" v-if="pageType == 2"></inspect-statistics>
    <inspection-items-statistics :propsData="minPropsData" v-if="pageType === 3"></inspection-items-statistics>
  </div>
</template>

<script>
  //import { getDicts } from "@/api/commonality/noPermission";
  //import { systemUserSelect } from "@/api/commonality/permission";
  import {
    securityIndexStatisticsUserIdentity,
    reportHazardReportOneHazardGaugeOutfit,
    securityDataStatisticsGetUserIdentity,
    securityHazardReportColumnPicture,
    reportHazardReportDeptList,
    reportHazardReportDeptTop,
    securityCheckDangerTodayDangerList,
    reportHazardReportItemsScatterDeptRefresh,
    reportHazardReportOneItemsScatter,
    reportHazardReportOneItemsScatterTop,
    reportHazardReportDeptListCollege,
    reportHazardReportDeptTopCollege,
    reportHazardReportOneItemsScatterCollege,
    reportHazardReportOneItemsScatterCollegeTop
  } from '@/api/safetyCheck/index'
  import {
    getDeptDropList
  } from '@/api/commonality/permission'
  import echarts from 'echarts'
  import inspectStatistics from '@/views/safetyCheck/components/inspectStatistics.vue'
  import inspectionItemsStatistics from '@/views/safetyCheck/components/inspectionItemsStatistics.vue'
  import exportComponent from '@/views/safetyCheck/components/exportComponent/exportComponent.vue'

  export default {
    name: 'checkItem',
    components: {
      inspectStatistics,
      inspectionItemsStatistics,
      exportComponent
    },
    props: {
      propsData: {}
    },
    data() {
      return {
        //用户身份状态
        identityType: 0,
        //导出配置
        exportConfig: {
          api: '',             //导出接口地址
          ids: '',                                       //勾选导出,勾选的IDS
          fileName: '',                         //导出文件的命名
          screenData: {}
        },
        //页面状态
        pageType: 1,
        //状态选项卡
        tableButtonCheckType: 1,
        //页面遮罩
        loading: false,
        //学院列表
        optionList: [],
        //查询条件
        queryParams: {
          page: 1,
          pageSize: 20,
          deptId: null,
          searchValue: '',
          sort: 'desc'
        },
        //查询头部数据
        formTitleData: '',
        tabsList: [
          {
            name: '各单位隐患整改统计',
            img: require('@/assets/ZDimages/securityCheck/icon_yhtj_wxz@1x.png'),
            img2: require('@/assets/ZDimages/securityCheck/icon_yhtj_zc@1x.png')
          },
          {
            name: '一级检查项隐患分布',
            img: require('@/assets/ZDimages/securityCheck/icon_yhfb_wxz@1x.png'),
            img2: require('@/assets/ZDimages/securityCheck/icon_yhfb_xz@1x.png')
          }
        ],
        tabsIndex: 0,
        //表头数据
        tableTitleList: [],
        //列表数据
        dataList: [],
        tableShowType: false,
        //数据数量
        total: 0,
        //组件传参
        minPropsData: {}
      }
    },
    created() {
      this.getDeptDropList()
      this.securityDataStatisticsGetUserIdentity()
    },
    mounted() {

    },
    methods: {
      //查询用户身份
      securityDataStatisticsGetUserIdentity() {
        this.$set(this, 'identityType', this.propsData.checkCategory)
        this.$nextTick(() => {
          if (this.identityType == 1) {
            this.securityHazardReportColumnPicture()
          }
          this.getList()
        })
        // securityDataStatisticsGetUserIdentity().then(response => {
        //   if(response.schoolAdmin){
        //     //校级管理员
        //     this.$set(this,'identityType',1);
        //     this.$nextTick(()=>{
        //       //查询隐患柱状图
        //       this.securityHazardReportColumnPicture();
        //     })
        //   }else if(response.collegeAdmin){
        //     //院级管理员
        //     this.$set(this,'identityType',2);
        //   }else{
        //     //无权限
        //     this.$set(this,'identityType',0);
        //   }
        //   this.$nextTick(()=>{
        //     this.getList();
        //   })
        // });
      },
      //查询隐患柱状图
      securityHazardReportColumnPicture() {
        securityHazardReportColumnPicture({ planId: this.propsData.planId }).then(response => {
          let nameList = []
          let dataList = []
          let num = 0
          for (let i = 0; i < response.data.length; i++) {
            nameList.push(response.data[i].deptShortName)
            dataList.push(response.data[i].hazardNum)
            if (response.data[i].hazardNum > num) {
              num = response.data[i].hazardNum
            }
          }
          this.eCharts(nameList, dataList, num)
        })
      },
      //隐患柱状图
      eCharts(nameList, dataList, num) {
        let myChart = this.$echarts.init(document.getElementById('hiddenDanger-box'))

        let option = {
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          title: {
            top: '5%',
            left: 'center',
            text: '各单位隐患数统计TOP25',
            textStyle: {
              align: 'center',
              color: '#333333',
              fontWeight: 400,
              fontSize: 16
            }
          },
          grid: {
            top: '24%',
            left: '3%',
            right: '4%',
            bottom: '6%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: nameList,
              axisLabel: {
                textStyle: {//改变X轴字体颜色
                  color: '#666666'

                },
                interval: 0,
                rotate: 40   //值>0向右倾斜，值<0则向左倾斜
              },
              axisTick: {//去掉X轴刻度
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#D8D8D8'//改变X轴颜色

                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',

              nameTextStyle: {
                color: '#fff',
                align: 'left'
              },
              splitLine: {           // 分隔线
                show: true,        // 默认显示，属性show控制显示与否
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: ['#171f2d'],
                  width: 1,
                  type: 'solid',
                  opacity: 0.2
                }

              },
              axisLabel: {
                textStyle: {//改变X轴字体颜色
                  color: '#666666'

                }
              },
              axisTick: {//去掉X轴刻度
                show: false
              },
              axisLine: {
                show: false
              }

            }
          ],
          series: [
            {
              name: '隐患统计数',
              label: {
                show: true,
                color: '#0183FA',
                position: 'top'
              },
              itemStyle: {
                normal: {
                  barBorderRadius: 2,
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#0183FA' },
                      { offset: 1, color: '#AED8FF' }
                    ]
                  )
                }

              },
              type: 'bar',
              barWidth: '20',
              data: dataList
            }
          ]
        }
        if (num < 5) {
          option.yAxis[0].max = 5
        } else {
          option.yAxis[0].min = 0
          option.yAxis[0].max = num // 计算最大值
          option.yAxis[0].interval = Math.ceil(num / 5) // 平均分为5份
        }
        myChart.setOption(option)
      },
      //选项卡切换
      tabsClick(index) {
        if (this.tabsIndex != index) {
          this.$set(this, 'tabsIndex', index)
          this.resetQuery()
        }
      },
      // 返回按钮
      backPage() {
        this.$parent.tableButton(6)
      },
      //查询按钮
      handleQuery() {
        this.$set(this.queryParams, 'page', 1)
        this.getList()
      },
      //重置按钮
      resetQuery() {
        this.$refs['table-box'].clearSelection()
        this.$set(this.exportConfig, 'ids', '')
        this.$set(this, 'queryParams', {
          page: 1,
          pageSize: 20,
          deptId: null,
          searchValue: '',
          sort: 'desc'
        })
        this.getList()
      },
      getRowKeys(row) {
        return row.deptId
      },
      getRowKeysTow(row) {
        return row.subId
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        if (this.identityType == 1) {
          this.$set(this.exportConfig, 'ids', selection.map(item => item.deptId))
        } else if (this.identityType == 2) {
          this.$set(this.exportConfig, 'ids', selection.map(item => item.subId))
        }
      },
      //时间排序方法
      sortChange(val) {
        if (val.prop == 'hazardNum') {
          this.$set(this.queryParams, 'sort', val.order == 'ascending' ? 'asc' : (val.order == 'descending' ? 'desc' : ''))
          this.handleQuery()
        }
      },
      //获取数据列表
      getList() {
        this.$set(this, 'tableShowType', false)
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        obj.planId = this.propsData.planId
        this.$set(this.exportConfig, 'customKey', 'planId')
        this.$set(this.exportConfig, 'customValue', obj.planId)
        this.$set(this.exportConfig, 'screenData', obj)
        //判断校级/院级/选项卡当前状态
        if (this.identityType == 1 && this.tabsIndex == 0) {
          // 各单位隐患整改统计列表-校级
          reportHazardReportDeptList(obj).then(response => {
            this.$set(this, 'dataList', response.data.records)
            this.$set(this, 'total', response.data.total)
          })
          reportHazardReportDeptTop(obj).then(response => {
            this.$set(this, 'formTitleData', response.data)
          })
          this.$set(this.exportConfig, 'api', '/security/hazardReport/export')
          this.$set(this.exportConfig, 'fileName', '各单位隐患整改统计')
        } else if (this.identityType == 1 && this.tabsIndex == 1) {
          //一级检查项隐患分布-列表表头数据
          reportHazardReportOneHazardGaugeOutfit({ checkCategory: this.propsData.checkCategory }).then(response => {
            this.$set(this, 'tableTitleList', response.data)
            this.$set(this, 'tableShowType', true)
            this.$nextTick(() => {
              // 一级检查项隐患分布-列表-校级
              reportHazardReportOneItemsScatter(obj).then(response => {
                this.$set(this, 'dataList', response.data.records)
                this.$set(this, 'total', response.data.total)
              })
              reportHazardReportOneItemsScatterTop(obj).then(response => {
                this.$set(this, 'formTitleData', response.data)
              })
              this.$set(this.exportConfig, 'api', '/security/checkDanger/oneItemsExport')
              this.$set(this.exportConfig, 'fileName', '一级检查项隐患分布')
            })
          })
        } else if (this.identityType == 2 && this.tabsIndex == 0) {
          // 各单位隐患整改统计列表-校级
          reportHazardReportDeptListCollege(obj).then(response => {
            this.$set(this, 'dataList', response.data.records)
            this.$set(this, 'total', response.data.total)
          })
          reportHazardReportDeptTopCollege(obj).then(response => {
            this.$set(this, 'formTitleData', response.data)
          })
          this.$set(this.exportConfig, 'api', '/security/hazardReport/exportCollege')
          this.$set(this.exportConfig, 'fileName', '各单位隐患整改统计')
        } else if (this.identityType == 2 && this.tabsIndex == 1) {
          //一级检查项隐患分布-列表表头数据
          reportHazardReportOneHazardGaugeOutfit({ checkCategory: this.propsData.checkCategory }).then(response => {
            this.$set(this, 'tableTitleList', response.data)
            this.$set(this, 'tableShowType', true)
            this.$nextTick(() => {
              // 一级检查项隐患分布-列表-校级
              reportHazardReportOneItemsScatterCollege(obj).then(response => {
                this.$set(this, 'dataList', response.data.records)
                this.$set(this, 'total', response.data.total)
              })
              reportHazardReportOneItemsScatterCollegeTop(obj).then(response => {
                this.$set(this, 'formTitleData', response.data)
              })
              this.$set(this.exportConfig, 'api', '/report/hazardReport/oneItemsExportCollege')
              this.$set(this.exportConfig, 'fileName', '一级检查项隐患分布')
            })
          })
        }
      },
      //操作按钮
      tableButton(type, row) {
        let self = this
        if (type == 1) {
          //数据刷新
          securityCheckDangerTodayDangerList().then(response => {
            if (response.data > 0) {
              reportHazardReportItemsScatterDeptRefresh().then(response => {
                this.msgSuccess(response.message)
                this.getList()
              })
            } else {
              this.msgSuccess('已是最新数据,无需更新.')
            }
          })
        } else if (type == 2) {
          //检查明细
          if (this.identityType == 1) {
            this.$set(this, 'minPropsData', {
              deptId: row.deptId,
              deptPlanId: this.propsData.planId,
              title: row.deptName
            })
          } else {
            this.$set(this, 'minPropsData', {
              subId: row.subId,
              subPlanId: this.propsData.planId,
              title: row.subName
            })
          }
          this.$set(this, 'pageType', 2)
        } else if (type == 3) {
          //检查项统计
          if (this.identityType == 1) {
            this.$set(this, 'minPropsData', {
              deptId: row.deptId,
              deptPlanId: this.propsData.planId,
              checkCategory: this.propsData.checkCategory,
              title: row.deptName
            })
          } else {
            this.$set(this, 'minPropsData', {
              subId: row.subId,
              subPlanId: this.propsData.planId,
              checkCategory: this.propsData.checkCategory,
              title: row.subName
            })
          }
          this.$set(this, 'pageType', 3)
        } else if (type == 6) {
          //返回并刷新
          this.$set(this, 'pageType', 1)
          this.getList()
          //查询隐患柱状图
          this.securityHazardReportColumnPicture()
        }
      },
      //学院列表
      getDeptDropList() {
        getDeptDropList({ deptName: '', level: 2, deptType: 1 }).then(response => {
          this.$set(this, 'optionList', response.data)
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .hiddenDanger {
    height: 320px;
  }

  .tabs {
    width: 100%;
    height: 50px;
    background: #F5F5F5;
    border-radius: 0px 0px 0px 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .tabs-li {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 256px;
      cursor: pointer;
      padding-left: 20px;
      box-sizing: border-box;
      > img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
      > p {
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 16px;
      }
    }
    .color-A {
      > p {
        color: #333333;
      }
    }
    .color-B {
      > p {
        color: #0183FA;
      }
    }
  }

  .num-data-box {
    display: inline-block;
    vertical-align: top;
    background: rgba(1, 131, 250, 0.2);
    color: #0183FA;
    font-size: 14px;
    line-height: 40px;
    padding: 0 20px;
    border-radius: 4px;
    margin: 0px 20px 0px 20px;
    width: 330px;
  }

  .page-container-min {
    height: 1000px;
  }

  .checkItem-min {
    .content-box {
      height: 600px;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .table-school-college-toggle-box {
        overflow: hidden;
        display: inline-block;
        margin-right: 10px;
        p {
          display: inline-block;
          text-align: center;
          width: 80px;
          line-height: 40px;
          height: 40px;
          color: #333;
          background-color: #fff;
          border: 1px solid #E0E0E0;
          font-size: 14px;
          cursor: pointer;
        }
        p:nth-child(1) {
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
          /*border-right:none;*/
        }
        p:nth-child(4) {
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
          /*border-left:none;*/
        }
        .p-check {
          border: 1px solid #0183FA;
          background-color: #0183FA;
          color: #fff;
        }
      }
      .form-button-max-big-box-me {
        display: inline-block;
        overflow: hidden;
        margin-right: 10px;
        .form-button-big-box-me {
          display: flex;
          div {
            position: relative;
            height: 40px;
            width: 100px;
            line-height: 40px;
            text-align: center;
            color: #999;
            font-size: 14px;
            border: 1px solid #999;
            border-radius: 4px;
            font-weight: 500;
            cursor: pointer;
            .icon-p-me {
              width: 15px;
              height: 15px;
              line-height: 15px;
              text-align: center;
              position: absolute;
              right: 0;
              bottom: 0;
              color: #fff;
              background: #0183fa;
              border-top-left-radius: 4px;
            }
          }
          .checkDiv-me {
            color: #0183FA !important;
            border: 1px solid #0183FA !important;
          }
        }
      }
    }
  }
</style>
