<template>
  <div class="home">
    <div class="head">
      <div class="head-title">
        <div class="head-left">
          <img src="@/assets/mobile/icon_logo.png" />
          <span>数字孪生智管应用</span>
        </div>
        <div class="head-right">
          <img src="@/assets/mobile/icon_dddwb.png" />
          <span>东阳市</span>
        </div>
      </div>
      <div class="head-txt-box">
        <div class="box">
          <p class="orange">
            {{
              $store.state.reservoirRealData.water_level_value
                ? Number(
                    $store.state.reservoirRealData.water_level_value
                  ).toFixed(2) + "m"
                : "获取中"
            }}
          </p>
          <h5>
            {{
              $store.state.reservoirRealData.nowLimitWaterLevel
                ? "汛限水位" +
                  Number(
                    $store.state.reservoirRealData.nowLimitWaterLevel
                  ).toFixed(0) +
                  "m"
                : "获取中"
            }}
          </h5>
        </div>
        <div class="box">
          <p :class="{ orange: headObj.dban > 0 }">{{ headObj.dban }}</p>
          <h5>大坝安全预警</h5>
        </div>
        <div class="box">
          <p :class="{ orange: headObj.dban > 0 }">{{ headObj.xqyj }}</p>
          <h5>汛情预警</h5>
        </div>
        <div class="box">
          <p
            :class="{
              orange:
                droughtData.drought === '轻度' ||
                droughtData.drought === '中度',
              red: droughtData.drought === '重度',
            }"
          >
            {{ droughtData.drought ? droughtData.drought + "干旱" : "获取中" }}
          </p>
          <h5>旱情预警</h5>
        </div>
      </div>
    </div>
    <div class="main">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe br10" indicator-color="white" :loop="false">
        <van-swipe-item>
          <div class="icon-box">
            <img src="@/assets/mobile/icon_tqyb.png" />
            <p>降雨预报</p>
          </div>
          <div class="icon-box">
            <img src="@/assets/mobile/icon_wxyt.png" />
            <p>卫星云图</p>
          </div>
          <div class="icon-box">
            <img src="@/assets/mobile/icon_qxz.png" />
            <p>气象网站</p>
          </div>
          <div class="icon-box">
            <img src="@/assets/mobile/icon_tflj.png" />
            <p>台风路径</p>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="icon-box">
            <img src="@/assets/mobile/icon_qxz-1.png" />
            <p>浙江水利</p>
          </div>
        </van-swipe-item>
      </van-swipe>
      <!-- 水库情况 -->
      <div class="situation br10">
        <div class="situation-title">
          <div class="situation-left">
            <img src="@/assets/mobile/icon_dddw.png" />
            <span>与您最近的水库情况</span>
          </div>
          <div class="situation-right" @click="openPopup">
            <span>横锦水库</span><van-icon name="arrow-down" />
          </div>
        </div>
        <div class="situation-box">
          <div class="box">
            <p>实时水位</p>
            <p>
              <span>
                {{
                  Number(
                    $store.state.reservoirRealData.water_level_value
                  ).toFixed(2)
                }}</span
              >m
            </p>
          </div>
          <div class="box">
            <p>早8点水位</p>
            <p>
              <span>{{
                Number($store.state.reservoirDayData.eight_water_level).toFixed(
                  2
                )
              }}</span
              >m
            </p>
          </div>
          <div class="box">
            <p>防汛调度下泄</p>
            <p><span>20</span>m³/s</p>
          </div>
          <div class="box">
            <p>当日总供水</p>
            <p>
              <span>{{
                Number($store.state.reservoirRealData.water_supply).toFixed(2)
              }}</span
              >m³
            </p>
          </div>
        </div>
      </div>
      <!-- 防汛调度下泄 -->
      <div class="sluice br10">
        <div class="sluice-title">
          <h4>防汛调度下泄</h4>
          <p>总流量：<span>0</span>m³/s</p>
        </div>
        <div class="sluice-main">
          <div
            class="item"
            v-for="(item, index) in sluicegateData"
            :key="index"
          >
            <img src="@/assets/mobile/icon_wxx.png" />
            <div class="txt">
              <h4>{{ index + 1 }}#泄洪闸</h4>
              <div>
                <p>
                  开度：<span>{{ Number(item.opening).toFixed(2) }}</span
                  >mm
                </p>
                <p>
                  流量：<span>{{ Number(item.flow).toFixed(2) }}</span
                  >m³/s
                </p>
              </div>
              <van-button type="default">关闭</van-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 今日城镇供水 -->
      <div class="city-water br10">
        <div class="city-water-title">
          <h4>城镇供水</h4>
        </div>
        <div class="city-water-main">
          <van-empty
            class="custom-image"
            image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
            description="暂无数据"
          />
        </div>
      </div>
    </div>

    <!-- 弹出层 -->
    <van-popup v-model="popupShow" position="bottom" :style="{ height: '45%' }">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
    <!-- <div class="loading-mask">
      <div class="loading-box">
        <van-loading vertical>请稍候...</van-loading>
      </div>
    </div> -->
  </div>
