<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 class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/storeIcon.png"></image>-->
<!--            </div>-->
            <div class="right">
              <div class="top">
                <text class="title" :style="{fontSize:detail.BRAND_NAME.length>8?'12px':'16px'}">{{detail.COOPMERCHANTS_NAME}}</text>
<!--                <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/effective.svg"></image>-->
              </div>

<!--              <div class="otherMessage">-->
<!--                <span class="label">统一信用代码:</span>-->
<!--                <span class="value">{{detail.TAXPAYER_IDENTIFYCODE || '-'}}</span>-->
<!--              </div>-->

<!--              <div class="otherMessage">-->
<!--                <span class="label">联系人:</span>-->
<!--              </div>-->

              <div class="person" v-for="(subItem,subIndex) in personList" :key="subIndex">
                <span class="name">{{subItem.LINKER_NAME}}</span>
                <span class="phone">{{subItem.LINKER_MOBILEPHONE}}</span>
                <!--                <span class="state">{{subItem.LINKER_STATE===1?'有效':'无效'}}</span>-->
              </div>

              <div class="brandList">
                <scroll-view scroll-x="true" style="width: 100%;height: 80px;white-space: nowrap;">
                    <div class="imgBox"  v-for="(subItem,subIndex) in detail.BrandList" :key="subIndex" >
                      <img  class="brandItem" :src="subItem.ico || 'https://eshangtech.com/ShopICO/ahyd-BID/brand/defaultIcon.png'"/>
                      <span class="value">{{subItem.label}}</span>
                    </div>
                </scroll-view>
              </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="projectLong" class="number">({{projectLong}})</text>
      </div>
      <scroll-view class="list" scroll-y="true" :scroll-with-animation="true">
<!--        @click="handleShopDetail(item)"-->
        <div class="listItem" v-for="(item,index) in serviceList" :key="index" >
          <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">
              <text class="text">{{businessType[item.BUSINESS_TRADE] || '-'}}</text>
