<template>
  <div class="main">
      <div class="leftArrow" :style="{top:(menu.top + ((menu.height - 24)/2) )+ 'px'}" >
          <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg" @click="handleBack"></image>
          <div class="pickers" v-if="isShowPicker" @click="handleChangeService">
              <div class="pick" :value="selectIndex" :range="array" range-key="name">
                  <view class="picker">
                      <p class="pickTitle">{{info.SERVERPART_NAME?info.SERVERPART_NAME:''}}</p>
                      {{info.SPREGIONTYPE_NAME?info.SPREGIONTYPE_NAME:''}}
                  </view>
                  <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
              </div>
          </div>
      </div>
      <div class="topImg">
          <image v-if="topBg.length>0" @click="handlePreview('have')" class="topDefaultBg" :src="topBg[selectTopBg]"></image>
          <image v-else @click="handlePreview('default')" class="topDefaultBg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/default.png"></image>
      </div>
      <div class="menu">
          <div class="top">
              <div class="left">
                  <p class="title">{{info.SERVERPART_NAME?info.SERVERPART_NAME:'-'}}</p>
                  <text class="status">营业中</text>
              </div>
              <div class="iconBox" @click="handleGoMap">
                  <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/map.svg"></image>
              </div>
          </div>
          <div class="scroll">
              <div class="info">
                  <p class="address">{{info.ServerpartInfo.EXPRESSWAY_NAME?info.ServerpartInfo.EXPRESSWAY_NAME:''}}</p>
                  <div class="typeList">
                      <div class="typeItem" v-for="(item,index) in typeList" :key="index" v-if="item.isShow">
                          <image class="img" :src="item.url"></image>
                          <text class="text">{{item.name}}</text>
                      </div>
                  </div>
                  <div class="baseInfo">
                      <p class="title">基本信息</p>
                      <div class="word">
                          <p class="subTitle">取水方式</p>
                          <text class="value">{{info.ServerpartInfo.WATERINTAKE_TYPE===1?'自来水':info.ServerpartInfo.WATERINTAKE_TYPE===2?'井水':'' }}</text>
                      </div>
                      <div class="word">
                          <p class="subTitle">污水处理</p>
                          <text class="text">{{info.ServerpartInfo.SEWAGEDISPOSAL_TYPE===1?'市政':info.ServerpartInfo.SEWAGEDISPOSAL_TYPE===2?'污水处理设备':''}}</text>
                      </div>
                      <div class="word">
                          <p class="subTitle">市区县镇</p>
                          <text class="text">{{info.ServerpartInfo.SERVERPART_ADDRESS?info.ServerpartInfo.SERVERPART_ADDRESS:'' }}</text>
                      </div>
                      <div class="word">
                          <p class="subTitle">管理单位</p>
                          <text class="text">{{info.ServerpartInfo.MANAGERCOMPANY?info.ServerpartInfo.MANAGERCOMPANY:'' }}</text>
                      </div>
                      <div class="word">
                          <p class="subTitle">产权单位</p>
                          <text class="text">{{info.ServerpartInfo.OWNEDCOMPANY?info.ServerpartInfo.OWNEDCOMPANY:'' }}</text>
                      </div>
                      <div class="word">
                          <p class="subTitle">介绍说明</p>
                          <text class="text">{{info.ServerpartInfo.SERVERPART_INFO?info.ServerpartInfo.SERVERPART_INFO:'' }}</text>
                      </div>
                  </div>
                  <div class="areaInfo" style="margin-top: 16px">
                      <p class="title">面积信息</p>
                      <div class="word">
                          <p class="subTitleArea">占地面积</p>
                          <text class="value" v-if="info.ServerpartInfo.FLOORAREA">{{info.ServerpartInfo.FLOORAREA }}<text style="margin-left: 4px">m²</text></text>
                          <text class="value" v-else></text>
                      </div>
                      <div class="word">
                          <p class="subTitleArea">停车场面积</p>
                          <text class="value" v-if="info.ServerpartInfo.SHAREAREA">{{info.ServerpartInfo.SHAREAREA}}<text style="margin-left: 4px">m²</text></text>
                          <text class="value" v-else></text>
                      </div>
                      <div class="word">
                          <p class="subTitleArea">建筑面积</p>
                          <text class="value" v-if="info.ServerpartInfo.SERVERPART_AREA">{{info.ServerpartInfo.SERVERPART_AREA }}<text style="margin-left: 4px">m²</text></text>
                          <text class="value" v-else></text>
                      </div>
                  </div>
              </div>

              <div class="service">
                  <div class="serviceItem" v-for="(item,index) in info.RegionInfo" :key="index" :style="{marginTop:index!==0?'32px':''}">
                      <p class="title">{{item.SERVERPART_REGIONNAME?item.SERVERPART_REGIONNAME:'-'}}</p>
                      <div class="box">
                          <div class="left">
                              <image class="boxImg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceHotal.svg"></image>
                              <text class="textTitle">服务信息</text>
                          </div>
                          <div class="right">
                              <div class="item">
                                  <p :class="item.HASPANTRY?'text':'unText'">男厕<text style="margin-left: 4px">{{item.HASPANTRY?'(' + item.HASPANTRY+')':'' }}</text></p>
                                  <p :class="item.HASTHIRDTOILETS?'text':'unText'">第三卫生间</p>
                                  <p :class="item.HASCHILD?'text':'unText'">车辆维修</p>
                                  <p :class="item.HASWATERROOM?'text':'unText'">开水器<text style="margin-left: 4px">{{item.HASWATERROOM?'(' + item.HASWATERROOM + ')':'' }}</text></p>
                              </div>
                              <div class="item">
                                  <p :class="item.HASWIFI?'text':'unText'">女厕<text style="margin-left: 4px">{{item.HASWIFI?'(' + item.HASWIFI + ')':'' }}</text></p>
                                  <p :class="item.TOILETCOUNT?'text':'unText'">潮汐厕位<text style="margin-left: 4px">{{item.TOILETCOUNT?'(' + item.TOILETCOUNT + ')':'' }}</text></p>
                                  <p :class="item.HASSHOWERROOM?'text':'unText'">车辆加水</p>
                              </div>
                          </div>
                      </div>

                      <div class="box">
                          <div class="left">
                              <image class="boxImg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceCar.svg"> </image>
                              <text class="textTitle">车位信息</text>
                          </div>
                          <div class="right">
                              <div class="item">
                                  <p :class="item.SMALLPARKING?'text':'unText'">轿车车位<text style="margin-left: 4px">{{item.SMALLPARKING?'(' + item.SMALLPARKING + ')':'' }}</text></p>
                                  <p :class="item.TRUCKPACKING?'text':'unText'">货车车位<text style="margin-left: 4px">{{item.TRUCKPACKING?'(' + item.TRUCKPACKING + ')':'' }}</text></p>

                              </div>
                              <div class="item">
                                  <p :class="item.PACKING?'text':'unText'">客车车位<text style="margin-left: 4px">{{item.PACKING?'(' + item.PACKING + ')':''  }}</text></p>
                                  <p :class="item.DANPACKING?'text':'unText'">危化品车位<text style="margin-left: 4px">{{item.DANPACKING?'(' + item.DANPACKING +')':'' }}</text></p>
                              </div>
                          </div>
                      </div>

                      <div class="box">
                          <div class="left">
                              <image class="boxImg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceFood.svg"></image>
                              <text class="textTitle">经营信息</text>
                          </div>
                          <div class="right">
                              <div class="item">
                                  <p :class="item.DININGROOMCOUNT?'text':'unText'"  class="text">餐饮</p>
                                  <p :class="item.HASMESSAGESEARCH?'text':'unText'" class="text">住宿</p>
                                  <p class="model">{{item.BUSINESSTYPE }}</p>
                              </div>
                              <div class="item">
                                  <p :class="item.HASBACKGROUNDRADIO?'text':'unText'" >便利店</p>
                                  <p :class="item.DININGBXCOUNT?'text':'unText'">商铺<text style="margin-left: 4px">{{item.DININGBXCOUNT?'('+item.DININGBXCOUNT+')':'' }}</text></p>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>

  </div>
