<template>
  <div class="main-pc-index" style="position: relative">
    <div class="main-left">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>任务管理</span>
        </div>
        <div class="main-left-box">
          <div>
            <img src="../../assets/img/rw.png">
            <div>
              <div>任务总数</div>
              <div>{{taskInfo.totalNum}}</div>
            </div>
          </div>
          <div>
            <div>
              <div>已完成</div>
              <div>{{taskInfo.funishedNum}}</div>
            </div>
            <div>
              <div>执行中</div>
              <div>{{taskInfo.executionNum}}</div>
            </div>
            <div>
              <div>待执行</div>
              <div>{{taskInfo.executionWaitNum}}</div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card style="margin-top: 10px" class="box-card">
        <div slot="header" class="clearfix">
          <span>问题管理</span>
        </div>
        <div class="main-left-box">
          <div>
            <img src="../../assets/img/wt.png">
            <div>
              <div>问题总数</div>
              <div>{{questionInfo.totalNum}}</div>
            </div>
          </div>
          <div>
            <div>
              <div>已处理完</div>
              <div>{{questionInfo.funishedNum}}</div>
            </div>
            <div>
              <div>处理中</div>
              <div>{{questionInfo.processNum}}</div>
            </div>
            <div>
              <div>待处理</div>
              <div>{{questionInfo.waitNum}}</div>
            </div>
          </div>
        </div>
      </el-card>
      <div style="margin-top: 10px;display: flex">
        <el-card style="flex: 1" class="box-card">
          <div slot="header" class="clearfix">
            <span>数据统计</span>
          </div>
          <div :key="index" v-for="(item,index) in inspectQuestionCategoryList" class="left-bottom">
            <div :title="item.questionContent">{{item.questionContent}}</div>
            <el-progress :show-text="false" :stroke-width="20" color="#17B4AC"
                         :percentage="getQuestionPer(item)"></el-progress>
            <div>{{item.questionNum}}</div>
          </div>
        </el-card>
        <el-card style="flex:1;margin-left: 20px" class="box-card">
          <div slot="header" class="clearfix">
            <span>水质分类统计</span>
          </div>
          <mainCake v-if="waterAlarmCategoryList.length>0" :dataList="waterAlarmCategoryList" id="mainPre" :width="360"
                    :height="200"></mainCake>
        </el-card>
      </div>
    </div>
    <div class="main-right">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>报警信息</span>
          <el-button @click="waterAlarmOpen" style="float: right; padding: 3px 0" type="text">更多</el-button>
        </div>
        <div class="right-waterAlarm">
          <div @click="waterAlarmClick(item.id)" :key="index" v-for="(item,index) in waterAlarmList">
            <div>
              <img
                :src="item.measuredStandard==5?require('../../assets/img/main/red.png'):(item.measuredStandard==4?require('../../assets/img/main/orange.png'):require('../../assets/img/main/yellow.png'))"/>
              <div>{{item.alarmInfo}}</div>
            </div>
            <div><span v-if="item.alarmTime">{{item.alarmTime.split(' ')[0]}}</span></div>
          </div>
        </div>
      </el-card>
      <el-card style="margin-top: 10px" class="box-card">
        <div slot="header" class="clearfix">
          <span>预警信息</span>
          <el-button @click="waterWarnOpen" style="float: right; padding: 3px 0" type="text">更多</el-button>
        </div>
        <div class="right-waterWarn">
          <div :key="index" v-for="(item,index) in waterWarnList">
            <div>
              <div>{{item.driverName}}</div>
              <div>{{item.warnTime}}</div>
            </div>
            <div>
              <div>{{item.warnContent}}</div>
              <div :class="item.warnLevel==5?'red-div':(item.warnLevel==4?'orange-div':'yellow-div')">
                {{item.warnLevel}}级
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card style="margin-top: 10px" class="box-card">
        <div slot="header" class="clearfix">
          <span>通知公告</span>
          <el-button @click="noticeOpen" style="float: right; padding: 3px 0" type="text">更多</el-button>
        </div>
        <el-tabs v-model="noticeType" @tab-click="noticeTypeClick">
          <el-tab-pane label="水务新闻" :name="1">
            <div v-if="noticeType==1" class="notice-list">
              <div @click="noticeClick(item.id)" :key="index" v-for="(item,index) in noticeList" class="notice-child">
                <div>{{item.title}}</div>
                <div>{{item.createTime}}</div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="政策法规" :name="2">
            <div v-if="noticeType==2" class="notice-list">
              <div @click="noticeClick(item.id)" :key="index" v-for="(item,index) in noticeList" class="notice-child">
                <div>{{item.title}}</div>
                <div>{{item.createTime}}</div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <waterAlarmInfo
      :id="waterAlarmId"
      @handleClose="waterAlarmVisible=false"
      v-if="waterAlarmVisible"
      :visible="waterAlarmVisible"
    >
    </waterAlarmInfo>
    <noticeDetial :noticeId="noticeId" :visible="noticeVisible" v-if="noticeVisible" @handleClose="noticeVisible=false"></noticeDetial>
  </div>
</template>

