<template>
  <view class="earlyWarningBox">
    <view class="earlyTop">
      <view class="earlyTopBg"></view>
      <view class="headerBox" :style="{top:menu.top  + 'px',height:menu.height+'px'}">
        <view class="backIconBox">
          <image class="backIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"/>
        </view>
        <view class="timeBox">
          <view class="timeIconBox">
            <image class="timeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/selectIcon.svg"/>
          </view>
<!--          <uni-datetime-picker v-model="datetimerange" type="daterange"/>-->
<!--          <picker class="timeSelect" mode="date" fields="month" :end="end" onChange="handleGetStartTime(e)">{{startDate}}</picker>-->
<!--          <span class="timeSelect" style="margin: 0 4rpx">-</span>-->
<!--          <picker class="timeSelect" mode="date" fields="month" :end="end">{{endDate}}</picker>-->
          <image class="downIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/downIcon.svg"/>
        </view>
      </view>

      <view class="errorWarning" :style="{top: menu.bottom + 18 + 'px'}">
        <view class="errorTitle">
          <image class="warningIcon" src="/static/images/warning/warningIcon.png"/>
          <text class="title">经营异常预警</text>
        </view>
        <view class="errorContent">
          <view class="contentItem">
            <view style="display: flex;align-items: center">
              <image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/accountIcon.svg"/>
              <text class="contentText">车流增加，服务区经营减少</text>
            </view>
            <text class="value">15</text>
          </view>

          <view class="contentItem">
            <view style="display: flex;align-items: center">
              <image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/entryIcon.svg"/>
              <text class="contentText">车流增加，门店的营收减少</text>
            </view>
            <text class="value">24</text>
          </view>

          <view class="contentItem">
            <view style="display: flex;align-items: center">
              <image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/payIcon.svg"/>
              <text class="contentText">车流增加，营收增长不匹配</text>
            </view>
            <text class="value">18</text>
          </view>

          <view class="contentItem" style="margin-bottom: 0">
            <view style="display: flex;align-items: center">
              <image class="itemIcon" src="/static/images/warning/dataIcon.png"/>
              <text class="contentText">车流减少，营收降低不匹配</text>
            </view>
            <text class="value">13</text>
          </view>
        </view>
      </view>
    </view>

    <view class="servicepartContent">
      <view class="contentTitle">
        <image class="contentIcon" src="/static/images/warning/foodIcon.png"/>
        <view class="titleBox">
          <text class="title">服务区数据</text>
          <text class="desc">/同比去年</text>
        </view>
      </view>

      <view class="selectBox">
        <scroll-view 	scroll-x="true"  class="scrollBox">
          <view style="display: inline-block">
            <view class="scrollItem selectScroll">
              <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/accountIcon.svg"/>
              <text class="text">经营</text>
            </view>
          </view>
          <view style="display: inline-block">
            <view class="scrollItem">
              <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/entryIcon.svg"/>
              <text class="text">营收</text>
            </view>
          </view>
          <view style="display: inline-block">
            <view class="scrollItem">
              <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/payIcon.svg"/>
              <text class="text">增长</text>
            </view>
          </view>
          <view style="display: inline-block">
            <view class="scrollItem">
              <image class="itemImg" src="/static/images/warning/dataIcon.png"/>
              <text class="text">减少</text>
            </view>
          </view>
        </scroll-view>
        <view class="fixedRight" @click="handleShowPopup">
          <image class="filterIcon" src="/static/images/warning/filter.png"/>
          筛选
        </view>
      </view>

      <view class="dataList">
        <view class="listTitle">
          <view class="sortItem" style="width: 50%">
            <text class="sortName">服务区名称</text>
          </view>

          <view class="sortItem" style="width: 25%">
            <text class="sortName">对客销售</text>
            <view class="sortIconBox">
              <image class="upIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg"/>
              <image class="bottomIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg"/>
            </view>
          </view>
          <view class="sortItem" style="width: 25%">
            <text class="sortName">入区车流</text>
            <view class="sortIconBox">
              <image class="upIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg"/>
              <image class="bottomIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg"/>
            </view>
          </view>
        </view>

        <view class="listContent">
          <view class="listItem">
            <view class="itemTop">
              <view class="itemTopLeft">
                <image class="topItemIcon"/>
                <text class="name">新桥</text>
                <text class="unit">/服务区</text>
                <image class="message"/>
              </view>

              <view class="itemTopRight">
                <view class="warningNotice">
                  <image class="notice" src="/static/images/warning/warningIcon.png"/>
                  <text class="shopNumber">5个门店</text>
                </view>
                <image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg"/>
              </view>
            </view>

            <view class="itemContent">
              <view class="secondItem">
                <view class="bgBox">
                  <image class="bg" src="/static/images/warning/revenueBg.png"/>
                </view>
                <view class="secondItemTop">
                  <text class="itemTopName">对客销售</text>
                  <text class="itemTopUnit">/万元</text>
                </view>
                <view class="itemValue">55.08</view>
                <view class="addRate">
                  <!--                  增长-->
                  <text class="redValue" style="margin-right: 8rpx">+3.54</text>
                  <!--                  增幅-->
                  <text class="redValue">+1.37%</text>
                  <text class="unit">同比</text>
                </view>
              </view>

              <view class="secondItem">
                <view class="bgBox">
                  <image class="bg" src="/static/images/warning/carBg.png"/>
                </view>
                <view class="secondItemTop">
                  <text class="itemTopName">入区车流</text>
                  <text class="itemTopUnit">/辆</text>
                </view>
                <view class="itemValue">55.08</view>
                <view class="addRate">
                  <!--                  增长-->
                  <text class="redValue" style="margin-right: 8rpx">+3.54</text>
                  <!--                  增幅-->
                  <text class="redValue">+1.37%</text>
                  <text class="unit">同比</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <uniPopup type="bottom" :round="true" :show="showPop" @hidePopup="hidePopup">
      <view class="uniPopup">
        <view class="uniPopupTop">
          <text class="uniPopupTitle">筛选</text>
          <image @click="hidePopup" class="close" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"></image>
        </view>
        <view class="filterBox">
          <view class="filterTitle">经营模式</view>
          <view class="filterItemList">
            <view class="filterItem">便利店</view>
            <view class="filterItem">餐饮客房</view>
            <view class="filterItem">商铺租赁</view>
          </view>
        </view>

        <view class="filterBox" style="margin-top: 48rpx">
          <view class="filterTitle">经营业态</view>
          <view class="filterItemList">
            <view class="filterItem">餐饮主食</view>
            <view class="filterItem">休闲小吃</view>
            <view class="filterItem">生活零售</view>
            <view class="filterItem">汽车服务</view>
            <view class="filterItem">司乘体验</view>
          </view>
        </view>

        <view class="filterBox" style="margin-top: 48rpx">
          <view class="filterTitle">排行类型</view>
          <view class="filterItemList">
            <view class="filterItem">全局排行</view>
            <view class="filterItem">管理排行</view>
          </view>
        </view>


        <view class="button">确定</view>
      </view>
    </uniPopup>
  </view>