</template>

<script>
import request from '@/util/index.js'
export default {
    name: "detail",
    data(){
        return {
            info:{},
            isShowPicker:false,//判断是否有选择器
            menu:{},//手机参数
            selectIndex:0,//服务区选择器选择的值
            array:[],//服务区选择器选择的列表
            typeList:[{url:'https://eshangtech.com/ShopICO/ahyd-BID/service/health.svg',name:'A类',isShow:false},
                {url:'https://eshangtech.com/ShopICO/ahyd-BID/service/time.svg',name:'2015-06-10',isShow:false},
                {url:'https://eshangtech.com/ShopICO/ahyd-BID/service/baby.svg',name:'母婴室',isShow:false},
                {url:'https://eshangtech.com/ShopICO/ahyd-BID/service/car.svg',name:'司机之家',isShow:false},
                {url:'https://eshangtech.com/ShopICO/ahyd-BID/service/Charging.svg',name:'充电桩',isShow:false},
                {url:'https://eshangtech.com/ShopICO/ahyd-BID/service/hotel.svg',name:'客房',isShow:false}],
            typeShowList:[],
            defaultBg:['https://eshangtech.com/ShopICO/ahyd-BID/service/default.png'],
            topBg:[],
            selectTopBg:0,
        }
    },
    onLoad(option){
        // 获取手机参数
        let systemInfo = uni.getSystemInfoSync()
        this.statusBarHeight = Number(systemInfo.statusBarHeight)
        this.menu = uni.getMenuButtonBoundingClientRect()
        if (option.isPicker==='false'){
            this.isShowPicker = false
        }else if (option.isPicker==='true'){
            this.isShowPicker = true
        }
    },
    onShow(){
        let seat = uni.getStorageSync('currentService')
        this.handleSearch(seat)
        let pageList = getCurrentPages()
        console.log('pageList',pageList)
    },
    methods:{
        // 点击预览图片
        handlePreview(type){
            if (type === 'default'){
                uni.previewImage({
                    current: this.defaultBg[0], // 图片的地址url
                    urls: this.defaultBg // 预览的地址url
                })
            }else{
                uni.previewImage({
                    current: this.defaultBg[0], // 图片的地址url
                    urls: this.topBg // 预览的地址url
                })
            }
        },
        async handleSearch(seat){
            console.log('seat',seat)
            let reqs = {
                longitude:seat.longitude,
                ServerpartId:seat.Serverpart_ID,
                latitude:seat.latitude
            }
            const totalData = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo',reqs)
            this.info = totalData.Result_Data
            this.typeList[4].isShow = this.info.HASCHARGE
            this.typeList[5].isShow = this.info.HASGUESTROOM
            this.typeList[2].isShow = this.info.HASMOTHER
            this.typeList[3].isShow = this.info.HASPILOTLOUNGE
            if (this.info.SERVERPART_TYPE){
                this.typeList[0].name = this.info.SERVERPART_TYPE===1000?'A类':this.info.SERVERPART_TYPE===1010?'A类（示范）':
                    this.info.SERVERPART_TYPE===2000?'B类':this.info.SERVERPART_TYPE===3000?'C类':this.info.SERVERPART_TYPE===4000?'D类':''
                this.typeList[0].isShow = this.info.HASCHARGE
            }
            this.typeList[1].isShow = this.info.STARTDATE
            this.topBg = this.info.ImageLits
        },
        //选择服务区
        handleChangeService(){
            let currentService = uni.getStorageSync('currentService')
            let lastDay = uni.getStorageSync('lastDay')
            let pageList = getCurrentPages()
            console.log('pageList',pageList)
            if (pageList.length>2){
                if (this.isShowPicker){
                    uni.navigateBack({
                        delta: 1
                    })
                }
            }else{
                uni.navigateTo({
                    url:`/pages/map/index?time=${lastDay}&serviceInfo=${JSON.stringify(currentService)}`
                })
            }
        },
        async getList(option){
            let req = {
                longitude:option.longitude,
                ServerpartId:option.SERVERPART_ID,
                latitude:option.latitude
            }
            const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo',req)
            console.log('data',data)
            this.info = data.Result_Data
            this.typeList[4].isShow = this.info.HASCHARGE
            this.typeList[5].isShow = this.info.HASGUESTROOM
            this.typeList[2].isShow = this.info.HASMOTHER
            this.typeList[3].isShow = this.info.HASPILOTLOUNGE
            if (this.info.SERVERPART_TYPE){
                this.typeList[0].name = this.info.SERVERPART_TYPE===1000?'A类':this.info.SERVERPART_TYPE===1010?'A类（示范）':
                    this.info.SERVERPART_TYPE===2000?'B类':this.info.SERVERPART_TYPE===3000?'C类':this.info.SERVERPART_TYPE===4000?'D类':''
                this.typeList[0].isShow = this.info.HASCHARGE
            }
            this.typeList[1].isShow = this.info.STARTDATE

        },
        //返回上一级页面
        handleBack(){
            uni.switchTab({
                url: '/pages/userCenter/userCenter'
            })
        },
        //点击跳转导航页
        handleGoMap(){
            let key='STWBZ-DKCR4-J6UUF-FRD5I-3EBN2-GDBOT'
            let referer ='goMap'
            //拿到用户当前的位置
            let user = uni.getStorageSync('seatInfo')
            let startPoint = {
                name:'我的位置',
                latitude:user.latitude,
                longitude:user.longitude
            }
            //拿到当前已经选中的服务区的位置 也就是终点
            let seat = uni.getStorageSync('currentService')
            let endPoint = {
                name:seat.SERVERPART_NAME,
                latitude:seat.latitude,
                longitude:seat.longitude
            }
            wx.navigateTo({
                url: `plugin://routePlan/index?key=${key}&referer=${referer}&endPoint=${JSON.stringify(endPoint)}&startPoint=${JSON.stringify(startPoint)}`
            });
        }
    }
}
</script>

