<template>
  <view class="projectWarningDetail">
    <view class="earlyTop" :style="{height: `calc(${menu.bottom}px + 472rpx)`}">
      <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="pageTitle">商家详情</view>
        <view class="default"></view>
      </view>

      <view class="detailBox" :style="{top: `calc(${menu.bottom}px + 38rpx)`}">
        <view class="contentBox">
          <view class="contentTop">
            <view class="topLeft">
              <image class="logo"/>
            </view>
            <view class="topRight">
              <view class="rightTop">
                <text class="shopName">吉祥馄饨</text>
                <view class="fixedBox">
                  <image class="fixed"/>
                  <text class="serverPartName">新桥服务区</text>
                </view>
              </view>
              <view class="rightBottom">
                <text class="type">合作经营</text>
                <text class="type" style="margin-left: 12rpx">2024/12/30 结束</text>
              </view>
            </view>
          </view>
          <view class="contentBottom">
            <view class="moneyBox">
              <view style="width: 50%;display: inline-block">
                <view class="moneyItem">
                  <text class="value">11,546.32</text>
                  <text class="unit">营收 /万元</text>
                </view>
              </view>
              <view style="width: 50%;display: inline-block">
                <view class="moneyItem">
                  <text class="value">8,165.87</text>
                  <text class="unit">盈利 /万元</text>
                </view>
              </view>
            </view>
            <view class="messageBox">
              <image class="messageIcon" src="/static/images/warning/error6st.png"/>
              <text class="messageType">保底租金偏低</text>
              <text class="messageDesc">商家利润超过100万</text>
            </view>

            <view class="line"></view>
            <text class="overTime">关闭日期：2024/08/30</text>
          </view>
        </view>
      </view>
    </view>

    <view class="detailContentBox" :style="{height: `calc(100vh - ${menu.bottom}px - 472rpx)`}">
      <view class="contentBox">
        <view class="tabBox">
          <view class="tabItem selectItem">
            <image class="tabItemIcon" src="/static/images/warning/tab1Select.png"/>
            <text class="tabText">综合分析</text>
          </view>
          <view class="tabItem">
            <image class="tabItemIcon" src="/static/images/warning/tab2NoSelect.png"/>
            <text class="tabText">经营情况</text>
          </view>
        </view>

        <view class="descBox" v-if="selectTab===1">
          <image class="descIcon" src="/static/images/warning/warningLight.png"/>
          <view class="desc">
            <text class="descText">商家存在 <text class="big">较大的盈利优势</text>， 建议后期项目调整保底提成</text>
            <view style="display: inline-block">
              <view class="noticeBox">
                <image class="noticeIcon" src="/static/images/warning/noticeIcon.png"/>
              </view>
            </view>
          </view>
        </view>

        <view class="firstContent" v-if="selectTab===1">
          <view class="contentTitle">
            在<text class="yellowText">统一时间</text>口径下：
          </view>
          <view class="contentItem" style="display: flex;align-items: center">
            年度统计周期内：
            <image class="date" src="/static/images/warning/dateIcon.png"/>
            <text class="time">2023/04/01 - 2024/03/31</text>
          </view>

          <view class="contentItem">
            对客营收
            <text class="money">170.94</text>
            <text class="unit">/万元</text>
            ，商家入账
            <text class="money">132.14</text>
            <text class="unit">/万元</text>
          </view>

          <view class="contentItem">
            按合同约定支付驿达租金
            <text class="money">135.24</text>
            <text class="unit">/万元</text>
          </view>

          <view class="contentItem">
            按对客销售的 <text style="color: #FE7628;margin: 0 8rpx">40%</text>成本预估经营成本需
            <text class="money">87.14</text>
            <text class="unit">/万元</text>
          </view>

          <view class="contentItem">
            商家<text style="color: #FE7628;margin: 0 8rpx">预计盈利</text>
            <text class="money">69.15</text>
            <text class="unit">/万元</text>
          </view>

          <view class="contentItem">
            <text class="yellowBgText">地方特色小吃/休闲小吃</text>：
            <text class="yellowBgText">膳仁福小吃</text>
          </view>

          <view class="contentItem" style="display: flex;align-items: center">
            优于<text style="color: #FE7628;margin: 0 8rpx">45.18%</text>
            的经营业态项目
            <view style="display: flex;align-items: center;vertical-align: top">
              <image class="stateIcon" src="/static/images/warning/Like.png"/>
