<template>
  <div class="now">
    <!-- 汛情预警处置 -->
    <button
      class="xqyjcz"
      @click="openXqyjcz"
      :disabled="pageLoading1"
      :class="{ disabled: pageLoading1 }"
    >
      汛情预警处置
    </button>
    <div class="now-left" v-show="isShow" v-loading="pageLoading1">
      <BigPanel title="雨情预警" class="top1">
        <div class="t-box">
          <div class="icon blue">
            {{ rainregimeData.blue_regime_count }}
          </div>
          <div class="icon yellow">
            {{ rainregimeData.yellow_regime_count }}
          </div>
          <div class="icon orange">
            {{ rainregimeData.orange_regime_count }}
          </div>
          <div class="icon red">
            {{ rainregimeData.red_regime_count }}
          </div>
        </div>
        <Scroll1
          :listScrollData="listScrollData1"
          :listScrollOption="listScrollOption1"
          :num="6"
        >
          <div
            class="row"
            v-for="(item, index) in listScrollData1"
            :key="index"
          >
            <div class="column column1">
              {{ index + 1 }}
            </div>
            <div class="column column2">{{ item.name }}</div>
            <div
              class="column column3"
              :class="{
                blue: item.color === '蓝色',
                yellow: item.color === '黄色',
                orange: item.color === '橙色',
                red: item.color === '红色',
              }"
            >
              {{ item.warning_level }}
            </div>
            <div class="column column4">{{ item.warning_content }}</div>
          </div>
        </Scroll1>
      </BigPanel>
      <BigPanel title="水情预警" class="top2">
        <div class="t-box">
          <div class="icon blue">
            {{ waterregimeData.blue_regime_count }}
          </div>
          <div class="icon yellow">
            {{ waterregimeData.yellow_regime_count }}
          </div>
          <div class="icon orange">
            {{ waterregimeData.orange_regime_count }}
          </div>
          <div class="icon red">
            {{ waterregimeData.red_regime_count }}
          </div>
        </div>
        <Scroll1
          :listScrollData="listScrollData2"
          :listScrollOption="listScrollOption2"
          :num="5"
        >
          <div
            class="row"
            v-for="(item, index) in listScrollData2"
            :key="index"
          >
            <div class="column column1">
              {{ index + 1 }}
            </div>
            <div class="column column2">{{ item.name }}</div>
            <div
              class="column column3"
              :class="{
                blue: item.color === '蓝色',
                yellow: item.color === '黄色',
                orange: item.color === '橙色',
                red: item.color === '红色',
              }"
            >
              {{ item.warning_level }}
            </div>
            <div class="column column4">{{ item.warning_content }}</div>
          </div>
        </Scroll1>
      </BigPanel>
    </div>
    <div class="now-right" v-show="isShow" v-loading="pageLoading2">
      <BigPanel title="视频AI预警" class="top1">
        <Scroll2
          :listScrollData="listScrollData3"
          :listScrollOption="listScrollOption3"
          :num="5"
        />
      </BigPanel>
      <BigPanel title="大坝运行预警" class="top2">
        <div class="row-c">
          <span>大坝稳定安全</span>
          <div
            class="status green"
            :class="{ red: damWarmData.total.unnormal !== 0 }"
          >
            {{ damWarmData.total.unnormal === 0 ? "安全" : "异常" }}
          </div>
        </div>
        <div class="v-title">
          <h4>监测项目</h4>
          <h4>红色</h4>
          <h4>黄色</h4>
          <h4>正常</h4>
        </div>
        <div class="row" v-for="(item, index) in damWarmData.list" :key="index">
          <div class="column column1">
            {{ item.item_name }}
          </div>
          <div class="column column2">
            <div
              class="status white"
              :class="{ red: item.pointData.waringLevel[2] > 0 }"
            >
              {{ item.pointData.waringLevel[2] }}
            </div>
          </div>
          <div class="column column3">
            <div
              class="status white"
              :class="{ yellow: item.pointData.waringLevel[3] > 0 }"
            >
              {{ item.pointData.waringLevel[3] }}
            </div>
          </div>
          <div class="column column3">
            <div class="status green">
              {{ item.pointData.normal }}
            </div>
          </div>
        </div>
      </BigPanel>
    </div>
    <div
      class="is-show"
      @click="isShowBtn"
      :class="{ hidden: isShow === false }"
    ></div>
    <Process1 :xqyjczShow="xqyjczShow" @xqyjcz-close="xqyjczClose" />
  </div>
</template>

<script>
import { getVideoApi } from '@/api/home.js'
import { getRainregimeApi, getWaterregimeApi, getDamWarmApi } from '@/api/flood.js' //  恢复直接放入
import Process1 from './process1.vue'