<style scoped lang="scss">
.main{
    max-width: 100vw;
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    position: relative;
    .leftArrow{
        height: 24px;
        position: absolute;
        left: 16px;
        display: flex;
        align-items: center;
        z-index:99999999999;
        .img{
            width: 24px;
            height: 24px;
            margin-right: 16px;
        }
        .pickers{
            min-width: 167px;
            height: 32px;
            background: #FFFFFF;
            border-radius: 16px;
            box-sizing: border-box;
            padding: 0 12px;
            .pick{
                height: 100%;
                position: relative;
                .picker{
                    height: 32px;
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786B6C;
                    line-height: 18px;
                    display: flex;
                    align-items: center;
                    .pickTitle{
                        font-size: 14px;
                        font-family: PingFangSC-Semibold, PingFang SC;
                        font-weight: 600;
                        color: #160002;
                        line-height: 20px;
                        margin-right: 4px;
                    }
                }
                .rightArrow{
                    width: 24px;
                    height: 12px;
                    position: absolute;
                    right: -10%;top: 50%;
                    transform: translateY(-50%);
                }
            }
        }
    }
  .topImg{
    width: 100%;
    height: 210px;
    .topDefaultBg{
      width: 100%;
      height: 100%;
    }
  }
    .menu{
        width:100%;
        box-sizing: border-box;
        height: calc(100vh - 196px);
        border-radius: 16px 16px 1px 1px;
        transform: translateY(-16px);
        .top{
            width:100% ;
            margin: 0 auto;
            box-sizing: border-box;
            padding: 16px 16px 0;
            background: #fff;
            border-radius: 16px 16px 1px 1px;
            display: flex;
            justify-content: space-between;
            .left{
                display: flex;
                align-items: center;
                .title{
                    font-size: 18px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                    line-height: 26px;
                }
                .status{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #160002;
                    line-height: 18px;
                    padding: 0 6px;
                    background: #EAEAEA;
                    border-radius: 2px;
                    margin-left: 8px;
                }
            }
            .iconBox{
                width: 28px;
                height: 28px;
                border: 1px solid #F1F1F1;
                border-radius: 50%;
                .icon{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .scroll{
            width:100vw;
            height: calc(100% - 28px);
            overflow-y: scroll;
            box-sizing: border-box;
            .info{
                width: 100vw;
                box-sizing: border-box;
                background: #FFFFFF;
                padding: 4px 16px 16px;
                z-index:100;
                .address{
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #160002;
                    line-height: 20px;
                    margin-top: 4px;
                }
                .typeList{
                    width: 100%;
                    display: flex;
                    flex-flow: wrap;
                    margin-top: 16px;
                    .typeItem{
                        width: calc((100% - 24px)/3);
                        height: 66px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        background: #F7F7F7;
                        border-radius: 4px;
                        margin-bottom: 8px;
                        margin-right: 8px;
                        .img{
                            width: 24px;
                            height: 24px;
                        }
                        .text{
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #160002;
                            line-height: 20px;
                        }
                    }
                }
                .baseInfo,.areaInfo{
                    margin-top: 8px;
                    .title{
                        font-size: 14px;
                        font-family: PingFangSC-Semibold, PingFang SC;
                        font-weight: 600;
                        color: #160002;
                        line-height: 20px;
                    }
                    .word{
                        display: flex;
                        margin-top: 8px;
                        .subTitle{
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #786B6C;
                            line-height: 20px;
                            margin-right: 8px;
                            min-width: 60px;
                        }
                        .text{
                            flex: 1;
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #160002;
                            line-height: 20px;
                            display: inline-block;
                        }
                        .subTitleArea{
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #786B6C;
                            line-height: 20px;
                            display: inline-block;
                            margin-right: 8px;
                            min-width: 80px;
                            .text{
                                font-size: 14px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #160002;
                                line-height: 20px;
                            }
                        }
                        .value{
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #160002;
                            line-height: 20px;
                        }

                    }

                }
            }
            .service{
                width: 100vw;
                box-sizing: border-box;
                background: #fff;
                padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
                .serviceItem{
                    margin-top: 4px;
                    .title{
                        font-size: 14px;
                        font-family: PingFangSC-Semibold, PingFang SC;
                        font-weight: 600;
                        color: #160002;
                        line-height: 20px;
                    }
                    .box{
                        margin-top: 12px;
                        display: flex;
                        .left{
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            width: 60px;
                            margin-right: 36px;
                            .boxImg{
                                width: 25px;
                                height: 25px;
                            }
                            .textTitle{
                                font-size: 12px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #160002;
                                line-height: 16px;
                            }
                        }
                        .right{
                            flex: 1;
                            display: flex;
                            .item{
                                width: 50%;
                                .text{
                                    font-size: 12px;
                                    font-family: PingFangSC-Regular, PingFang SC;
                                    font-weight: 400;
                                    color: #160002;
                                    line-height: 18px;
                                    margin-bottom:4px;
                                }
                                .unText{
                                    font-size: 12px;
                                    font-family: PingFangSC-Regular, PingFang SC;
                                    font-weight: 400;
                                    color: #A69E9F;
                                    line-height: 18px;
                                    text-decoration: line-through;
                                }
                                .unit{
                                    font-size: 12px;
                                    font-family: PingFangSC-Semibold, PingFang SC;
                                    font-weight: 600;
                                    color: #160002;
                                    line-height: 18px;
                                }
                                .model{
                                    font-size: 12px;
                                    font-family: PingFangSC-Regular, PingFang SC;
                                    font-weight: 400;
                                    color: #160002;
                                    line-height: 18px;
                                    padding:0 6px;
                                    background: #EAEAEA;
                                    border-radius: 2px;
                                    display: inline-block;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

}
</style>