<!--              /static/images/warning/stateIcon.png-->
              <text class="stateText">优秀</text>
              <view class="questionBox">
                <image class="questionIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/noticeIcon.svg"/>
<!--                <view class="questionContent">-->
<!--                  <view>{{ `>=80 %，优秀` }}</view>-->
<!--                  <view>{{ `<= 80 % 且 >= 50 %，良好` }}</view>-->
<!--                  <view>{{ `<50 %，请关注此项目经营状态` }}</view>-->
<!--                </view>-->
              </view>
            </view>
          </view>

          <view class="contentTitle" style="margin-top: 46rpx">
            在<text class="typeText">A类</text>口径下：
          </view>

          <view class="contentItem">
            获客能力排名第
            <text class="money">12</text>
            <text class="unit">/37</text>
          </view>
          <view class="contentItem">
            租金交付能力排名第
            <text class="money">9</text>
            <text class="unit">/37</text>
          </view>

          <view class="contentTitle" style="padding-left: 14rpx;margin-top: 46rpx;display: flex;align-items: center">
              在所有
            <view class="YdBox">
              <image class="YDLogo" src="/static/images/tabBar/company_active.png"/>
              <text style="color: red;text-indent: 0">驿达旗下</text>
            </view> 服务区中：
          </view>
          <view class="contentItem">
            获客能力排名第
            <text class="money">27</text>
            <text class="unit">/100</text>
          </view>
          <view class="contentItem">
            租金交付能力排名第
            <text class="money">18</text>
            <text class="unit">/100</text>
          </view>
        </view>

        <view class="secondContent" v-if="selectTab===2">
          <view class="contentItem" style="display: flex;align-items: center;margin-bottom: 16rpx">
            <text class="indexDesc">第一期</text>
            <view class="timeBox">
              <image class="dateIcon" src="/static/images/warning/dateIcon.png"/>
              <text class="dateText">2023/04/01 - 2024/03/31</text>
            </view>
          </view>

          <view class="contentItem">
            项目履约中...<text class="orangeText">保底租金已交付</text>
          </view>

          <view class="contentItem">
            对客销售总额<text class="money">170.94</text>
            <text class="unit">/万元</text>
            ，商家入账<text class="money">135.24</text>
            <text class="unit">/万元</text>
          </view>

          <view class="contentItem">
            按合同约定支付驿达租金<text class="money">135.24</text>
            <text class="unit">/万元</text>
          </view>

          <view class="contentItem">
            按对客销售的<text class="orangeText" style="margin: 0 8rpx">40%</text>
            成本预估经营成本需
            <text class="money">87.14</text>
            <text class="unit">/万元</text>
          </view>

          <view class="contentItem">
            商家<text class="orangeText" style="margin: 0 8rpx">预计盈利</text>
            <text class="money">69.15</text>
            <text class="unit">/万元</text>
          </view>

          <view class="contentItem">
            商家进度完成
            <text class="money">30.54%</text>
          </view>

          <view class="contentItem">
            租金交付已完成
            <text class="money">52.69%</text>
          </view>

          <view class="contentItem">
            租金交付进度 <text class="orangeText" style="margin: 0 8rpx">优于</text> 项目进度
          </view>

          <view class="resultBox">
            <image class="warningLight" src="/static/images/warning/warningLight.png"/>
            项目保底
            <text class="blueText">基本实现</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    name: "projectWarningDetail",
    data(){
      return {
        menu:{},
        serviceInfo:{},// 当前选中服务区
        selectTab: 2,// 选中的tab
      }
    },
    onLoad(query){
      let systemInfo = uni.getSystemInfoSync()
      this.menu = uni.getMenuButtonBoundingClientRect()
      let seat = uni.getStorageSync('currentService')
      this.serviceInfo = seat
    },
  }