export default {
  name: 'Now',
  components: {
    Process1
  },
  created () {
    this.pageLoading1 = true
    this.pageLoading2 = true
  },
  async mounted () {
    await this.allHttp()
    this.pageLoading1 = false
    this.pageLoading2 = false
  },
  data () {
    return {
      xqyjczShow: false,
      // loading
      pageLoading1: false,
      pageLoading2: false,
      // 雨晴预警数据
      rainregimeData: {},
      // 水情预警数据
      waterregimeData: {},
      // 大坝运行预警
      // damWarmData: {
      //   list: [
      //     { item_id: 17, item_name: '表面垂直位移', way_type_str: '自动化监测', item_code: '3', warning_str: '安全', warn_level: 1, pointData: { total: 21, unnormal: 0, normal: 21, untoday: 21, waringLevel: { 2: 0, 3: 0 } } },
      //     { item_id: 18, item_name: '表面水平位移', way_type_str: '自动化监测', item_code: '4', warning_str: '安全', warn_level: 1, pointData: { total: 21, unnormal: 0, normal: 21, untoday: 21, waringLevel: { 2: 0, 3: 0 } } },
      //     { item_id: 19, item_name: '绕坝渗流监测', way_type_str: '人工监测', item_code: '9', warning_str: '安全', warn_level: 1, pointData: { total: 8, unnormal: 0, normal: 8, untoday: 2, waringLevel: { 2: 0, 3: 0 } } },
      //     { item_id: 20, item_name: '坝体渗流监测', way_type_str: '人工监测', item_code: '11', warning_str: '安全', warn_level: 1, pointData: { total: 12, unnormal: 0, normal: 12, untoday: 3, waringLevel: { 2: 0, 3: 0 } } },
      //     { item_id: 21, item_name: '防渗墙应变', way_type_str: '', item_code: '8', warning_str: '安全', warn_level: 1, pointData: { total: 39, unnormal: 0, normal: 39, untoday: 39, waringLevel: { 2: 0, 3: 0 } } },
      //     { item_id: 22, item_name: '防渗墙应力', way_type_str: '', item_code: '14', warning_str: '安全', warn_level: 1, pointData: { total: 8, unnormal: 0, normal: 8, untoday: 8, waringLevel: { 2: 0, 3: 0 } } }
      //   ],
      //   total: { total: 109, unnormal: 0, normal: 109, untoday: 71, waringLevel: { 2: 0, 3: 0 } }
      // },
      damWarmData: {
        list: [],
        total: {
          unnormal: 0
        }
      },
      isShow: true,
      listScrollData1: [
        // {
        //   id: 1,
        //   name: '窈川',
        //   color: '正常',
        //   content: '-'
        // }, {
        //   id: 2,
        //   name: '史姆',
        //   color: '正常',
        //   content: '-'
        // }, {
        //   id: 3,
        //   name: '西坞',
        //   color: '正常',
        //   content: '-'
        // }, {
        //   id: 4,
        //   name: '学淘',
        //   color: '正常',
        //   content: '-'
        // }, {
        //   id: 5,
        //   name: '八达',
        //   color: '正常',
        //   content: '-'
        // }, {
        //   id: 6,
        //   name: '横锦',
        //   color: '正常',
        //   content: '-'
        // }

      ],
      listScrollOption1: {
        step: 0.35, // 数值越大滚动速度越快
        limitMoveNum: 6, // 开启无缝滚动的数据量
        hoverStop: true, // 是否启用鼠标 hover 控制
        direction: 1, // 方向:  0-往下  1-往上  2-向左  3-向右
        singleHeight: 50 // 单步运动停止的高度(默认值 0 是无缝不停止的滚动),direction 为 0|1 时生效
        // waitTime: 1000, // 单步停止等待时间(默认值 1000ms)
      },
      listScrollData2: [
        // {
        //   id: 1,
        //   name: '横锦水库站',
        //   color: '正常',
        //   content: '-'
        // },
        // {
        //   id: 2,
        //   name: '溢洪道站',
        //   color: '正常',
        //   content: '-'
        // },
        // {
        //   id: 3,
        //   name: '歌山站',
        //   color: '正常',
        //   content: '-'
        // }, {
        //   id: 4,
        //   name: '白溪汇口站',
        //   color: '正常',
        //   content: '-'
        // }, {
        //   id: 5,
        //   name: '迎宾大桥站',
        //   color: '正常',
        //   content: '-'
        // },
        // {
        //   id: 6,
        //   name: '麻车埠站',
        //   color: '正常',
        //   content: '-'
        // }
      ],
      listScrollOption2: {
        step: 0.35, // 数值越大滚动速度越快
        limitMoveNum: 6, // 开启无缝滚动的数据量
        hoverStop: true, // 是否启用鼠标 hover 控制
        direction: 1, // 方向:  0-往下  1-往上  2-向左  3-向右
        singleHeight: 50 // 单步运动停止的高度(默认值 0 是无缝不停止的滚动),direction 为 0|1 时生效
        // waitTime: 1000, // 单步停止等待时间(默认值 1000ms)
      },
      listScrollData3: [
        // {
        //   id: 1,
        //   dian: 'SK-17 白泉庙前',
        //   content: '无'
        // }, {
        //   id: 2,
        //   dian: 'SK-20金宅村西',
        //   content: '无'
        // }, {
        //   id: 3,
        //   dian: 'SK-24桃家院',
        //   content: '无'
        // }, {
        //   id: 4,
        //   dian: 'SK-30水泵房边',
        //   content: '无'
        // }, {
        //   id: 5,
        //   dian: 'SK2-1大坝口',
        //   content: '无'
        // }
      ],
      listScrollOption3: {
        step: 0.35, // 数值越大滚动速度越快
        limitMoveNum: 5, // 开启无缝滚动的数据量
        hoverStop: true, // 是否启用鼠标 hover 控制
        direction: 1, // 方向:  0-往下  1-往上  2-向左  3-向右
        singleHeight: 50 // 单步运动停止的高度(默认值 0 是无缝不停止的滚动),direction 为 0|1 时生效
        // waitTime: 1000, // 单步停止等待时间(默认值 1000ms)
      },
      vData: [
        {
          id: 1,
          place: 'BH-001',
          content: '人员闯入'
        }, {
          id: 2,
          place: 'BH-002',
          content: '船只闯入'
        }, {
          id: 3,
          place: 'BH-003',
          content: '人员闯入'
        }, {
          id: 4,
          place: 'BH-006',
          content: '船只闯入'
        }
      ]
      // dianData: [
      //   {
      //     id: 1,
      //     txt: '水平位移监测',
      //     red: 0,
      //     yellow: 0,
      //     green: 21
      //   }, {
      //     id: 2,
      //     txt: '水平位移监测',
      //     red: 0,
      //     yellow: 0,
      //     green: 21
      //   }, {
      //     id: 3,
      //     txt: '水平位移监测',
      //     red: 0,
      //     yellow: 0,
      //     green: 41
      //   }, {
      //     id: 4,
      //     txt: '水平位移监测',
      //     red: 0,
      //     yellow: 0,
      //     green: 16
      //   }, {
      //     id: 5,
      //     txt: '水平位移监测',
      //     red: 0,
      //     yellow: 0,
      //     green: 20
      //   }
      // ]
    }
  },
  methods: {
    openXqyjcz () {
      this.xqyjczShow = true
    },
    xqyjczClose () {
      this.xqyjczShow = false
    },
    async allHttp () {
      const [res1, res2, res3, res4] = await Promise.all([
        // 获取视频AI预警列表
        getVideoApi(),
        // 获取雨晴预警数据
        getRainregimeApi(),
        // 获取水情预警数据
        getWaterregimeApi(),
        // 大坝运行预警
        getDamWarmApi()
      ])
      // 视频AI预警列表
      this.getVideoData(res1)
      // 雨晴预警数据
      this.getRainregimeData(res2)
      // 水情预警数据
      this.getWaterregimeData(res3)
      // 大坝运行预警 接口已经完毕,直接开放即可
      this.getDamWarmData(res4)
    },
    // 雨晴预警数据
    getRainregimeData (res) {
      console.log('雨晴预警', res)
      this.rainregimeData = res
      this.listScrollData1 = res.warning_list
    },
    // 水情预警数据
    getWaterregimeData (res) {
      console.log('水情预警', res)
      this.waterregimeData = res
      this.listScrollData2 = res.warning_list
    },
    // 获取视频AI预警列表
    getVideoData (res) {
      console.log('动态预警视频AI', res.data)
      this.listScrollData3 = res.data
    },
    // 大坝运行预警
    getDamWarmData (res) {
      console.log('大坝运行预警', res)
      this.damWarmData = res
    },
    isShowBtn () {
      this.isShow = !this.isShow
    }
  }
}
</script>

