<template>
  <view class="projectWarningDetail">
    <view class="meng" v-if="showNotice || showQuestion" @click="handleCloseNotice"></view>


    <view class="earlyTop" :style="{height: detail.BUSINESS_ENDDATE?`calc(${menu.bottom}px + 570rpx)`:`calc(${menu.bottom}px + 490rpx)`}">
      <view class="earlyTopBg"></view>
      <view class="headerBox" :style="{paddingTop: menu.top + 'px',height:menu.bottom + 4 +'px'}">
        <view :style="{height:menu.height +'px',display: 'flex',alignItems: 'center',justifyContent:'space-between',padding:'0 32rpx',width:'100%'}">
          <view class="backIconBox" @click="handleBack">
            <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>

      <view class="detailBox" :style="{top: `calc(${menu.bottom}px + 38rpx)`}">
        <view class="contentBox">
          <view class="contentTop">
            <view class="topLeft">
              <image class="logo" :src="detail.Brand_ICO"/>
            </view>
            <view class="topRight">
              <view class="rightTop">
                <text class="shopName">{{ detail.SERVERPARTSHOP_NAME || ''}}</text>
                <view class="fixedBox">
                  <image class="fixed" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/fixed.png"/>
                  <text class="serverPartName">{{ detail.SERVERPART_NAME || '' }}</text>
                </view>
              </view>
              <view class="rightBottom">
                <text class="type">{{ businessTypeObj[detail.BUSINESS_TYPE] }}</text>