<!--              <image class="bottomIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/storeIcon.svg"></image>-->
<!--              <text class="text">{{item.COOPMERCHANTS_NAME || '-'}}</text>-->
            </div>

            <div class="bottom">
              <div class="bottomItemLeft">
                <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 class="bottomItem progressBox">
                  <div class="progress">
                    <div class="have" :style="{width:item.progress }"></div>
                  </div>
                  <text class="text">{{item.progress}}</text>
                </div>
              </div>

              <div class="bottomItemRight">
                <image class="icon" :src="item.BUSINESSPROJECT_ICO"></image>
              </div>
            </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: 'shopDetail',
  data(){
    return {
      menu:{},
      detail:{},// 详情信息
      serviceList:[],// 服务区列表
      descTop:0,// 悬浮框的高度
      descLeft:0,// 悬浮框的左边距
      isShow: false,// 是否显示展开框
      id:'',
      COOPMERCHANTSID:'',
      typeObj:{
        '1000':'A类',
        '2000':'B类',
        '3000':'C类',
        '4000':'D类'
      },
      businessType:{
        // 经营业态
        1: '主餐饮类',
        2: '面馆小吃类',
        3: '轻饮食、食品类',
        4: '特产、工艺品等其他类',
        5: '汽修类',
      },
      personList:[],
      projectLong: 0
    }
  },
  onLoad(query){
    this.menu = uni.getMenuButtonBoundingClientRect()
    console.log('query',query)
    this.id = query.id
    this.COOPMERCHANTSID = query.COOPMERCHANTSID

    console.log('this.id',this.id)
    console.log('this.COOPMERCHANTSID',this.COOPMERCHANTSID)

    // 拿到详情信息
    this.getDetail()
    // 拿到数组
    this.handleGetList()
    // 拿到联系人
    this.handlePerson()
  },
  methods:{
    // 获取详情
    async getDetail(){
      const req = {
        CoopMerchantsId:this.id
      }
      const data = await request.$webGet('EShangApiMain/Merchants/GetCoopMerchantsDetail',req)
      this.detail = data.Result_Data
      console.log('data',data.Result_Data)
    },
    // 拿到联系人
    async handlePerson(){
      const req = {
        searchParameter:{
          COOPMERCHANTS_ID:this.id
        },
        PageIndex:1,
        pagesize: 20
      }
      const data = await request.$webPost('EShangApiMain/Merchants/GetCoopMerchantsLinkerList',req)
      console.log('person',data)
      let list = []
      data.Result_Data.List.forEach(item=>{
        if (item.LINKER_STATE===1){
          list.push(item)
        }
      })
      this.personList = [list[0]]
    },
    //返回上一级s
    handleBack(){
      uni.navigateBack({
        delta: 1
      });
    },
    // 经营项目的列表
    async handleGetList(){
      uni.showLoading({
        title: '正在加载...'
      })
      const req = {
        MerchantsId: this.COOPMERCHANTSID,
      }
      const data = await request.$webGet(`EShangApiMain/BusinessProject/GetMerchantsReceivables`,req)
      console.log('list',data)
      this.serviceList = data.Result_Data.AccountReceivablesList
      if (this.serviceList && this.serviceList.length>0){
        this.projectLong = this.serviceList.length
        this.serviceList.forEach(item=>{
          const nowDay = new Date().getTime()
          const startDay = new Date(item.PROJECT_STARTDATE).getTime()
          const endDay = new Date(item.PROJECT_ENDDATE).getTime()
          const day = endDay - nowDay
          if (day<0){
            item.progress = '100%'
          }else{
            item.progress =((((nowDay-startDay) / (1000*60*60*24)) / item.PROJECT_DAYS).toFixed(2) * 100 + '').substr(0,5) + '%'
          }
          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
    },
  }
}
</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;
        min-height: 164px;
        position: absolute;
        .box{
          width: 100%;
          min-height: 164px;
          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;
          .right{
            width: 100%;
            .top{
              display: flex;
              align-items: center;
              .title{
                display: inline-block;
                width: 100%;
                height: 44px;
                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;
              }
            }
            .otherMessage{
              display: flex;
              justify-content: space-between;
              align-items: center;
              .label{
                display: inline-block;
                text-align: left;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.65);
              }
              .value{
                display: inline-block;
                text-align: right;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.85);
              }
            }
            .person{
              width: 100%;
              height: 28px;
              display: flex;
              align-items: center;
              .name{
                text-align: left;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.65);
              }
              .phone{
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.65);
                margin-left: 12px;
              }
            }
            .brandList{
              width: 100%;
              display: flex;
              margin-top: 10px;
                .imgBox{
                  display: inline-block;
                  border-radius: 6px;
                  margin-right: 8px;
                  text-align: center;
                  .brandItem{
                    width: 50px;
                    height: 50px;
                    border-radius: 4px;
                  }
                  .value{
                    display: block;
                    font-size: 12px;
                  }
                }
            }


            .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: 18px;
                }
                .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;
              }
            }
          }
          .bottom{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .bottomItemLeft{
              .bottomItem{
                display: flex;
                align-items: flex-start;
                margin-bottom: 4px;
                .bottomIcon{
                  width: 16px;
                  height: 16px;
                  margin-right: 4px;
                  margin-top: 2px;
                }
                .progress{
                  width: 150px;
                  height: 8px;
                  border-radius: 4px;
                  background: #f5f2f2;
                  margin-right: 4px;
                  position: relative;
                  overflow: hidden;
                  .have{
                    position: absolute;
                    left: 0;top: 0;
                    height: 100%;
                    background: rgb(107, 150, 248);
                  }
                }
                .text{
                  flex: 1;
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #5C5773;
                  line-height: 22px;
                }
              }
              .progressBox{
                display: flex;
                align-items: center;
              }
            }
            .bottomItemRight{
              width: 60px;
              height: 60px;
              border-radius: 8px;
              overflow: hidden;
              .icon{
                width: 100%;
                height: 100%;
              }
            }
          }

        }
      }
      ::-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>
