<template>
  <div class="pageMain">
    <div class="top">
      <div class="header" :style="{height:menu.height + 'px',top:menu.top+'px'}">
        <img class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"/>
        <div class="timeSelect">
          <img class="selectIcon" src="/static/images/newCommercial/selectDateIcon.svg"/>
          <picker mode="date" :value="single"  :end="endData" @change="bindDateChange" >
            <view class="time">
              <view class="text">{{ single }}2023/07/06</view>
              <image class="icon" src="/static/images/newCommercial/arrow_bottom.svg"></image>
            </view>
          </picker>
        </div>
      </div>

      <div class="picker">
        <div class="selectService">
          <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
          <view class="select">
            <view class="content">
              <view class="uni-input">{{serviceInfo.SERVERPART_NAME}}</view>
              <p class="area" v-if="serviceInfo.Serverpart_ID">{{serviceInfo.SPREGIONTYPE_NAME}}</p>
              <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
            </view>
          </view>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "flowAnalysis",
  data() {
    return {
      menu:'',
      statusBarHeight:'',
      single:'',
      thisDay:'',
      endData:'',
      serviceInfo:{}, //当前服务区信息
    }
  },
  onLoad(){
    //  获取手机参数对页面进行适配
    let systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = Number(systemInfo.statusBarHeight)
    this.menu = uni.getMenuButtonBoundingClientRect()
    console.log('systemInfo',systemInfo)
    console.log('this.menu',this.menu)
  },
  methods:{
    bindDateChange(){

    }
  }
}
</script>


<style scoped lang="scss">
.pageMain{
  width: 100%;
  height: 100%;
  .top{
    width: 100%;
    height: 152px;
    box-sizing: border-box;
    position: relative;
    background: linear-gradient(90deg, #60AAFF 0%,#3E74FF 100%);
    .header{
      position: absolute;
      width: 100%;
      padding: 0 16px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      .backArrow{
        width: 24px;
        height: 24px;
        margin-right: 16px;
      }
      .timeSelect{
        display: flex;
        align-items: center;
        .selectIcon{
          width: 16px;
          height: 16px;
        }
        .time{
          display: flex;
          align-items: center;
          .text{
            margin: 0 5px;
          }
          .icon{
            width: 18px;
            height: 18px;
          }
        }
      }
    }
    .picker{
      .selectService{
        display: flex;
        align-items: center;
        .img{
          width: 40px;
          height: 40px;
          z-index: 2;
        }
        .select{
          height: 32px;
          background: #F8F8FA;
          border-radius: 0 16px 16px 0;
          transform: translateX(-20px);
          box-sizing: border-box;
          padding-left: 25px;
          display: flex;
          align-items: center;
          .content{
            display: flex;
            align-items: center;
            .uni-input{
              padding: 0;
              background: transparent;
              font-size: 14px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #160002;
            }
            .area{
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #786B6C;
              line-height: 40px;
              margin-left: 4px;
            }
            .rightArrow{
              width: 24px;
              height: 12px;
            }
          }

        }
      }
    }
  }
}
</style>