</script>
<style scoped lang="scss">
.projectWarningDetail{
  width: 100%;
  background: #F3F3F3;
  .earlyTop{
    width: 100%;
    background: #F3F3F3;
    position: relative;
    .earlyTopBg{
      width: 100%;
      height: 430rpx;
      background: linear-gradient( 180deg, #D8E3FF 0%, #F3F3F3 100%);
    }
    .headerBox{
      width: calc(100% - 32rpx);
      position: absolute;
      left: 16rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .backIconBox{
        width: 48rpx;
        height: 48rpx;
        margin-right: 18rpx;
        .backIcon{
          width: 100%;
          height: 100%;
        }
      }
      .pageTitle{
        font-family: PingFangTC, PingFangTC;
        font-weight: 600;
        font-size: 34rpx;
        color: #160002;
        line-height: 48rpx;
        text-align: center;
        font-style: normal;
      }
      .default{
        width: 48rpx;
        height: 48rpx;
      }
    }

    .detailBox{
      width: calc(100% - 48rpx);
      left: 24rpx;
      position: absolute;
      background: #FFFFFF;
      border-radius: 16rpx;
      box-sizing: border-box;
      padding: 2rpx;
      .contentBox{
        width: 100%;
        height: 438rpx;
        background: linear-gradient( 180deg, #CDE1FF 0%, #FFFFFF 100%);
        border-radius: 14rpx;
        box-sizing: border-box;
        padding: 24rpx;
        .contentTop{
          display: flex;
          align-items: center;
          justify-content: space-between;
          .topLeft{
            width: 96rpx;
            height: 96rpx;
            border-radius: 16rpx;
            overflow: hidden;
            .logo{
              width: 100%;
              height: 100%;
            }
          }
          .topRight{
            flex: 1;
            margin-left: 16rpx;
            .rightTop{
              display: flex;
              align-items: center;
              justify-content: space-between;
              .shopName{
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 32rpx;
                color: #160002;
                line-height: 44rpx;
                text-align: left;
                font-style: normal;
              }
              .fixedBox{
                display: flex;
                align-items: center;
                .fixed{
                  width: 32rpx;
                  height: 32rpx;
                  margin-right: 4rpx;
                }
                .serverPartName{
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #626973;
                  line-height: 40rpx;
                  text-align: left;
                  font-style: normal;
                }
              }
            }
            .rightBottom{
              .type{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #5E5A59;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
                padding: 2rpx 8rpx;
                background: #FFFFFF;
                border-radius: 4rpx;
              }
            }
          }
        }
        .contentBottom{
          .moneyBox{
            width: 100%;
            margin-top: 48rpx;
            .moneyItem{
              display: flex;
              flex-direction: column;
              .value{
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 42rpx;
                color: #160002;
                line-height: 56rpx;
                text-align: left;
                font-style: normal;
              }
              .unit{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #9A9A9A;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
              }
            }
          }
          .messageBox{
            margin-top: 16rpx;
            display: flex;
            align-items: center;
            .messageIcon{
              width: 48rpx;
              height: 48rpx;
              margin-right: 8rpx;
            }
            .messageType{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #1979FE;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
              padding: 4rpx 12rpx;
              background: #E3EFFF;
              border-radius: 4rpx;
              margin-right: 16rpx;
            }
            .messageDesc{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #F07604;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
            }
          }
          .line{
            width: 100%;
            height: 2rpx;
            background: #F3F3F3;
            margin: 32rpx 0 16rpx 0;
          }
          .overTime{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #5E5A59;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
          }
        }
      }
    }
  }

  .detailContentBox{
    width: 100%;
    background: #fff;
    padding: 2rpx;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    box-sizing: border-box;
    margin-top: 32rpx;
    .contentBox{
     width: 100%;
      .tabBox{
        width: 100%;
        height: 108rpx;
        display: flex;
        align-items: center;
        border-radius: 32rpx 32rpx 0rpx 0rpx;
        overflow: hidden;
        .tabItem{
          width: 50%;
          height: 108rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient( 180deg, #F3F4F8 0%, #FFFFFF 100%);
          .tabItemIcon{
            width: 40rpx;
            height: 40rpx;
            margin-right: 8rpx;
          }
          .tabText{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 32rpx;
            color: #786B6C;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;
          }
        }
        .selectItem{
          background: linear-gradient( 180deg, #DCE5FA 0%, rgba(255,255,255,0) 100%);
          border-top-right-radius: 24rpx;
          .tabText{
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 32rpx;
            color: #160002;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;
          }
        }
      }

      .descBox{
        background: #F7F8FA;
        border-radius: 8rpx;
        width: calc(100% - 64rpx);
        margin-left: 32rpx;
        box-sizing: border-box;
        padding: 16rpx 24rpx;
        display: flex;
        .descIcon{
          width: 48rpx;
          height: 48rpx;
        }
        .desc{
          flex: 1;
          .descText{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #786B6C;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            vertical-align: top;
            .big{
              color: #2363FF;
              font-weight: 400;
              font-size: 30rpx;
            }
          }
          .noticeBox{
            display: flex;
            align-items: center;
            .noticeIcon{
              width: 32rpx;
              height: 32rpx;
            }
          }
        }
      }

      .firstContent{
        width: calc(100% - 64rpx);
        margin-left: 32rpx;
        margin-top: 40rpx;
        .contentTitle{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #786B6C;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          position: relative;
          text-indent: 1rem;
          margin-bottom: 20rpx;
          .yellowText{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #571519;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;
            padding: 2rpx 16rpx;
            background: #FCF1D3;
            border-radius: 4rpx;
            margin: 0 8rpx;
          }
          .typeText{
            background: linear-gradient( 134deg, #FFEED1 0%, #FFE1CD 100%);
            border-radius: 4rpx;
            padding: 2rpx 8rpx;
            color: #FF7E05;
            margin: 0 12rpx;
          }
          .YdBox{
            display: flex;
            align-items: center;
            margin: 0 12rpx;
            .YDLogo{
              width: 48rpx;
              height: 48rpx;
              margin-right: 8rpx;
            }
            .YDText{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #D7000F;
              line-height: 44rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }
        .contentTitle:before{
          content:'';
          width: 6rpx;
          height: 28rpx;
          background: #3973FB;
          position: absolute;
          left: 0;top: 50%;
          transform: translateY(-50%);
        }
        .contentItem{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #160002;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          margin-bottom: 20rpx;
          .date{
            width: 32rpx;
            height: 32rpx;
            margin: 0 8rpx;
          }
          .time{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #160002;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }
          .money{
            font-family: DINAlternate, DINAlternate;
            font-weight: bold;
            font-size: 28rpx;
            color: #160002;
            line-height: 48rpx;
            text-align: left;
            font-style: normal;
            margin: 0 4rpx;
          }
          .unit{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #9A9A9A;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }
          .yellowBgText{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #571519;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;
            padding: 2rpx 16rpx;
            background: #FCF1D3;
            border-radius: 4rpx;
          }
          .stateIcon{
            width: 40rpx;
            height: 40rpx;
          }
          .stateText{
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 32rpx;
            color: #FE7628;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;
          }
          .questionBox{
            width: 20px;
            height: 20px;
            cursor: pointer;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 9px;
            .questionIcon{
              width: 20px;
              height: 20px;
            }
            .questionContent{
              display: none;
            }
          }
        }
      }
      .secondContent{
        width: calc(100% - 64rpx);
        margin-left: 32rpx;
        margin-top: 8rpx;
        .contentItem{
          margin-bottom: 20rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #160002;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          .indexDesc{
            background: #E1F3E6;
            border-radius: 4rpx;
            padding: 2rpx 8rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #1A5D2B;
            line-height: 44rpx;
            text-align: center;
            font-style: normal;
            margin-right: 18rpx;
          }
          .timeBox{
            display: flex;
            align-items: center;
            .dateIcon{
              width: 32rpx;
              height: 32rpx;
              margin-right: 8rpx;
            }
            .dateText{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #160002;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
            }
          }
          .orangeText{
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 28rpx;
            color: #FE7628;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }
          .money{
            font-family: DINAlternate, DINAlternate;
            font-weight: bold;
            font-size: 28rpx;
            color: #160002;
            line-height: 48rpx;
            text-align: left;
            font-style: normal;
            margin: 0 4rpx;
          }
          .unit{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #9A9A9A;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }
        }
        .resultBox{
          width: 100%;
          background: #F7F8FA;
          border-radius: 8rpx;
          box-sizing: border-box;
          padding: 20rpx 24rpx;
          display: flex;
          align-items: center;

          .warningLight{
            width: 48rpx;
            height: 48rpx;
            margin-right: 8rpx;
          }
          .blueText{
            color: #2363FF;
            margin-left: 8rpx;
          }
        }
      }
    }
  }
}
</style>
