<template>
  <div class="main">
    <div class="header">
      <div class="headerBox">
        <div class="headerTop" :style="{height:(menu.bottom + 6) + 'px'}">
          <div class="box" :style="{top:(menu.bottom - (menu.height / 2)) + 'px'}">
            <div class="icon" @click="handleBack">
              <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"></image>
            </div>
            <text class="title">品牌详情</text>
            <div class="seize"></div>
          </div>
        </div>
        <div class="detail" :style="{top:(menu.bottom + 22) + 'px'}">
          <div class="box" >
            <div class="left">
              <image v-if="detail.BRAND_STATE === 1" class="img" :src="detail.BRAND_INTRO"></image>
            </div>
            <div class="right">
              <div class="top">
                <text class="title" :style="{fontSize:detail.BRAND_NAME.length>8?'12px':'16px'}">{{detail.BRAND_NAME}}</text>
                <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/effective.svg"></image>
              </div>
              <div class="descBox">
                <text class="desc">{{detail.BRAND_DESC}}</text>
                <text v-if="detail.BRAND_DESC.length>11" class="more" @click="handleMore($event)">展开</text>
              </div>
              <div class="labelList">
<!--                <text class="labelItem">美食排行榜</text>-->
<!--                <text class="labelItem">这是标签</text>-->
<!--                <text class="labelItem">这是标签标签</text>-->
              </div>
              <div class="typeList">
                <text class="typeItem">{{detail.BUSINESSTRADE_NAME}}</text>
                <text class="typeItem">{{detail.BRAND_TYPENAME}}</text>
              </div>
              <div class="suggest">
                <text class="value">{{detail.COMMISSION_RATIO}}</text>
                <text class="text">建议提成比例</text>
              </div>
            </div>
            <div class="typeBox">
              <image class="typeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/foodIcon.svg"></image>
              <text class="text">服务区</text>
              <text class="number">{{detail.ServerpartList.length}}</text>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="businessProject" >
      <div class="top">
        <text class="projectTitle">经营项目</text>
        <text v-if="serviceList && serviceList.length>0" class="number">({{`${serviceList.length}`}})</text>
      </div>
      <scroll-view class="list" scroll-y="true" :scroll-with-animation="true">
        <div class="listItem" v-for="(item,index) in serviceList" :key="index" @click="handleShopDetail(item)">
          <div class="itemTop">
            <div class="left">
              <div class="iconBox">
                <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/servicePosition.svg"></image>
              </div>
              <div class="content">
                <text class="name">{{item.SERVERPART_NAME}}</text>
                <div class="type">
                  <image class="typeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/typeIcon.svg"></image>
                  <text class="text">{{item.SERVERPART_TYPE}}</text>
                </div>
              </div>
            </div>
            <div class="right">
              <text class="price">{{item.SECTIONFLOW_NUM}}</text>
              <text class="unit">断面流量</text>
            </div>
          </div>

          <div class="itemContent">
            <div class="contentTop">
              <div class="left">
                <text class="itemTitle">{{item.BUSINESSPROJECT_NAME || '-'}}</text>
                <div class="typeBox" v-if="item.COMMODITY_COUNT > 0">
<!--                  <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/store.svg"></image>-->
<!--                  <text class="typeName">在售商品</text>-->
                </div>
              </div>
              <div class="right">
                <text class="price">{{item.PROJECT_AMOUNT || '0'}}</text>
                <text class="unit" >( 万元 )</text>
              </div>
            </div>
            <div class="bottomItem">
              <image class="bottomIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/storeIcon.svg"></image>
              <text class="text">{{item.COOPMERCHANTS_NAME || '-'}}</text>
            </div>

            <div class="bottomItem">
              <image class="bottomIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/fixed.svg"></image>
              <text class="text">{{item.SERVERPARTSHOP_NAME || '-'}}</text>
            </div>

            <div class="bottomItem">
              <image class="bottomIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/date.svg"></image>
              <text class="text">{{ item.PROJECT_STARTDATE && item.PROJECT_ENDDATE ?`${item.PROJECT_STARTDATE}-${item.PROJECT_ENDDATE}`:'-' }}</text>
            </div>
          </div>
        </div>
      </scroll-view>
    </div>
    <div class="meng" v-if="isShow" @click="handleClose">
      <div class="descPopup" :style="{top:descTop +'px',left:(descLeft - 130)+'px'}">
        {{detail.BRAND_DESC}}
      </div>
    </div>
  </div>