<style lang="scss" scoped>
.seamless-scroll-column {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #d1d5d9;
    .column {
      height: 50px;
      line-height: 50px;
      font-size: 14px;
      text-align: center;
    }
    .column1 {
      width: 40px;
    }
    .column2 {
      width: 70px;
    }
    .column3 {
      width: 66px;
      &.blue {
        color: #388cff;
      }
      &.yellow {
        color: #ffcc00;
      }
      &.orange {
        color: #ff9c00;
      }
      &.red {
        color: #ff6060;
      }
    }
    .column4 {
      width: 160px;
    }
  }
  .row:nth-child(odd) {
    background-color: rgba(96, 255, 246, 0.05);
  }
  .row:nth-child(even) {
    background-color: rgba(96, 255, 246, 0.1);
  }
}
.now {
  position: absolute;
  left: 0;
  top: 0;
  .top1 {
    margin-bottom: 10px;
  }
  .now-left {
    position: absolute;
    top: 0;
    left: 10px;
    width: 400px;
    height: 956px;
    .flood-panel {
      padding-top: 52px;
      .t-box {
        display: flex;
        align-items: center;
        height: 68px;
        margin-bottom: 10px;
        .icon {
          width: 96px;
          height: 100%;
          text-align: center;
          padding-top: 13px;
          color: #fff;
          font-size: 20px;
          font-weight: 200;
          &.blue {
            background: url("~@/assets/images/flood/blue.png") no-repeat top
              left / 100% 100%;
          }
          &.yellow {
            background: url("~@/assets/images/flood/yellow.png") no-repeat top
              left / 100% 100%;
          }
          &.orange {
            background: url("~@/assets/images/flood/orange.png") no-repeat top
              left / 100% 100%;
          }
          &.red {
            background: url("~@/assets/images/flood/red.png") no-repeat top left /
              100% 100%;
          }
        }
      }
    }
  }
  .now-right {
    position: absolute;
    top: 0;
    left: 1510px;
    width: 400px;
    height: 956px;
    .top1 {
      .list-scroll-column {
        margin-top: 15px;
      }
    }
    .top2 {
      .status {
        width: 52px;
        height: 26px;
        color: #fff;
        text-align: center;
        line-height: 26px;
        &.white {
          background: url("~@/assets/images/flood/white_icon.png") no-repeat
            center / contain;
        }
        &.green {
          background: url("~@/assets/images/flood/green_icon.png") no-repeat
            center / contain !important;
        }
        &.red {
          background: url("~@/assets/images/flood/red_icon.png") no-repeat
            center / contain !important;
        }
        &.yellow {
          background: url("~@/assets/images/flood/yellow_icon.png") no-repeat
            center / contain !important;
        }
      }
      .row-c {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        width: 100%;
        height: 40px;
        padding: 0 25px 0 20px;
        margin-top: 16px;
        background-color: rgba(96, 255, 246, 0.2);
        &::after {
          content: "";
          display: block;
          position: absolute;
          width: 2px;
          height: 20px;
          background-color: #60fff6;
          top: 10px;
          left: 8px;
        }
        span {
          color: #fff;
          font-size: 14px;
        }
      }

      .v-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        width: 100%;
        height: 40px;
        margin-top: 10px;
        margin-bottom: 2px;
        padding: 0 25px 0 20px;
        background-color: rgba(96, 255, 246, 0.2);
        h4 {
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 14px;
          font-weight: 400;
        }
        h4:nth-child(1) {
          width: 130px;
          justify-content: flex-start;
        }
        h4:nth-child(2) {
          width: 52px;
        }
        h4:nth-child(3) {
          width: 52px;
        }
        h4:nth-child(4) {
          width: 52px;
        }
      }
      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        width: 100%;
        color: #d1d5d9;
        margin-bottom: 5px;
        padding: 0 25px 0 20px;
        background-color: rgba(96, 255, 246, 0.1);
        &::after {
          content: "";
          display: block;
          position: absolute;
          width: 2px;
          height: 20px;
          background-color: #60fff6;
          top: 15px;
          left: 8px;
        }
        .column {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 50px;
          font-size: 14px;
        }
        .column1 {
          width: 130px;
          justify-content: flex-start;
        }
        .column2 {
          width: 52px;
        }
        .column3 {
          width: 52px;
        }
        .column4 {
          width: 52px;
        }
      }
      .row:last-child {
        margin-bottom: 0;
      }
    }
  }
  .is-show {
    position: absolute;
    left: 1460px;
    top: 0;
    width: 40px;
    height: 40px;
    background: url("~@/assets/images/flood/is_show.png") no-repeat center /
      100% 100%;
    cursor: pointer;
    &.hidden {
      left: 1870px;
    }
  }
}
.xqyjcz {
  position: absolute;
  left: 430px;
  top: 0;
  width: 140px;
  height: 40px;
  font-size: 16px;
  color: #fff;
  z-index: 7;
  background: url("~@/assets/images/flood/process1/button.png") no-repeat center /
    100% 100%;
  &:hover {
    background: url("~@/assets/images/flood/process1/button_hover.png")
      no-repeat center / 100% 100%;
  }
  &.disabled {
    cursor: not-allowed;
  }
}
</style>
