<template>
  <div class="xnxj">
    <div class="sub-main">
      <div class="right-sub-main">
        <div class="card card1">
          <div class="card-head">
            <div class="icon-txt">
              <div class="icon"></div>
              今日预警分析
            </div>
            <button class="his-btn">历史记录</button>
          </div>
          <div class="card-main">
            <div class="big-panel-btn-box">
              <button
                v-for="(item, index) in ['预警类型', '设备分析', '时间段分析']"
                :key="index"
                @click="chartBtn(index)"
                :class="{ btnActive: charIndex === index }"
              >
                {{ item }}
              </button>
            </div>
            <div class="chart" id="jcyj-chart"></div>
          </div>
        </div>
        <div class="card card2">
          <div class="card-head">
            <div class="icon-txt">
              <div class="icon"></div>
              AI预警
            </div>
            <p>更新时间：2022-07-23 09:23:12</p>
          </div>
          <div class="card-main">
            <div class="item" v-for="item in 2" :key="item">
              <div class="img">
                <img src="@/assets/images/home/video.png" />
              </div>
              <div class="info">
                <p>区域：水闸区</p>
                <p>设备：二号区-jks15625</p>
                <p>原因：船只闯入</p>
              </div>
            </div>
          </div>
        </div>
        <div class="card card3">
          <div class="card-head">
            <div class="icon-txt">
              <div class="icon"></div>
              监控设备
            </div>
            <div class="sub-tab">
              <button
                @click="tabBtn(0)"
                class="tab-item"
                :class="{ tabActive: tabIndex === 0 }"
              >
                全部
              </button>
              <button
                @click="tabBtn(1)"
                class="tab-item"
                :class="{ tabActive: tabIndex === 1 }"
              >
                在线
              </button>
              <button
                @click="tabBtn(2)"
                class="tab-item"
                :class="{ tabActive: tabIndex === 2 }"
              >
                离线
              </button>
            </div>
          </div>
          <div class="card-main">
            <el-input
              v-model="input"
              @change="select"
              placeholder="请输入设备名称"
              prefix-icon="el-icon-search"
            ></el-input>
            <el-collapse v-model="activeNames" @change="handleChange">
              <!-- 1 -->
              <el-collapse-item name="1">
                <template slot="title">
                  水库库区<span>&nbsp;29&nbsp;</span>个
                </template>
                <div class="item">
                  <span>启闭机一楼</span>
                  <div class="icon open"></div>
                </div>
                <div class="item">
                  <span>启闭机一楼</span>
                  <div class="icon close"></div>
                </div>
              </el-collapse-item>
              <!-- 2 -->
              <el-collapse-item name="2">
                <template slot="title">
                  大坝及溢洪道<span>&nbsp;2&nbsp;</span>个</template
                >
                <div class="item">
                  <span>启闭机一楼</span>
                  <div class="icon open"></div>
                </div>
                <div class="item">
                  <span>启闭机一楼</span>
                  <div class="icon close"></div>
                </div>
              </el-collapse-item>
              <!-- 3 -->
              <el-collapse-item name="3">
                <template slot="title">
                  管理及生活区<span>&nbsp;1&nbsp;</span>个</template
                >
                <div class="item">
                  <span>启闭机一楼</span>
                  <div class="icon open"></div>
                </div>
                <div class="item close">
                  <span>启闭机一楼</span>
                  <div class="icon close"></div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      charIndex: 0,
      // 监控设备
      input: '',
      activeNames: ['1'],
      tabIndex: 0
    }
  },
  mounted () {
    this.getChart()
  },
  methods: {
    // 监控设备
    tabBtn (i) {
      this.tabIndex = i
    },
    //
    select () {
      console.log(123)
    },

    handleChange (val) {
      console.log(val)
    },
    // 今日预警分析
    chartBtn (i) {
      this.charIndex = i
    },
    getChart () {
      this.echarts.init(document.getElementById('jcyj-chart')).dispose()
      var myChart = this.echarts.init(document.getElementById('jcyj-chart'))
      var option
      option = {
        grid: {
          left: '5%',
          bottom: 10,
          top: '12%',
          right: '5%',
          containLabel: true
        },
        color: ['#32BAFF', '#F8B479', '#7EFBFA', '#F9E04E'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['车辆闯入', '船只闯入', '人员闯入', '其他'],
          axisLabel: {
            textStyle: {
              color: '#CACACA',
              fontSize: 12
            }
          },
          axisLine: {
            // symbol: ['none', 'path://M250 150 L150 350 L350 350 Z'],
            symbol: ['none', 'arrow'],
            symbolSize: [8, 10],
            lineStyle: {
              color: '#CACACA'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, .2)',
              type: 'dashed'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#CACACA',
              fontSize: 12
            }
          },
          axisLine: {
            show: true,
            // symbol: ['none', 'path://M250 150 L150 350 L350 350 Z'],
            symbol: ['none', 'arrow'],
            symbolSize: [8, 10],
            lineStyle: {
              color: '#CACACA'
            }
          }
        },
        series: [{
          data: [{ value: 2, itemStyle: { color: '#32BAFF' } },
          { value: 3, itemStyle: { color: '#F8B479' } },
          { value: 1, itemStyle: { color: '#7EFBFA' } },
          { value: 5, itemStyle: { color: '#F9E04E' } }],
          type: 'bar',
          barWidth: 12
        }]
      }
      option && myChart.setOption(option)
      window.onresize = myChart.resize
    }
  }
}
</script>