<!--                <text class="type" style="margin-left: 12rpx">{{ `${detail.ENDDATE}结束` }}</text>-->
              </view>

              <view class="MERCHANTS_NAMERightBox">
                <text class="MERCHANTS_NAME">{{detail.MERCHANTS_NAME || ''}}</text>
              </view>
            </view>
          </view>
          <view class="contentBottom">
            <view class="moneyBox">
              <view style="width: 50%;display: inline-block">
                <view class="moneyItem">
                  <text class="value">{{detail.REVENUE_AMOUNT?$util.getMoney(detail.REVENUE_AMOUNT / 10000):'-'}}</text>
                  <text class="unit">营收 /万元</text>
                </view>
              </view>
              <view style="width: 50%;display: inline-block">
                <view class="moneyItem">
                  <text class="value">{{detail.PROFIT_AMOUNT?$util.getMoney(detail.PROFIT_AMOUNT / 10000):'-'}}</text>
                  <text class="unit">盈利 /万元</text>
                </view>
              </view>
            </view>
            <view class="messageBox">
              <view style="display: flex;align-items: center">
                <image class="messageIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/error6st.png"/>
                <text class="messageType">{{ warningNameObj[detail.WARNING_TYPE] }}</text>
              </view>
              <view :style="{marginTop:'16rpx',marginBottom: detail.BUSINESS_ENDDATE?'':'16rpx'}">
                <text class="messageDesc">{{ warningDescObj[detail.WARNING_TYPE] }}</text>
              </view>
            </view>

            <view class="line" v-if="detail.BUSINESS_ENDDATE"></view>
            <view v-if="detail.BUSINESS_ENDDATE" style="padding: 16rpx 0 24rpx 0;display: flex;align-items: center;justify-content: space-between">
              <text class="overTime" >{{ `门店关闭：${detail.BUSINESS_ENDDATE}` }}</text>
              <text class="type" style="margin-left: 12rpx">{{ `项目到期：${detail.ENDDATE}结束` }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="detailContentBox" >
<!--      :style="{height: `calc(100vh - ${menu.bottom}px - 510rpx)`}"-->
      <view class="contentBox">
        <view class="tabBox">
          <view :class="selectTab===1?'tabItem selectItemLeft':'tabItem'" @click="handleChangeTab(1)">
            <image class="tabItemIcon" :src="selectTab===1?'https://eshangtech.com/ShopICO/ahyd-BID/warning/tab1Select.png':'https://eshangtech.com/ShopICO/ahyd-BID/warning/tab1NOSelect.png'"/>
            <text class="tabText">综合分析</text>
          </view>
          <view :class="selectTab===2?'tabItem selectItemRight':'tabItem'" @click="handleChangeTab(2)">
            <image class="tabItemIcon" :src="selectTab===2?'https://eshangtech.com/ShopICO/ahyd-BID/warning/tab2Select.png':'https://eshangtech.com/ShopICO/ahyd-BID/warning/tab2NoSelect.png'"/>
            <text class="tabText">经营情况</text>
          </view>
        </view>

        <view class="descBox" v-if="selectTab===1 && firstTabDetail.Profit">
          <image class="descIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/warningLight.png"/>
          <view class="desc">
            <text class="descText">
              {{firstTabDetail.Profit / 10000< 0 ?'商家存在':
                    firstTabDetail.Profit / 10000 <= 10 && firstTabDetail.Profit / 10000 > 0?'商家存在':
                        firstTabDetail.Profit / 10000 > 10 && firstTabDetail.Profit / 10000 < 100?'商家经营状态':
                            firstTabDetail.Profit / 10000 >= 100?'商家存在':''
              }}
               <text class="big">{{
                firstTabDetail.Profit / 10000< 0 ?'退场风险':
                    firstTabDetail.Profit / 10000 <= 10 && firstTabDetail.Profit / 10000 > 0?'较大经营风险':
                        firstTabDetail.Profit / 10000 > 10 && firstTabDetail.Profit / 10000 < 100?'良好':
                            firstTabDetail.Profit / 10000 >= 100?'较大的盈利优势':''
              }}</text>{{
              firstTabDetail.Profit / 10000< 0 ?'，请密切关注此项目经营状态！':
              firstTabDetail.Profit / 10000 <= 10 && firstTabDetail.Profit / 10000 > 0?'，请关注此项目经营状态！':
              firstTabDetail.Profit / 10000 > 10 && firstTabDetail.Profit / 10000 < 100?'，能较好的进行持续经营！':
              firstTabDetail.Profit / 10000 >= 100?'，建议后期项目调整保底提成！':''
              }}
            </text>
            <view style="display: inline-block">
              <view class="noticeBox" @click="handleShowNotice">
                <image class="noticeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/noticeIcon.png"/>
                <view class="noticeDesc" v-if="showNotice" @click.stop="handleCloseNotice">
                  <view>{{ `1、预计盈利<${0}万元，商家存在退场风险，请密切关注此项目经营状态！`}}</view>
                  <view>{{ `2、预计盈利=<${10}万元且>${0}万元，商家存在较大经营风险，请关注此项目经营状态！` }}</view>
                  <view>{{ `3、预计盈利>${10}万元且<${100}万元，商家经营状态良好，能较好的进行持续经营！` }}</view>
                  <view>{{ `4、预计盈利>=${100}万元，商家存在较大的盈利优势，建议后期项目调整保底提成！` }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="firstContent" v-if="selectTab===1">
          <view v-if="firstTabDetail.BUSINESS_TRADE">
            <view class="contentTitle">
              在<text class="yellowText">统一时间</text>口径下：
            </view>
            <view class="contentItem" style="display: flex;align-items: center">
              年度统计周期内：
              <image class="date" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/dateIcon.png"/>
              <text class="time">{{`${firstTabDetail.STATISTICS_STARTDATE}-${firstTabDetail.STATISTICS_ENDDATE}`}}</text>
            </view>

            <view class="contentItem">
              对客营收
              <text class="money">{{ firstTabDetail.PROJECT_REVENUE?$util.getMoney(firstTabDetail.PROJECT_REVENUE / 10000):'-'}}</text>
              <text class="unit">/万元</text>
              ，商家入账
              <text class="money">{{ firstTabDetail.SUBROYALTY_AMOUNT?$util.getMoney(firstTabDetail.SUBROYALTY_AMOUNT / 10000):'-'}}</text>
              <text class="unit">/万元</text>
            </view>

            <view class="contentItem">
              按合同约定支付驿达租金
              <text class="money">{{ firstTabDetail.ROYALTY_THEORY?$util.getMoney(firstTabDetail.ROYALTY_THEORY / 10000):'-'}}</text>
              <text class="unit">/万元</text>
            </view>

<!--            <view class="contentItem">-->
<!--              按对客销售的 <text style="color: #FE7628;margin: 0 8rpx">40%</text>成本预估经营成本需-->
<!--              <text class="money">{{ firstTabDetail.PROJECT_REVENUE?$util.getMoney(firstTabDetail.PROJECT_REVENUE * 0.4 / 10000):'-'}}</text>-->
<!--              <text class="unit">/万元</text>-->
<!--            </view>-->

            <view class="contentItem">
              按对客销售的<text style="color: #FE7628;margin: 0 8rpx">{{ detail.COST_RATE ? `${detail.COST_RATE}%` : '-' }}</text>成本预估经营成本需
              <text class="money">{{ firstTabDetail.PROJECT_REVENUE ? $util.getMoney(firstTabDetail.PROJECT_REVENUE * (detail.COST_RATE ? detail.COST_RATE / 100 : 0) / 10000) : '' }}</text><text class="unit">/万元</text>
            </view>
            <view class="contentItem" v-if="firstTabDetail.PROJECT_REVENUE">
              人工成本，按<text style="color: #FE7628;margin: 0 8rpx">{{ detail.LABOURS_COUNT || '' }}</text>个人，平均工资<text style="color: #FE7628;margin: 0 8rpx">{{ detail.LABOURS_WAGE || '' }}</text>元/月，实际发生
              <text style="color: #FE7628;margin: 0 8rpx">{{ detail.MONTH_COUNT || '' }}</text>个月，合计人工成本<text class="money">{{$util.getMoney((detail.LABOURS_COUNT * detail.LABOURS_WAGE * detail.MONTH_COUNT) / 10000)}}</text>万元
            </view>
            <view class="contentItem" v-if="firstTabDetail.PROJECT_REVENUE">
              折旧费用，按总投入<text style="color: #FE7628;margin: 0 8rpx">{{detail.DEPRECIATION_EXPENSE || ''}}</text>万元，<text style="color: #FE7628;margin: 0 8rpx">{{detail.DEPRECIATION_YEAR || ''}}</text>
              年折旧，实际发生<text style="color: #FE7628;margin: 0 8rpx">{{detail.MONTH_COUNT || ''}}</text>月，合计折旧费用<text class="money">{{$util.getMoney((detail.DEPRECIATION_EXPENSE / detail.DEPRECIATION_YEAR / 12) * detail.MONTH_COUNT)}}</text>万元
            </view>
            <view class="contentItem" v-if="firstTabDetail.PROJECT_REVENUE">
              其他经营费用，按每年综合经营费用<text class="money">{{detail.OTHER_EXPENSE || ''}}</text>万元预估
            </view>
            <view class="contentItem" v-if="firstTabDetail.PROJECT_REVENUE">
              <text class="unit">实际商家经营成本 = 经营成本 + 人工成本 + 折旧费用 + 其他经营费用 = </text><text class="money">
              {{$util.getMoney( (firstTabDetail.PROJECT_REVENUE * (detail.COST_RATE ? detail.COST_RATE / 100 : 0) / 10000) + ((detail.LABOURS_COUNT * detail.LABOURS_WAGE * detail.MONTH_COUNT) / 10000) + ((detail.DEPRECIATION_EXPENSE / detail.DEPRECIATION_YEAR / 12) * detail.MONTH_COUNT) + detail.OTHER_EXPENSE )}}
              </text>万元
            </view>

            <view class="contentItem">
              商家<text style="color: #FE7628;margin: 0 8rpx">{{ firstTabDetail.SUBROYALTY_AMOUNT - ( (firstTabDetail.PROJECT_REVENUE * (detail.COST_RATE ? detail.COST_RATE / 100 : 0) ) + ((detail.LABOURS_COUNT * detail.LABOURS_WAGE * detail.MONTH_COUNT)) + ((detail.DEPRECIATION_EXPENSE / detail.DEPRECIATION_YEAR / 12) * detail.MONTH_COUNT) + detail.OTHER_EXPENSE )<0?'预计预亏':'预计盈利' }}</text>
              <text class="money">{{ firstTabDetail.SUBROYALTY_AMOUNT?
                  $util.getMoney(Math.abs(
                      ((firstTabDetail.SUBROYALTY_AMOUNT - ( (firstTabDetail.PROJECT_REVENUE * (detail.COST_RATE ? detail.COST_RATE / 100 : 0)) + (detail.LABOURS_COUNT * detail.LABOURS_WAGE * detail.MONTH_COUNT) + ((detail.DEPRECIATION_EXPENSE / detail.DEPRECIATION_YEAR / 12) * detail.MONTH_COUNT * 10000) + (detail.OTHER_EXPENSE * 10000) ) )) / 10000)
                  ):'-'}}</text><text class="unit">/万元</text>
            </view>

            <view class="contentItem" style="margin-bottom: 8rpx">
              <text class="yellowBgText">{{`${BusinessTradeIdsObj[firstTabDetail.BUSINESS_TRADE]}/${BusinessTradeIdsBigObj[firstTabDetail.BUSINESS_PTRADE]}`}}</text>：
              <!--            地方特色小吃/休闲小吃-->
              <text class="yellowBgText">{{ firstTabDetail.SHOPSHORTNAME || '' }}</text>
            </view>

            <view class="contentItem" style="display: flex;align-items: center;flex-wrap: wrap;margin-bottom: 0">
              {{ firstTabDetail.ACCOUNT_RATE>=80?'优于':
                firstTabDetail.ACCOUNT_RATE< 80 && firstTabDetail.ACCOUNT_RATE>= 50?'优于':
                    firstTabDetail.ACCOUNT_RATE< 50?'租赁收入低于':''
              }}<text style="color: #FE7628;margin: 0 8rpx">{{ firstTabDetail.ACCOUNT_RATE?`${firstTabDetail.ACCOUNT_RATE}%`:'' }}</text>
              的经营业态项目
              <view style="display: flex;align-items: center;vertical-align: top;margin-left: 8rpx">
                <image class="stateIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/Like.png"/>
                <!--              https://eshangtech.com/ShopICO/ahyd-BID/warning/stateIcon.png-->
                <text class="stateText">{{
                    firstTabDetail.ACCOUNT_RATE>=80?'优秀':
                        firstTabDetail.ACCOUNT_RATE<80 && firstTabDetail.ACCOUNT_RATE>= 50?'良好':
                            firstTabDetail.ACCOUNT_RATE< 50?'请关注此项目经营状况！':''
                  }}</text>
                <view class="questionBox">
                  <image class="questionIcon" @click="handleShowQuestion" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/noticeIcon.svg"/>
                  <view class="questionContent" @click="handleCloseNotice" v-if="showQuestion">
                    <view>{{ `>=${80} %，优秀` }}</view>
                    <view>{{ `<= ${80} % 且 >= ${50} %，良好` }}</view>
                    <view>{{ `<${50} %，请关注此项目经营状态` }}</view>
                  </view>
                </view>
              </view>
            </view>

            <view class="contentTitle" style="margin-top: 40rpx">
              在<text class="typeText">{{SERVERPARTTYPEOBJ[firstTabDetail.SERVERPART_TYPE]}}</text>口径下：
            </view>

            <view class="contentItem">
              获客能力排名第
              <text class="money">{{ firstTabDetail.TRADEREVENUE_RANK_TYPE }}</text>
              <text class="unit">/{{ firstTabDetail.TRADE_COUNT_TYPE }}</text>
            </view>
            <view class="contentItem">
              租金交付能力排名第
              <text class="money">{{ firstTabDetail.TRADEACCOUNT_RANK_TYPE }}</text>
              <text class="unit">/{{ firstTabDetail.TRADE_COUNT_TYPE }}</text>
            </view>

            <view class="contentTitle" style="padding-left: 14rpx;margin-top: 40rpx;display: flex;align-items: center">
              在所有
              <view class="YdBox">
                <image class="YDLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/tabBar/company_active.png"/>
                <text style="color: red;text-indent: 0">驿达旗下</text>
              </view> 服务区中：
            </view>
            <view class="contentItem">
              获客能力排名第
              <text class="money">{{ firstTabDetail.TRADEREVENUE_RANK }}</text>
              <text class="unit">/{{ firstTabDetail.TRADE_COUNT }}</text>
            </view>
            <view class="contentItem">
              租金交付能力排名第
              <text class="money">{{ firstTabDetail.TRADEACCOUNT_RANK }}</text>
              <text class="unit">/{{ firstTabDetail.TRADE_COUNT }}</text>
            </view>
          </view>
          <view style="color: red" v-else >未对项目进行设置业态，无法分析！</view>
        </view>

        <view class="secondContent" v-if="selectTab===2">
          <view v-for="(item,index) in secondTabList" :key="index" style="margin-bottom: 48rpx">
            <view class="contentItem" style="display: flex;align-items: center;margin-bottom: 16rpx">
              <text class="indexDesc">{{ item.BUSINESS_PERIOD || ''}}</text>
              <view class="timeBox">
                <image class="dateIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/dateIcon.png"/>
                <text class="dateText" style="white-space: nowrap">{{
                    `${item.STARTDATE ? $moment(item.STARTDATE).format('YYYY年MM月DD日') : ''} 至${item.ENDDATE ? $moment(item.ENDDATE).format('YYYY年MM月DD日') : ''}`
                  }}</text>
              </view>
            </view>

            <view class="contentItem">
              {{new Date().getTime() < new Date($moment(item.ENDDATE).format('YYYY-MM-DD')).getTime() ? '项目履约中...' : '项目已完成...'}}
              <text class="orangeText">{{ item.SUBROYALTY_PRICE >= item.MINTURNOVER ?'保底租金已交付':'未完成保底额' }}</text>
            </view>

            <view class="contentItem">
              对客销售总额<text class="money">{{ item.REVENUE_AMOUNT?$util.getMoney(item.REVENUE_AMOUNT / 10000):'-'}}</text>
              <text class="unit">/万元</text>
              ，商家入账<text class="money">{{ item.SUBROYALTY_THEORY?$util.getMoney(item.SUBROYALTY_THEORY / 10000):'-'}}</text>
              <text class="unit">/万元</text>
            </view>

            <view class="contentItem">
              按合同约定支付驿达租金<text class="money">{{ item.ROYALTY_THEORY?$util.getMoney(item.ROYALTY_THEORY / 10000):'-'}}</text>
              <text class="unit">/万元</text>
            </view>

<!--            <view class="contentItem">-->
<!--              按对客销售的<text class="orangeText" style="margin: 0 8rpx">40%</text>-->
<!--              成本预估经营成本需-->
<!--              <text class="money">{{ item.costEstimation?$util.getMoney(item.costEstimation / 10000):'-'}}</text>-->
<!--              <text class="unit">/万元</text>-->
<!--            </view>-->
            <view class="contentItem">
              按对客销售的<text style="color: #FE7628;margin: 0 8rpx">{{ detail.COST_RATE ? `${detail.COST_RATE}%` : '-' }}</text>成本预估经营成本需
              <text class="money">{{ item.REVENUE_AMOUNT ? $util.getMoney(item.REVENUE_AMOUNT * (detail.COST_RATE ? detail.COST_RATE / 100 : 0) / 10000) : '' }}</text><text class="unit">/万元</text>
            </view>
            <view class="contentItem" v-if="item.REVENUE_AMOUNT">
              人工成本，按<text style="color: #FE7628;margin: 0 8rpx">{{ detail.LABOURS_COUNT || '' }}</text>个人，平均工资<text style="color: #FE7628;margin: 0 8rpx">{{ detail.LABOURS_WAGE || '' }}</text>元/月，实际发生
              <text style="color: #FE7628;margin: 0 8rpx">{{ detail.MONTH_COUNT || '' }}</text>个月，合计人工成本<text class="money">{{$util.getMoney((detail.LABOURS_COUNT * detail.LABOURS_WAGE * detail.MONTH_COUNT) / 10000)}}</text>万元
            </view>
            <view class="contentItem" v-if="item.REVENUE_AMOUNT">
              折旧费用，按总投入<text style="color: #FE7628;margin: 0 8rpx">{{detail.DEPRECIATION_EXPENSE || ''}}</text>万元，<text style="color: #FE7628;margin: 0 8rpx">{{detail.DEPRECIATION_YEAR || ''}}</text>
              年折旧，实际发生<text style="color: #FE7628;margin: 0 8rpx">{{detail.howMonth || ''}}</text>元/月，合计折旧费用<text class="money">{{$util.getMoney((detail.DEPRECIATION_EXPENSE / detail.DEPRECIATION_YEAR / 12) * detail.MONTH_COUNT)}}</text>万元
            </view>
            <view class="contentItem" v-if="item.REVENUE_AMOUNT">
              其他经营费用，按每年综合经营费用<text class="money">{{detail.OTHER_EXPENSE || ''}}</text>万元预估
            </view>
            <view class="contentItem" v-if="item.REVENUE_AMOUNT">
              <text class="unit">实际商家经营成本 = 经营成本 + 人工成本 + 折旧费用 + 其他经营费用 = </text><text class="money">
              {{$util.getMoney( (item.REVENUE_AMOUNT * (detail.COST_RATE ? detail.COST_RATE / 100 : 0) / 10000) + ((detail.LABOURS_COUNT * detail.LABOURS_WAGE * detail.MONTH_COUNT) / 10000) + ((detail.DEPRECIATION_EXPENSE / detail.DEPRECIATION_YEAR / 12) * detail.MONTH_COUNT) + detail.OTHER_EXPENSE )}}
            </text>万元
            </view>

            <view class="contentItem">
              商家<text style="color: #FE7628;margin: 0 8rpx">{{ item.SUBROYALTY_THEORY - ( (item.REVENUE_AMOUNT * (detail.COST_RATE ? detail.COST_RATE / 100 : 0) ) + ((detail.LABOURS_COUNT * detail.LABOURS_WAGE * detail.MONTH_COUNT)) + ((detail.DEPRECIATION_EXPENSE / detail.DEPRECIATION_YEAR / 12) * detail.MONTH_COUNT) + detail.OTHER_EXPENSE )<0?'预计预亏':'预计盈利' }}</text>
              <text class="money">{{ item.SUBROYALTY_THEORY?
                  $util.getMoney(Math.abs(
                      ((item.SUBROYALTY_THEORY - ( (item.REVENUE_AMOUNT * (detail.COST_RATE ? detail.COST_RATE / 100 : 0)) + (detail.LABOURS_COUNT * detail.LABOURS_WAGE * detail.MONTH_COUNT) + ((detail.DEPRECIATION_EXPENSE / detail.DEPRECIATION_YEAR / 12) * detail.MONTH_COUNT * 10000) + (detail.OTHER_EXPENSE * 10000) ) )) / 10000)
                  ):'-'}}</text><text class="unit">/万元</text>
            </view>

            <view class="contentItem">
              项目进度完成
              <text class="money">{{ item.daySuccess ?item.daySuccess > 100 ? 100 : item.daySuccess +'%':'' }}</text>
            </view>

            <view class="contentItem">
              租金交付已完成
              <text class="money">{{ item.rentDelivery ?item.rentDelivery > 100 ? 100 : item.rentDelivery +'%':'-' }}</text>
            </view>

            <view class="contentItem">
              租金交付进度 <text class="orangeText" style="margin: 0 8rpx">{{ item.rentDelivery > item.daySuccess ? '优于' : item.rentDelivery < item.daySuccess ? '低于' : '等于' }}</text> 项目进度
            </view>

            <view class="resultBox" v-if="item.daySuccess < 100">
              <image class="warningLight" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/warningLight.png"/>
              {{  item.progressDifference <= 10 ? '项目保底' :
                item.progressDifference > 10 && item.progressDifference <= 40 ?'项目能':
                    item.progressDifference > 40 ?'项目':
              item.progressDifference <= 0 && item.progressDifference >= -10 ?'项目保底完成':
              item.progressDifference <= -10 && item.progressDifference >= -40 ?'商家':
              item.progressDifference < -40 ?'项目':''
              }}
              <text class="blueText">
                {{  item.progressDifference <= 10 ? '基本能实现' :
                  item.progressDifference > 10 && item.progressDifference <= 40 ?'较好的完成':
                      item.progressDifference > 40 ?'超预期':
                          item.progressDifference <= 0 && item.progressDifference >= -10 ?'存在困难':
                              item.progressDifference <= -10 && item.progressDifference >= -40 ?'存在经营困难':
                                  item.progressDifference < -40 ?'超预期':''
                }}
              </text>
              {{  item.progressDifference <= 10 ? '' :
                item.progressDifference > 10 && item.progressDifference <= 40 ?'保底且实现盈利':
                    item.progressDifference > 40 ?'后续项目可以适当提升保底营收':
                        item.progressDifference <= 0 && item.progressDifference >= -10 ?'，请保持关注':
                            item.progressDifference <= -10 && item.progressDifference >= -40 ?'，请密切保持关注':
                                item.progressDifference < -40 ?'，商家存在退场风险':''
              }}
            </view>
          </view>

        </view>
      </view>
    </view>
  </view>
</template>
<script>
import request from '@/util/index.js'
import moment from "moment";
import numeral from 'numeral'

import {wrapTreeNode} from "../../util/dateTime";
  export default {
    name: "projectWarningDetail",
    data(){
      return {
        menu:{},
        serviceInfo:{},// 当前选中服务区
        selectTab: 1,// 选中的tab
        detail:{},// 详情内容
        businessTypeObj:{
          1000: "合作经营",
          2000: "固定租金",
          3000: "保底采购",
          4000: "业主自营",
        },
        firstTabDetail:{},// 选项卡为第一个的详情数据
        secondTabList:[],// 选项卡为第二个的时候的数组
        BusinessTradeIdsObj:{},// 枚举对象
        BusinessTradeIdsBigObj:{},// 枚举对象
        SERVERPARTTYPEOBJ:{},// 枚举对象
        warningNameObj:{},// 预警类型名称对象
        warningDescObj:{},// 预警类型备注对象
        showNotice: false,// 第一个问号的悬浮框
        showQuestion: false,// 优秀的悬浮框
      }
    },
    async onLoad(query){
      let systemInfo = uni.getSystemInfoSync()
      this.menu = uni.getMenuButtonBoundingClientRect()
      let seat = uni.getStorageSync('currentService')
      this.serviceInfo = seat
      if (query.obj){
        this.detail = JSON.parse(query.obj)
      }
      console.log('this.detail',this.detail)
      uni.showLoading({
        title: '正在加载...'
      })

      this.handleGetField()
      this.handleGetSERVERPART_TYPE()
      this.handleGetWarningType()

      await this.handleGetFirstTab()

      await this.handleGetSecondTab()
      uni.hideLoading()
    },
    methods:{
      // 显示悬浮框注释
      handleShowNotice(){
        this.showNotice = true
      },
      handleShowQuestion(){
        this.showQuestion = true
      },
      // 显示悬浮框注释
      handleCloseNotice(){
        this.showNotice = false
        this.showQuestion = false
      },
      async handleGetWarningType(){
        const req = {
          FieldexPlain_Field: 'WARNING_TYPE'
        }
        const data = await request.$webGet('/EShangApiMain/Dictionary/GetFieEnumList',req)
        let list = data.Result_Data.List
        console.log('list',list)
        let nameObj = {}
        let descObj = {}
        if (list && list.length>0){
          list.forEach(item=>{
            nameObj[Number(item.FieldEnum_Value)] = item.FieldEnum_Name
            descObj[Number(item.FieldEnum_Value)] = item.FieldEnum_Desc
          })
        }
        this.warningNameObj = nameObj
        this.warningDescObj = descObj
        console.log('nameObj',nameObj)
        console.log('descObj',descObj)
      },
      // 返回上一级
      handleBack(){
        uni.navigateBack({
          delta: 1
        })
      },
      // 拿到BusinessTradeIdsObj的枚举
      async handleGetField(){
        const req = {
          FieldExplainField: 'BusinessTradeIds'
        }
        const data = await request.$webGet('/EShangApiMain/FrameWork/GetFieldEnumTree',req)
        let list = wrapTreeNode(data.Result_Data.List)
        let bigObj = {}
        let obj = {}
        if (list && list.length>0){
          list.forEach(item=>{
            bigObj[item.value] = item.label
            if (item.children && item.children.length>0){
              item.children.forEach(subItem=>{
                obj[subItem.value] = subItem.label
              })
            }
          })
        }
        console.log('data231231',list)
        this.BusinessTradeIdsBigObj = bigObj
        this.BusinessTradeIdsObj = obj
      },
      // 拿到BusinessTradeIdsBigObj的枚举
      async handleGetSERVERPART_TYPE(){
        const req = {
          FieldExplainField: 'SERVERPART_TYPE'
        }
        const data = await request.$webGet('/EShangApiMain/FrameWork/GetFieldEnumTree',req)
        let list = wrapTreeNode(data.Result_Data.List)
        let obj = {}
        if (list && list.length>0){
          list.forEach(item=>{
            obj[item.value] = item.label
          })
        }
        console.log('data231231',list)
        this.SERVERPARTTYPEOBJ = obj
      },
      // 改变选项卡
      handleChangeTab(e){
        this.selectTab = e
      },
      async handleGetFirstTab(){
        const req = {
          ServerpartId: this.detail.SERVERPART_ID,
          ServerpartShopId: this.detail.SERVERPARTSHOP_ID
        }
        const bottomData = await request.$webGet('/EShangApiMain/Revenue/GetBusinessTradeAnalysis',req)
        const bottomData2 = await request.$webGet('/EShangApiMain/Revenue/GetBrandAnalysis',req)
        let thirdObj = {}
        let fourthObj = {}
        if (bottomData.Result_Data.List && bottomData.Result_Data.List.length>0){
          thirdObj = bottomData.Result_Data.List[0]
        }
        if (bottomData2.Result_Data.List && bottomData2.Result_Data.List.length>0){
          fourthObj = bottomData2.Result_Data.List[0]
        }
        this.firstTabDetail = {
          ...thirdObj,
          ...fourthObj,
        }
      },
      async handleGetSecondTab(){
        const req = {
          DataType: 2,
          BusinessProjectId: this.detail.BUSINESSPROJECT_ID
        }
        const data = await request.$webGet('/EShangApiMain/BusinessProject/GetAnnualSplit',req)
        const shopTime = await request.$webGet('/EShangApiMain/Revenue/GetBusinessDate',{ServerpartShopIds:this.detail.BUSINESSPROJECT_ID})
        let list = data.Result_Data.List
        list.reverse()
        const shopEndTime = shopTime.Result_Data.value
        console.log('shopEndTime',shopEndTime)
        let beforeList = []
        let futerObj = {}
        list.forEach(item=>{
          if (item.PERIOD_INDEX){
            if (new Date(item.STARTDATE).getTime()<new Date(shopEndTime).getTime() && new Date(item.ENDDATE).getTime()>new Date(shopEndTime).getTime()){
              item.showMore = true
              // 项目一共多少天
              const startTime = moment(item.STARTDATE)
              const endTime = moment(item.ENDDATE)
              const nowTime = moment()
              item.projectDaySum = endTime.diff(startTime,'days') + 1
              // 距离今天是多少天
              item.projectBetween = nowTime.diff(startTime,'days') + 1
              // 完成率
              item.daySuccess = numeral((item.projectBetween / item.projectDaySum) * 100).format('0.00')
              item.costEstimation = item.REVENUE_AMOUNT * 0.4
              item.profitEstimate = item.SUBROYALTY_THEORY - (item.REVENUE_AMOUNT * 0.4)
              item.rentDelivery = item.SUBROYALTY_PRICE / item.MINTURNOVER > 1 ? 100 : (item.SUBROYALTY_PRICE / item.MINTURNOVER)*100
              item.daySuccessNumber = (item.projectBetween / item.projectDaySum) * 100
              item.progressDifference = item.rentDelivery - item.daySuccessNumber
              beforeList.push(item)
            }else if(new Date(item.STARTDATE).getTime() > new Date().getTime()){
              futerObj = item
            }else{
              item.daySuccess = 100
              item.daySuccessNumber = 100
              item.costEstimation = item.REVENUE_AMOUNT * 0.4
              item.rentDelivery = item.SUBROYALTY_PRICE / item.MINTURNOVER > 1 ? 100 : (item.SUBROYALTY_PRICE / item.MINTURNOVER)*100
              item.profitEstimate = item.SUBROYALTY_THEORY - (item.REVENUE_AMOUNT * 0.4)
              beforeList.push(item)
            }
          }
        })
        beforeList.push(futerObj)
        this.secondTabList = beforeList
        console.log('this.secondTabList',this.secondTabList)
      }
    }
  }
</script>
<style scoped lang="scss">
.projectWarningDetail{
  width: 100%;
  background: #F3F3F3;
  .meng{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;left: 0;
    z-index: 21;
  }
  .earlyTop{
    width: 100%;
    background: #F3F3F3;
    position: relative;
    .earlyTopBg{
      width: 100%;
      height: 430rpx;
      background: linear-gradient( 180deg, #D8E3FF 0%, #F3F3F3 100%);
    }
    .headerBox{
      width: 100%;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 20;
      box-sizing: border-box;
      background: linear-gradient( 180deg, #D8E3FF 0%, #E5EBF9 100%);
      //padding: 32rpx;
      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: 480rpx;
        background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/warning/detailBg.svg");
        background-repeat: no-repeat;
        background-size: cover;
        //background: linear-gradient( 180deg, #CDE1FF 0%, #FFFFFF 100%);
        border-radius: 14rpx;
        box-sizing: border-box;
        padding: 24rpx 24rpx 0 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{
            width: calc(100% - 100rpx);
            margin-left: 16rpx;
            .rightTop{
              display: flex;
              align-items: flex-start;
              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;
                display: inline-block;
                width: calc(100% - 40rpx);
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                -webkit-line-clamp: 2;
              }
              .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;
                  display: inline-block;
                  width: 150rpx;
                }
              }
            }

            .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;
              }
            }
            .MERCHANTS_NAMERightBox{
              display: flex;
              justify-content: flex-end;
              .MERCHANTS_NAME{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #571519;
                line-height: 44rpx;
                text-align: left;
                font-style: normal;
                padding: 4rpx 16rpx;
                background: #FCF1D3;
                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: 36rpx;
                color: #160002;
                line-height: 42rpx;
                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;
            .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;
              white-space: nowrap;
            }
            .messageDesc{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #F07604;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
              white-space: nowrap;
            }
          }
          .line{
            width: 100%;
            height: 2rpx;
            background: #F3F3F3;
            margin: 12rpx 0 0 0;
          }
          .overTime{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #5E5A59;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
          }
          .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;
          }
        }
      }
    }
  }

  .detailContentBox{
    width: 100%;
    background: #fff;
    padding: 2rpx;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    box-sizing: border-box;
    margin-top: 32rpx;
    .contentBox{
     width: 100%;
      //background: #fff;
      padding-bottom: 40rpx;
      .tabBox{
        width: 100%;
        height: 108rpx;
        display: flex;
        align-items: center;
        border-radius: 32rpx 32rpx 0rpx 0rpx;
        overflow: hidden;
        background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/warning/grayBg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .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;
          }
        }
        .selectItemLeft{
          background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/warning/selectLeft.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .tabText{
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 32rpx;
            color: #160002;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;
          }
        }
        .selectItemRight{
          background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/warning/selectRight.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .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{
            position: relative;
            display: flex;
            align-items: center;
            .noticeIcon{
              width: 32rpx;
              height: 32rpx;
            }
            .noticeDesc{
              position: absolute;
              top: 32rpx;left: 0;
              display: inline-block;
              transform: translateX(-40px);
              width: 70vw;
              border-radius: 32rpx;
              box-sizing: border-box;
              padding: 32rpx;
              background: #fff;
              z-index: 22;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #786B6C;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
              box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(61, 48, 50, 0.21);
            }
          }
        }
      }

      .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: 16rpx;
          .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: 35rpx;
            height: 35rpx;
            margin-right: 8rpx;
          }
          .stateText{
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 26rpx;
            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{
              position: absolute;
              top: 32rpx;right: 0;
              display: inline-block;
              transform: translateX(40px);
              width: 70vw;
              border-radius: 32rpx;
              box-sizing: border-box;
              padding: 32rpx;
              background: #fff;
              z-index: 22;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #786B6C;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
              box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(61, 48, 50, 0.21);
            }
          }
        }
      }
      .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 16rpx;
            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>