</template>
<script>
import request from '@/util/index.js'
export default {
  name: "formatDetail",
  data() {
    return {
      menu:{},
      detail:{},// 详情信息
      serviceList:[],// 服务区列表
      descTop:0,// 悬浮框的高度
      descLeft:0,// 悬浮框的左边距
      isShow: false,// 是否显示展开框
    }
  },
  onLoad(query){
    this.menu = uni.getMenuButtonBoundingClientRect()
    console.log('query',query)
    console.log('query',JSON.parse(query.detail))
    this.detail = JSON.parse(query.detail)
    this.handleGetList()
  },
  methods:{
    //返回上一级s
    handleBack(){
      uni.navigateBack({
        delta: 1
      });
    },
    // 经营项目的列表
    async handleGetList(){
      uni.showLoading({
        title: '正在加载...'
      })
      const req = {
        BusinessTradeId: this.detail.BRAND_INDUSTRY,
        BusinessBrandId: this.detail.BRAND_ID,
      }
      const data = await request.$webGet(`EShangApiMain/BusinessProject/GetBrandReceivables`,req)
      console.log('data',data)
      this.serviceList = data.Result_Data.List
      this.serviceList.forEach(item=>{
        item.SECTIONFLOW_NUM = this.$util.noDecimal(item.SECTIONFLOW_NUM)
      })
      console.log('this.serviceList',this.serviceList)
      uni.hideLoading()
    },
    handleMore(e){
      console.log(e)
      this.descTop = e.detail.y + 15
      this.descLeft = e.detail.x
      this.isShow = true
    },
    handleClose(){
      this.isShow = false
    },
    handleShopDetail(item){
      console.log('item',item)
      uni.navigateTo({
        url:`/pages/commercialBI/shopDetail?id=${item.COOPMERCHANTS_ID}&COOPMERCHANTSID=${item.COOPMERCHANTS_ID_Encrypted}`
      })
    }
  }

}
</script>
<style scoped lang="scss">
.main{
  background: #fff;
  .header{
    width: 100%;
    height: 316px;
    background: linear-gradient(180deg, #7660FF 0%, #ABCAFF 100%);
    .headerBox{
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 1;
      .headerTop{
        width: 100vw;
        position: fixed;
        top: 0;
        left: 0;
        z-index:99999;
        .box{
          padding: 0 16px;
          position: absolute;
          box-sizing: border-box;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          transform: translateY(-50%);
          .icon{
            width: 24px;
            height: 24px;
            .img{
              width: 100%;
              height: 100%;
            }
          }
          .title{
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #fff;
            line-height: 28px;
          }
          .seize{
            width: 24px;
            height: 24px;
          }
        }
      }
      .detail{
        width: 100%;
        box-sizing: border-box;
        padding: 0 16px;
        position: absolute;
        .box{
          width: 100%;
          background: linear-gradient(45deg, #E0F3FF 0%, #E7EEFF 29%, #F1F4FF 50%, #E3EAFF 65%, #D8D2FF 100%);
          border-radius: 8px;
          border: 1px solid #FCFCFF;
          box-sizing: border-box;
          padding: 12px;
          display: flex;
          position: relative;
          .left{
            width: 72px;
            height: 72px;
            border: 3px solid #fff;
            border-radius: 8px;
            .img{
              width: 100%;
              height: 100%;
            }
          }
          .right{
            margin-left: 12px;
            .top{
              display: flex;
              align-items: center;
              .title{
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 600;
                color: #051433;
                line-height: 22px;
              }
              .icon{
                width: 16px;
                height: 16px;
                margin-left: 6px;
              }
            }
            .descBox{
              display: flex;
              align-items: center;
              .desc{
                width: 150px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                display: inline-block;
                height: 18px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #5C5773;
                line-height: 18px;
              }
              .more{
                color: #396CFF;
                font-size: 12px
              }
            }
            .labelList{
              height: 18px;
              display: flex;
              margin-top: 4px;
              .labelItem{
                padding: 0 4px;
                background: rgba(57, 108, 255, 0.1);
                border-radius: 4rpx;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #396CFF;
                line-height: 18px;
                margin-right:5px
              }
            }
            .typeList{
              margin-top: 18px;
              border-radius: 2px;
              .typeItem{
                display: inline-block;
                background: linear-gradient(270deg, rgba(90, 199, 255, 0.15) 0%, rgba(90, 193, 255, 0.15) 100%);
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #0075A1;
                line-height: 22px;
                margin-right: 8px;
                padding: 1px 8px;
              }
            }
            .suggest{
              margin-top: 8px;
              background: linear-gradient(90deg, rgba(72,119,255,0.15) 0%, rgba(72, 119, 255, 0) 100%);
              border-radius: 2px;
              box-sizing: border-box;
              padding: 4px 8px;
              .value{
                font-size: 14px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #396CFF;
                line-height: 16px;
              }
              .text{
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #8995B5;
                line-height: 18px;
                margin-left: 4px;
              }
            }
          }
          .typeBox{
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, #77A1FF 0%, #7967FF 100%);
            border-radius: 0 8px 0 5px;
            padding: 3px 8px;
            //border-image: linear-gradient(227deg, rgba(255, 255, 255, 1), rgba(234, 240, 255, 1), rgba(255, 255, 255, 0)) 1 1;
            position: absolute;
            right: 0;top: 0;
            .typeIcon{
              width: 14px;
              height: 14px;
            }
            .text{
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #E3DEFF;
              line-height: 18px;
              margin-left: 4px;
            }
            .number{
              font-size: 14px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #FFFFFF;
              margin-left: 8px;
            }
          }
        }
      }
    }
  }
  .businessProject{
    width: 100%;
    transform: translateY(-16px);
    height: calc(100vh - 316px);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background: #fff;
    box-sizing: border-box;
    padding: 16px;
    .top{
      display: flex;
      align-items: center;
      .projectTitle{
        font-size: 17px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #051433;
        line-height: 24px
      }
      .number{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #786B6C;
        line-height: 20px;
        margin-left: 4px;
      }
    }
    .list{
      width: 100%;
      height: calc(100vh - 372px);
      margin-top: 8px;
      .listItem{
        width: 100%;
        border-radius: 8px;
        border: 1px solid #E8E7FF;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
        background: linear-gradient(207deg, rgba(202, 202, 255, 0.25) 0%, rgba(243, 242, 255, 0.25) 100%);
        .itemTop{
          width: 100%;
          height: 60px;
          background: linear-gradient(270deg, #EBECFF 0%, #E9F9FF 100%);
          padding: 8px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          .left{
            display: flex;
            align-items: center;
            .iconBox{
              width: 36px;
              height: 36px;
              border: 2px solid #fff;
              border-radius: 50%;
              .icon{
                width: 100%;
                height: 100%;
              }
            }
            .content{
              margin-left: 16px;
              .name{
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #051433;
                line-height: 22px;
              }
              .type{
                width: 48px;
                height: 16px;
                border: 1px solid #4F92FF;
                display: flex;
                align-items: center;
                border-radius: 3px;
                .typeIcon{
                  width: 21px;
                  height: 100%;
                }
                .text{
                  font-size: 12px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #6370FF;
                  line-height: 12px;
                  margin-left: 2px;
                }
              }
            }
          }
          .right{
            display: flex;
            flex-direction: column;
            .price{
              font-size: 18px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #683FF6;
              line-height: 22px;
              text-align: right;
            }
            .unit{
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #A3A2B9;
              line-height: 18px;
            }
          }
        }
        .itemContent{
          width: 100%;
          flex: 1;
          box-sizing: border-box;
          padding: 16px 12px;
          .contentTop{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            .left{
              width: 80%;
              .itemTitle{
                font-size: 14px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #051433;
                line-height: 20px;
              }
              .typeBox{
                display: flex;
                align-items: center;
                margin-top: 4px;
                .icon{
                  width: 18px;
                  height: 18px;
                }
                .typeName{
                  font-size: 12px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #5C5773;
                  line-height: 18px;
                  margin-left: 4px;
                }
              }
            }
            .right{
              display: flex;
              flex-direction: column;
              width: 20%;
              .price{
                font-size: 18px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #683FF6;
                line-height: 22px;
                text-align: right;
              }
              .unit{
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ABA9B9;
                line-height: 18px;
                text-align: right;
              }
            }
          }
          .bottomItem{
            display: flex;
            align-items: flex-start;
            margin-bottom: 4px;
            .bottomIcon{
              width: 16px;
              height: 16px;
              margin-right: 4px;
              margin-top: 2px;
            }
            .text{
              flex: 1;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #5C5773;
              line-height: 22px;
            }
          }
        }
      }
      ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        color:transparent;
      }

      /*定义滚动条轨道 内阴影+圆角*/
      ::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color:transparent;
      }

      /*定义滑块 内阴影+圆角*/
      ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color:transparent;
      }
    }
  }
  .meng{
    position: relative;
    width: 100vw;
    height: 100vh;
    top: -100vh;left: 0;
    z-index: 99;
    .descPopup{
      width: 200px;
      background: #FFFFFF;
      box-shadow: 0 0 30px 0 rgba(22,4,82,0.13);
      border-radius: 6px;
      box-sizing: border-box;
      padding: 12px;
      position: fixed;
      top: 0;left: 16px;
    }

  }

}
</style>