<style lang="scss" scoped>
.xnxj {
  width: 100%;
  height: 100%;
  background-color: #ccc;
  .sub-main {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    .right-sub-main {
      display: flex;
      flex-direction: column;
      width: 400px;
      height: 100%;
      position: absolute;
      top: 0;
      right: 10px;
      padding-top: 10px;
    }
    .card {
      display: flex;
      flex-direction: column;
      background: rgba(3, 35, 79, 0.6);
      margin-bottom: 10px;
      .card-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 41px;
        padding: 0 10px;
        color: #fff;
        font-size: 16px;
        border-bottom: 1px solid #595959;
        .icon-txt {
          display: flex;
          align-items: center;
          font-size: 18px;
          .icon {
            width: 26px;
            height: 26px;
            margin-right: 13px;
          }
        }
        .his-btn {
          width: 80px;
          height: 20px;
          background-color: rgba(96, 255, 246, 0.3);
          color: #fff;
          border: 0 !important;
          &:active {
            background-color: rgba(227, 133, 0, 0.5);
          }
        }
        p {
          color: #cacaca;
          font-size: 14px;
        }
      }
      .card-main {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 0 10px;
        .big-panel-btn-box {
          margin: 10px 0 5px 0;
        }
        .chart {
          flex: 1;
        }
      }
      .sub-tab {
        height: 20px;
        .tab-item {
          width: 50px;
          height: 100%;
          background: rgba(96, 255, 246, 0.3);
          border-radius: 2px;
          font-size: 12px;
          color: #fff;
          margin-left: 4px;
          &.tabActive {
            background: rgba(227, 133, 0, 0.6);
          }
          &:hover {
            background: rgba(227, 133, 0, 0.6);
          }
        }
      }
    }
    .card1 {
      height: 231px;
      .icon {
        background: url("~@/assets/images/maintain/title_icon1.png") no-repeat
          center / 100% 100%;
      }
    }
    .card2 {
      height: 241px;
      .card-main {
        display: flex;
        flex-direction: column;
        padding: 10px;
      }
      .item {
        display: flex;
        align-items: center;
        flex: 1;
        padding: 5px;
        margin-bottom: 6px;
        background: rgba(96, 255, 246, 0.1);
        color: #60fff6;
        font-size: 14px;
        .img {
          width: 130px;
          height: 100%;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          flex: 1;
          height: 100%;
          padding: 10px 0;
          margin-left: 20px;
        }
      }
      .icon {
        background: url("~@/assets/images/maintain/title_icon2.png") no-repeat
          center / 100% 100%;
      }
    }
    .card3 {
      height: 444px;
      .card-main ::v-deep {
        position: relative;
        padding: 10px;
        padding-top: 60px;
        .el-input {
          position: absolute;
          top: 10px;
          left: 10px;
          width: 380px;
        }
        .el-input__inner {
          background-color: rgba(96, 255, 246, 0.3);
          border: 0;
          color: #fff;
          &::placeholder {
            color: #d3d3d3;
          }
        }
        .el-collapse {
          width: 100%;
          height: 333px;
          overflow: auto;
        }
        .el-collapse-item__header {
          display: flex;
          align-items: center;
          background-color: rgba(96, 255, 246, 0.15) !important;
          margin-bottom: 2px;
          color: #fff;
          padding-left: 15px;
          span {
            margin-bottom: 2px;
          }
        }
        .el-collapse,
        .el-collapse-item__wrap,
        .el-collapse-item__header {
          border: 0;
        }
        .el-collapse-item__header,
        .el-collapse-item__wrap {
          background-color: transparent;
        }
        .el-collapse-item__content {
          padding-bottom: 0;
        }
        .el-collapse-item__content .item {
          background-color: rgba(96, 255, 246, 0.08);
          margin-bottom: 2px;
          padding: 13px 15px 13px 30px;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .icon {
            width: 22px;
            height: 22px;
            background: url("~@/assets/images/maintain/eye_open.png") no-repeat
              center / 100% 100%;
            cursor: pointer;
            &.close {
              background: url("~@/assets/images/maintain/eye_close.png")
                no-repeat center / 100% 100%;
            }
          }
        }
      }
      .icon {
        background: url("~@/assets/images/maintain/title_icon3.png") no-repeat
          center / 100% 100%;
      }
    }
  }
}
</style>