</template>

<script>
import { getDroughtApi } from '@/api/operate.js'
import { getSluicegateApi } from '@/api/reservoir.js'
export default {
  async created () {
    this.$store.dispatch('getReservoirAction')
    this.getDroughtData()
    this.getSluicegateData()
  },
  data () {
    return {
      // head
      headObj: {
        waterLevel: 153,
        dban: 0,
        xqyj: 0,
        hqyj: '轻度干旱'
      },
      // 防汛调度下泄
      sluicegateData: [],
      // Popup
      popupShow: false,
      // Picker
      columns: ['横锦水库'],
      pickerVal: '',
      // 旱情预警
      droughtData: {}
    }
  },
  methods: {
    // picker确认
    onConfirm (value, index) {
      this.pickerVal = value
      this.onCancel()
    },
    // picker取消
    onCancel () {
      this.popupShow = false
    },
    // 旱情预警
    async getDroughtData () {
      const res = await getDroughtApi()
      console.log('旱情预警', res)
      this.droughtData = res
    },
    // 打开水库切换
    openPopup () {
      this.popupShow = true
    },
    // 泄洪闸
    async getSluicegateData () {
      const res = await getSluicegateApi()
      console.log('水库泄洪闸', res)
      this.sluicegateData = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
$font-color1: #333;
.br10 {
  border-radius: 10px;
}
.orange {
  color: #ffad38 !important;
}
.red {
  color: #f3675a !important;
}
.home {
  width: 100%;
  height: 100%;
  overflow: auto;
  .head {
    width: 100%;
    height: 235px;
    padding-top: 35px;
    background: url("~@/assets/mobile/img_bj.jpg") no-repeat center / 100% 100%;
    color: #fff;
    .head-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      .head-left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 36px;
        padding: 0 15px;
        margin-left: 10px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 15px;
        img {
          width: 22px;
          height: 22px;
          margin-right: 7px;
        }
        span {
          font-size: 16px;
          font-weight: 700;
        }
      }
      .head-right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 76px;
        height: 30px;
        padding: 0 10px;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 15px 0 0 15px;
        img {
          width: 12px;
          height: 12px;
        }
        span {
          font-size: 12px;
        }
      }
    }
    .head-txt-box {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .box {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 88px;
        height: 80px;
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 10px;
        font-size: 12px;
        p {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 21px;
          margin-top: 10px;
          margin-bottom: 15px;
          color: #fff;
          font-size: 21px;
        }
        h5 {
          font-weight: 400;
        }
      }
      .box:last-child {
        p {
          font-size: 15px;
        }
      }
    }
  }
  .main {
    margin-top: -35px;
    padding: 0 10px;
    .my-swipe {
      width: 100%;
      height: 132px;
      margin-bottom: 15px;
      background-color: #fff;
      box-shadow: 0px 8px 10px 1px rgb(0, 0, 0, 0.1);
      color: $font-color1;
      .van-swipe-item {
        display: flex;
        height: 100%;
        font-size: 20px;
        text-align: center;
        .icon-box {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 25%;
          img {
            width: 56px;
            height: 56px;
            margin-bottom: 10px;
          }
          p {
            font-size: 12px;
            margin-bottom: 10px;
          }
        }
      }
    }
    .situation {
      width: 100%;
      padding: 15px 12px 15px;
      margin-bottom: 15px;
      box-shadow: 0px 8px 10px 1px rgb(0, 0, 0, 0.1);
      .situation-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        color: $font-color1;
        font-size: 13px;
        .situation-left {
          display: flex;
          align-items: center;
          height: 17px;
          img {
            width: 14px;
            height: 14px;
            margin-right: 5px;
          }
        }
        .situation-right {
          span {
            margin-right: 7px;
          }
        }
      }
      .situation-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        height: 150px;
        .box {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 160px;
          height: 70px;
          padding: 12px;
          border-radius: 5px;
          color: #fff;
          p:nth-child(1) {
            font-size: 12px;
          }
          p:nth-child(2) {
            display: flex;
            justify-content: flex-end;
            font-size: 16px;
          }
        }
        .box:nth-child(1) {
          background-image: linear-gradient(
            140deg,
            rgba(114, 224, 153, 0.8) 0%,
            rgba(12, 184, 224, 0.8) 100%
          );
        }
        .box:nth-child(2) {
          background-image: linear-gradient(
            140deg,
            rgba(79, 232, 168, 0.8) 0%,
            rgba(71, 224, 108, 0.8) 100%
          );
        }
        .box:nth-child(3) {
          background-image: linear-gradient(
            140deg,
            rgba(243, 151, 111, 0.8) 0%,
            rgba(244, 82, 82, 0.8) 100%
          );
        }
        .box:nth-child(4) {
          background-image: linear-gradient(
            140deg,
            rgba(255, 137, 78, 0.8) 0%,
            rgba(255, 186, 102, 0.8) 100%
          );
        }
      }
    }
    .sluice {
      width: 100%;
      margin-bottom: 15px;
      background-color: #f3f3f3;
      box-shadow: 0px 8px 10px 1px rgb(0, 0, 0, 0.1);
      .sluice-title {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        height: 40px;
        border-radius: 10px 10px 0 0;
        h4 {
          color: $font-color1;
          font-size: 14px;
          font-weight: 400;
        }
        p {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          color: rgb(18, 176, 133);
          font-size: 12px;
        }
      }
      .sluice-main {
        height: 515px;
        background-color: #fff;
        .item {
          display: flex;
          align-items: center;
          width: 100%;
          height: 103px;
          padding: 20px 14px;
          border-bottom: 1px solid #dcdcdc;
          background-color: #fff;
          img {
            width: 45px;
            height: 45px;
            margin-right: 15px;
          }
          .txt {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            position: relative;
            height: 100%;
            h4 {
              color: $font-color1;
              font-size: 14px;
              font-weight: 400;
            }
            div {
              display: flex;
              p {
                color: rgba(141, 141, 141, 0.8);
                font-size: 13px;
              }
              p:first-child {
                margin-right: 15px;
              }
            }
            .van-button ::v-deep {
              display: flex;
              justify-content: center;
              position: absolute;
              right: 0;
              top: 0;
              width: 54px;
              height: 24px;
              padding: 4px 15px;
              background-color: rgba(191, 191, 191, 0.3);
              color: #8d8d8d;
              border-radius: 8px;
              .van-button__content {
                width: 54px !important;
                height: 24px !important;
                .van-button__text {
                  width: 54px !important;
                  height: 24px !important;
                }
              }
            }
          }
        }
        .item:last-child {
          border: 0;
          border-radius: 0 0 10px 10px;
        }
      }
    }
    .city-water {
      width: 100%;
      margin-bottom: 15px;
      background-color: #f3f3f3;
      box-shadow: 0px 8px 10px 1px rgb(0, 0, 0, 0.1);
      .city-water-title {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        height: 40px;
        border-radius: 10px 10px 0 0;
        h4 {
          color: $font-color1;
          font-size: 14px;
          font-weight: 400;
        }
      }
      .city-water-main {
        .custom-image ::v-deep {
          background-color: #fff;
          border-radius: 0 0 10px 10px;
          .van-empty__image {
            width: 70px;
            height: 70px;
          }
        }
      }
    }
  }
  .van-popup {
    overflow: hidden;
  }
}
</style>