</template>
<script>
  import moment from "moment";
  import UniDatetimePicker
    from "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
  import UniPopup from "../../components/uni-popup.vue";
  export default {
    name: "index",
    components: {UniPopup, UniDatetimePicker},
    data(){
      return {
        menu:{},
        showPop:false,// 弹出框
        datetimerange:[moment().format('YYYY/MM'),moment().format('YYYY/MM')]
        // startDate: moment().format('YYYY/MM'),//开始时间
        // endDate: moment().format('YYYY/MM'),// 结束时间
        // end: moment().format('YYYY/MM'),//结束的时间范围
      }
    },
    onLoad(query){
      let systemInfo = uni.getSystemInfoSync()
      this.menu = uni.getMenuButtonBoundingClientRect()
    },
    methods:{
      // 显示弹出框
      handleShowPopup(){
        this.showPop = true
      },
      // 隐藏弹出框
      hidePopup(){
        this.showPop = false
      }
    }
  }
</script>
<style scoped lang="scss">
.earlyWarningBox{
  width: 100%;
  background: #F3F3F3;
  .earlyTop{
    width: 100%;
    height: 616rpx;
    background: #F3F3F3;
    position: relative;
    .earlyTopBg{
      width: 100%;
      height: 430rpx;
      background: linear-gradient( 180deg, #D8E3FF 0%, #F3F3F3 100%);
    }
    .headerBox{
      width: 100%;
      position: absolute;
      left: 0;
      box-sizing: border-box;
      padding: 32rpx;
      display: flex;
      align-items: center;
      .backIconBox{
        width: 48rpx;
        height: 48rpx;
        margin-right: 18rpx;
        .backIcon{
          width: 100%;
          height: 100%;
        }
      }
      .timeBox{
        display: flex;
        align-items: center;
        .timeIconBox{
          width: 40rpx;
          height: 40rpx;
          margin-right: 12rpx;
          .timeIcon{
            width: 100%;
            height: 100%;
          }
        }
        .timeSelect{
          font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
        .downIcon{
          width: 30rpx;
          height: 24rpx;
          margin-right: 8rpx;
        }
      }
    }
    .errorWarning{
      width: 100%;
      box-sizing: border-box;
      padding: 0 32rpx;
      position: absolute;
      left: 0;
      .errorTitle{
        width: 100%;
        height: 88rpx;
        background: linear-gradient( 180deg, #F2F3FF 0%, #F7F8FF 100%);
        border-top-right-radius: 16rpx;
        border-top-left-radius: 16rpx;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 24rpx;
        .warningIcon{
          width: 40rpx;
          height: 40rpx;
          margin-right: 8rpx;
        }
        .title{
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 28rpx;
          color: #212226;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
      }
      .errorContent{
        width: 100%;
        //height: 328rpx;
        background: #FFFFFF;
        border-bottom-right-radius: 16rpx;
        border-bottom-left-radius: 16rpx;
        box-sizing: border-box;
        padding: 24rpx;
        .contentItem{
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 24rpx;
          .itemIcon{
            width: 48rpx;
            height: 48rpx;
            margin-right: 8rpx;
          }
          .contentText{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #160002;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }
          .value{
            font-family: DINAlternate, DINAlternate;
            font-weight: bold;
            font-size: 36rpx;
            color: #160002;
            line-height: 42rpx;
            text-align: center;
            font-style: normal;
          }
        }
      }
    }
  }

  .servicepartContent{
    width: 100%;
    height: calc(100vh - 616rpx);
    border-top-left-radius: 32rpx;
    border-top-right-radius: 32rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 32rpx 0 32rpx 32rpx;
    .contentTitle{
      display: flex;
      align-items: center;
      .contentIcon{
        width: 48rpx;
        height: 48rpx;
      }
      .titleBox{
        margin-left: 12rpx;
        .title{
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 28rpx;
          color: #212226;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
        .desc{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #786B6C;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          margin-left: 8rpx;
        }
      }
    }
    .selectBox{
      width: 100%;
      height: 72rpx;
      display: flex;
      align-items: center;
      margin-top: 28rpx;
      .scrollBox{
        width: calc(100% - 132rpx);
        height: 72rpx;
        display: flex;
        white-space: nowrap;
        .scrollItem{
          background: #F5F5F5;
          border-radius: 8rpx;
          margin-right: 16rpx;
          padding: 16rpx;
          display: flex;
          align-items: center;
          .itemImg{
            width: 48rpx;
            height: 48rpx;
            margin-right: 8rpx;
          }
          .text{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #786B6C;
            line-height: 40rpx;
            text-align: right;
            font-style: normal;
          }
        }
        .selectScroll{
          background: #ECF2FF!important;
          .text{
            color: #2363FF!important;
          }
        }
      }
      .fixedRight{
        width: 132rpx;
        height: 72rpx;
        background: #fff;
        box-sizing: border-box;
        padding: 22rpx;
        display: flex;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #160002;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        .filterIcon{
          width: 24rpx;
          height: 28rpx;
          margin-right: 4rpx;
        }
      }
    }

    .dataList{
      width: calc(100% - 32rpx);
      height: calc(100% - 200rpx);
      margin-top: 24rpx;
      .listTitle{
        display: flex;
        align-items: center;
        border-bottom: 1px solid #F1F1F1;
        padding-bottom: 16rpx;
        .titleName{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #786B6C;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
        .sortItem{
          display: flex;
          align-items: center;
          .sortName{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #786B6C;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }
          .sortIconBox{
            display: flex;
            flex-direction: column;
            margin-left: 16rpx;
            .upIcon{
              width: 16rpx;
              height: 12rpx;
              margin-bottom: 4rpx;
            }
            .bottomIcon{
              width: 16rpx;
              height: 12rpx;
            }
          }
        }
      }
      .listContent{
        width: 100%;
        height: calc(100% - 60rpx);
        margin-top: 24rpx;
        .listItem{
          width: 100%;
          margin-bottom: 40rpx;
          .itemTop{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .itemTopLeft{
              display: flex;
              align-items: center;
              .topItemIcon{
                width: 40rpx;
                height: 40rpx;
              }
              .name{
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 28rpx;
                color: #160002;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
              }
              .unit{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #9A9A9A;
                line-height: 32rpx;
                text-align: left;
                font-style: normal;
              }
              .message{
                width: 32rpx;
                height: 32rpx;
              }
            }

            .itemTopRight{
              display: flex;
              align-items: center;
              .warningNotice{
                display: flex;
                align-items: center;
                margin-right: 16rpx;
                .notice{
                  width: 40rpx;
                  height: 40rpx;
                  margin-right: 8rpx;
                }
                .shopNumber{
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 600;
                  font-size: 28rpx;
                  color: #FF4C0A;
                  line-height: 40rpx;
                  text-align: left;
                  font-style: normal;
                }
              }
              .moreIcon{
                width: 32rpx;
                height: 32rpx;
              }
            }
          }

          .itemContent{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 16rpx;
            .secondItem{
              width: calc((100% - 18rpx) / 2);
              background: #F7F8FA;
              border-radius: 8rpx;
              padding: 16rpx 24rpx;
              box-sizing: border-box;
              position: relative;
              .bg{
                position: absolute;
                bottom: 0;
                right: 0;
                width: 120rpx;
                height: 120rpx;
                overflow: hidden;
                .bg{
                  width: 144rpx;
                  height: 144rpx
                }
              }
              .secondItemTop{
                margin-bottom: 16rpx;
                .itemTopName{
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #160002;
                  line-height: 40rpx;
                  text-align: left;
                  font-style: normal;
                }
                .itemTopUnit{
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #9A9A9A;
                  line-height: 40rpx;
                  text-align: left;
                  font-style: normal;
                  margin-left: 4rpx;
                }
              }
              .itemValue{
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 36rpx;
                color: #E83944;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
              }
              .addRate{
                .redValue{
                  font-family: DINAlternate, DINAlternate;
                  font-weight: bold;
                  font-size: 28rpx;
                  color: #E83944;
                  line-height: 32rpx;
                  text-align: left;
                  font-style: normal;
                }
                .unit{
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #9A9A9A;
                  line-height: 32rpx;
                  text-align: left;
                  font-style: normal;
                  margin-left: 8rpx;
                }
              }
            }
          }
        }
      }
    }
  }

  .uniPopup{
    width: 100%;
    height: 976rpx;
    box-sizing: border-box;
    padding: 32rpx;
    .uniPopupTop{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .uniPopupTitle{
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #160002;
        line-height: 44rpx;
        text-align: left;
        font-style: normal;
      }
      .close{
        width: 40rpx;
        height: 40rpx;
      }
    }

    .filterBox{
      margin-top: 40rpx;
      .filterTitle{
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 28rpx;
        color: #212226;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }
      .filterItemList{
        margin: 24rpx;
        display: flex;
        flex-wrap: wrap;
        .filterItem{
          width: calc((100% - 32rpx)/3);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16rpx;
          margin-bottom: 16rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #160002;
          line-height: 40rpx;
          text-align: right;
          font-style: normal;
          background: #F5F5F5;
          border-radius: 8rpx;
          padding: 12rpx 0;
        }
        .filterItem:nth-child(3){
          margin-right: 0;
        }
      }
    }

    .button{
      background: #2363FF;
      border-radius: 8rpx;
      width: calc(100% - 64rpx);
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #FFFFFF;
      line-height: 44rpx;
      text-align: left;
      font-style: normal;
      position: fixed;
      bottom: 32rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>