<script>
  import mainApi from '@/api/main/index'
  import mainCake from './mainCake'
  import waterAlarmInfo from '../water/waterAlarm/infoForm'
  import noticeDetial from '@/components/noticeDetail'

  export default {
    name: "main-pc-index",
    data() {
      return {
        noticeVisible:false,
        noticeId:'',
        waterAlarmVisible: false,
        waterAlarmId: '',
        height: document.body.clientHeight - 125,
        taskInfo: {},
        questionInfo: {},
        waterAlarmCategoryList: [],
        waterAlarmList: [],
        waterWarnList: [],
        noticeType: 1,
        noticeList:[]
      }
    },
    created() {
    },
    mounted() {
      this.getDetail()
      this.getNoticeMainList()
    },
    components: {mainCake, waterAlarmInfo,noticeDetial},
    methods: {
      noticeClick(id){
        this.noticeId=id
        this.noticeVisible=true
      },
      noticeTypeClick(){
        this.noticeList=[]
        this.getNoticeMainList()
      },
      noticeOpen() {
        this.$router.push({path: "/work/notice"});
      },
      waterWarnOpen() {
        this.$router.push({path: "/water/warn"});
      },
      waterAlarmOpen() {
        this.$router.push({path: "/water/waterAlarm"});
      },
      waterAlarmClick(id) {
        this.waterAlarmId = id
        this.waterAlarmVisible = true
      },
      getQuestionPer(item) {
        let total = 0
        this.inspectQuestionCategoryList.map(item => {
          total += item.questionNum
        })
        return (item.questionNum / total) * 100
      },
      getNoticeMainList() {
        mainApi.getNoticeMainList(this.noticeType).then(res => {
          this.noticeList=res.data?res.data:[]
        }).catch(e => {
          this.noticeList=[]
        })
      },
      getDetail() {
        mainApi.getMainDetail().then(res => {
          const {waterWarnList, taskInfo, questionInfo, inspectQuestionCategoryList, waterAlarmCategoryList, waterAlarmList} = res.data
          this.taskInfo = taskInfo ? taskInfo : {}
          this.questionInfo = questionInfo ? questionInfo : {}
          this.inspectQuestionCategoryList = inspectQuestionCategoryList ? inspectQuestionCategoryList : []
          this.waterAlarmCategoryList = waterAlarmCategoryList ? waterAlarmCategoryList : []
          this.waterAlarmList = waterAlarmList ? waterAlarmList : []
          this.waterWarnList = waterWarnList ? waterWarnList : []
        }).catch(e => {
          this.taskInfo = {}
          this.questionInfo = {}
          this.inspectQuestionCategoryList = []
          this.waterAlarmCategoryList = []
          this.waterAlarmList = []
          this.waterWarnList = []
        })
      }
    }
  }
</script>

<style lang="less">
  .main-pc-index{
    width: 100%;
    padding: 10px;
    background-color: #ffffff;
    height: 100%;
    display: flex;

    .main-left {
      width: 64%;
      margin-right: 1%;

      .main-left-box {
        display: flex;
        align-items: center;
        font-size: 12px;

        > div:first-child {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          color: #999999;
          width: 190px;
          border-right: 1px #eeeeee solid;

          > img {
            width: 60px;
            height: 60px;
          }

          > div {
            margin-left: 15px;

            > div:last-child {
              font-size: 24px;
              color: #333333;
            }
          }
        }

        > div:last-child {
          flex: 1;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 30px;

          > div {
            color: #999999;

            > div:last-child {
              font-size: 24px;
              color: #333333;
            }
          }
        }
      }

      .left-bottom {
        margin-top: 15px;
        display: flex;
        align-items: center;

        > div:first-child {
          width: 100px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #333333;
          text-align: right;
          overflow: hidden;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          white-space: nowrap;
        }

        > div:nth-child(2) {
          flex: 1;
          display: flex;
          align-items: center;
          margin-left: 10px;

          .el-progress-bar {
            padding-right: 0rem;
            width: 100%;
            margin-right: -0rem;
          }

          .el-progress-bar__outer {
            background: #0B2221;
            border-radius: 10px
          }
        }

        > div:last-child {
          width: 60px;
          margin-left: 30px;
          text-align: left;
          font-family: PingFangSC-Medium;
          font-size: 14px !important;
          color: #17B4AC;
          line-height: 20px;
        }
      }
    }

    .main-right {
      width: 35%;

      .el-card__header {
        .el-button--text {
          color: #ffffff !important;
        }
      }

      .notice-list{
        .notice-child{
          width: 100%;
          margin-top: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 14px;
          color: #333333;
          cursor: pointer;
          >div:last-child{
            color: #666666;
            flex: none;
            width: 150px;
            text-align: right;
          }
        }
      }

      .right-waterAlarm {
        > div {
          cursor: pointer;
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          > div:first-child {
            display: flex;
            align-items: center;

            > img {
              width: 20px;
              height: 20px;
              margin-right: 10px;
            }

            > div:last-child {
              font-family: PingFangSC-Regular;
              font-size: 16px;
              color: #333333;
              line-height: 16px;
            }
          }

          > div:last-child {
            flex: none;
            font-family: PingFangSC-Regular;
            font-size: 16px;
            text-align: right;
            width: 100px;
            color: #333333;
            line-height: 16px;
          }
        }

        > div:first-child {
          margin-top: 0px;
        }
      }

      .right-waterWarn {
        > div {
          margin-top: 10px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #333333;

          > div:first-child {
            display: flex;
            justify-content: space-between;
            align-items: center;

            > div:first-child {
              font-family: PingFangSC-Regular;
              font-size: 14px;
              font-weight: bold;
              line-height: 14px;
              color: #333333;
            }

            > div:last-child {
              line-height: 14px;
            }
          }

          > div:last-child {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 5px;
            color: #666666;

            > div:first-child {
              line-height: 14px;
            }

            > div:last-child {
              color: #ffffff;
              border-radius: 10px;
              height: 14px;
              width: 37px;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            .red-div {
              background: #FF0000;
            }

            .orange-div {
              background: #f5A623;
            }

            .yellow-div {
              background: #f5d823;
            }
          }
        }

        > div:first-child {
          margin-top: 0px;
        }
      }
    }

  }

</style>
