<template>
  <div class="container">
    <el-card class="card-box" v-for="(item, index) in list" :key="index">
      <img :src="item.icon" alt class="icon" />
      <h1 class="title">
        {{ item.title }}
      </h1>
      <p class="card-box-tip">{{ item.tip }}</p>
      <div class="card-bigbox">
        <div
          class="card-box-item"
          v-for="(item1, index) in item.children"
          :key="index"
        >
          <div class="left">
            <div class="img-box">
              <span class="info" v-if="item1.count != 0">{{
                item1.count
              }}</span>
              <img :src="item1.icon" />
            </div>
          </div>
          <div class="right">
            <div @click="handleRoter(item1)" class="right-text">
              <span>{{ item1.title }}</span>
            </div>
            <p class="right-tip">{{ item1.tip }}</p>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          icon: require('../assets/img/icon_1.png'),
          title: '待办工单',
          tip: '待办工单列表',
          children: [
            {
              icon: require('../assets/img/icon_2.png'),
              title: '待办巡查单',
              tip: '我的待办巡查单',
              count: '0',
              url: 'agentInspection'
            },
            {
              icon: require('../assets/img/icon_3.png'),
              title: '待处理病害',
              tip: '我记录的',
              url: 'virusManagementChild',
              count: '0'
            },
            {
              icon: require('../assets/img/icon_4.png'),
              title: '待办养护工单',
              tip: '我的待办养护工单',
              url: 'agencyWorkOrder',
              count: '0'
            }
          ]
        },
        {
          icon: require('../assets/img/icon_5.png'),
          title: '逾期超时',
          tip: '即将超时逾期(部门)',
          children: [
            {
              icon: require('../assets/img/icon_2.png'),
              title: '即将逾期养护工单',
              tip: '',
              count: '0',
              url: 'agencyWorkOrder'
            },
            {
              icon: require('../assets/img/icon_6.png'),
              title: '已逾期养护工单',
              tip: '',
              url: 'agencyWorkOrder',
              count: '0'
            },
            {
              icon: require('../assets/img/icon_7.png'),
              title: '即将逾期病害',
              tip: '',
              count: '0',
              url: 'temporaryVirus',
              count: '0'
            },
            {
              icon: require('../assets/img/icon_7.png'),
              title: '已逾期病害',
              tip: '',
              url: 'virusManagementChild',
              count: '0'
            }
          ]
        },
        {
          icon: require('../assets/img/icon_8.png'),
          title: '定期检查',
          tip: '临期检查预警(部门)',
          children: [
            {
              icon: require('../assets/img/icon_9.png'),
              title: '涵洞定期检查临期',
              tip: '',
              url: 'regularInspection#regularInspectionCulvert',
              count: '0'
            },
            {
              icon: require('../assets/img/icon_10.png'),
              title: '边坡定期检查临期',
              tip: '',
              url: 'regularInspection#regularInspectionSlope',
              count: '0'
            },
            {
              icon: require('../assets/img/icon_11.png'),
              title: '隧道定期检查临期',
              tip: '',
              count: '0',
              url: 'regularInspection#regularInspectionTunnel'
            },
            {
              icon: require('../assets/img/icon_12.png'),
              title: '桥梁定期检查临期',
              tip: '',
              url: 'regularInspection#regularInspectionBridges',
              count: '0'
            }
          ]
        },
        {
          icon: require('../assets/img/icon_13.png'),
          title: '经常检查',
          tip: '临期检查预警(部门)',
          children: [
            {
              icon: require('../assets/img/icon_14.png'),
              title: '涵洞经常检查临期',
              tip: '',
              url: 'checkFrequently#frequentInspectionCulverts',
              count: '0'
            },
            {
              icon: require('../assets/img/icon_15.png'),
              title: '边坡经常检查临期',
              tip: '',
              url: 'checkFrequently#frequentInspectionSlope',
              count: '0'
            },
            {
              icon: require('../assets/img/icon_16.png'),
              title: '隧道经常检查临期',
              tip: '',
              url: 'checkFrequently#frequentInspectionTunnels',
              count: '0'
            },
            {
              icon: require('../assets/img/icon_17.png'),
              title: '桥梁经常检查临期',
              tip: '',
              url: 'checkFrequently#frequentInspectionBridges',
              count: '0'
            }
          ]
        }
      ]
    }
  },
  created() {
    this.getAgentWorkOrderCount() //代办工单
    this.getRegularInspectionCount() //定期检查
    this.getOverdueTimeoutCount() //逾期超时
    this.getCheckFrequentlyCount() //经常检查
  },
  methods: {
    //获取代办工单的数字角标数量
    getAgentWorkOrderCount() {
      this.$http.post('${yhxt}/workbench/v1/getWorkOrder').then(res => {
        let data = res.data
        let list = this.list[0].children
        list[0].count = data.siteCount //代办巡检单
        list[1].count = data.diseaseCount //待处理病害
        list[2].count = data.workOrderCount //代办养护工单
      })
    },
    //逾期超时
    getOverdueTimeoutCount() {
      this.$http.post('${yhxt}/workbench/v1/getOverdue').then(res => {
        let data = res.data
        let list = this.list[1].children
        list[0].count = data.workOrderOverdueCount //即将逾期养护工单
        list[1].count = data.workOrderOverdueCountTrue //已逾期养护工单
        list[2].count = data.diseaseOverdueCount //即将逾期病害
        list[3].count = data.diseaseOverdueCountTrue //已逾期病害
      })
    },
    //定期检查
    getRegularInspectionCount() {
      this.$http.post('${yhxt}/workbench/v1/getRegularCheck').then(res => {
        let data = res.data
        let list = this.list[2].children
        list[0].count = data.culvertRegularCount //涵洞定期检查
        list[1].count = data.sideSlopeRegularCount //边坡定期检查
        list[2].count = data.tunnelRegularCount //隧道定期检查
        list[3].count = data.brideRegularCount //桥梁定期检查
      })
    },
    //经常检查
    getCheckFrequentlyCount() {
      this.$http.post('${yhxt}/workbench/v1/getOftenCheck').then(res => {
        let data = res.data
        let list = this.list[3].children
        list[0].count = data.culvertOftenCount //涵洞经常检查
        list[1].count = data.sideSlopeOftenCount //边坡经常检查
        list[2].count = data.tunnelOftenCount //隧道经常检查
        list[3].count = data.brideOftenCount //桥梁经常检查
      })
    },
    handleRoter(obj) {
      console.log(obj)
      let path = obj.url
      let alias = ''
      this.$router.push(path)
      // let i = path.lastIndexOf('#')
      // path=path.slice(i + 1)
      if (path.indexOf('#') == -1) {
        alias = '/frontPlat/' + path
      } else {
        let str = path.substring(0, path.indexOf('#'))
        alias = '/frontPlat/' + str
      }
      this.$bus.$emit('roterPush', alias)
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  min-width: 1100px;
  overflow-y: auto;
  .card-box {
    // width: 49%;
    // height: 49%;
    // min-width: 49%;
    // max-width: 49%;
    width: 100%;
    // flex: 1;
    box-sizing: border-box;
    display: inline-block;
    border: none;
    margin-bottom: 10px;
    &:nth-child(2n) {
      // margin-left: 20px;
    }
    &:nth-child(n + 3) {
      // margin-top: 20px;
    }
    .title {
      font-size: 3vh;
      color: #485b50;
      font-weight: bold;
      display: inline-block;
      margin-top: 2px;
      margin-left: 5px;
      color: #fff;
    }
    .card-box-tip {
      display: inline-block;
      margin-left: 5px;
      font-size: 1vh;
    }
    .icon {
      display: inline-block;
      width: 5vh;
    }
    img {
      vertical-align: top;
    }
    .card-bigbox {
      width: 1200px;
      height: calc(100% - 10px);
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      margin-left: 50px;
      .card-box-item {
        width: 25%;
        // height: 50%;
        // flex: 1;
        // min-width: 50%;
        // max-width: 50%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .left {
          // width: 30%;
          display: inline-block;
          .img-box {
            width: 5rem;
            height: 5rem;
            position: relative;
            .info {
              font-size: 1vh;
              position: absolute;
              background: #f56c6c;
              color: #fff;
              display: inline-block;
              top: -0.5vh;
              right: -0.5vh;
              width: 2.5vh;
              border-radius: 50%;
              height: 2.5vh;
              line-height: 2.5vh;
              text-align: center;
            }
            img {
              width: 100%;
              height: 100%;
              border-radius: 15px;
              vertical-align: middle;
            }
          }
        }
        .right {
          width: 70%;
          display: inline-block;
          margin-left: 10px;
          div {
            color: #454444;
            text-decoration: none;
            cursor: pointer;
          }
          .right-text {
            &:hover {
              span {
                color: #5c8eff;
                // text-decoration: underline;
                padding-bottom: 2px;
                border-bottom: 2px solid;
              }
            }
            span {
              font-size: 2vh;
              color: #fff;
              font-weight: 600;
            }
          }
          .right-tip {
            font-size: 1vh;
            font-weight: 500;
            color: #fff;
          }
        }
      }
    }
  }
}
/deep/ .el-card__body {
  box-sizing: border-box !important;
}
</style>
