<template>
    <view class="page-body" >
<!--      <image class="bg" src="https://eshangtech.com/ShopICO/yxcl/projectWarning/bg.svg"></image>-->
      <view class="header" :style="{height: menu.bottom  + 'px' }">
        <image @click="handleBack" class="allowLeft" :style="{top: menu.top +((menu.height - 24) / 2) + 'px'}" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"></image>
      </view>
      <p class="title">分润比例切换</p>
      <view class="main">
        <view class="detail">
          <view class="type">{{dataDetail.BUSINESS_TYPE===1000?'合作经营':dataDetail.BUSINESS_TYPE===2000?'固定租金':''}}</view>
          <view class="top">
            <view class="left">
              <image class="logo" :src="dataDetail.BUSINESSPROJECT_ICO?dataDetail.BUSINESSPROJECT_ICO:'https://eshangtech.com/ShopICO/yxcl/projectWarning/defaultImg.svg'"></image>
            </view>
            <view class="right">
              <p class="detailTitle">{{dataDetail.SERVERPARTSHOP_NAME}}</p>
              <view class="fixed" >
                <image class="serviceFixed" src="https://eshangtech.com/ShopICO/yxcl/projectWarning/position.svg"></image>
                <span class="service">{{dataDetail.SERVERPART_NAME}}</span>
              </view>
              <view class="other">
                <view class="item">
                  <image class="icon" src="https://eshangtech.com/ShopICO/yxcl/projectWarning/user.svg"></image>
                  <span class="value">{{dataDetail.COOPMERCHANTS_LINKMAN || '-'}}</span>
                </view>
                <view class="item">
                  <image class="icon" src="https://eshangtech.com/ShopICO/yxcl/projectWarning/phone.svg"></image>
                  <span class="value">{{dataDetail.COOPMERCHANTS_MOBILEPHONE || '-'}}</span>
                </view>
              </view>
            </view>
          </view>
          <view class="bottom">
            <view class="message">
              <image class="icon" src="https://eshangtech.com/ShopICO/yxcl/projectWarning/money.svg"></image>
              <span class="text">保底租金</span>
              <span class="money">{{dataDetail.MINTURNOVER || '-'}}</span>
            </view>
            <view class="message" style="margin-bottom: 0">
              <image class="icon" src="https://eshangtech.com/ShopICO/yxcl/projectWarning/date.svg"></image>
              <span class="text">合同期限</span>
              <span class="money">{{dataDetail.STARTDATE || '-'}} - {{dataDetail.ENDDATE || '-'}}</span>
            </view>
          </view>
        </view>

        <view class="contain">
          <image class="img" style="width: 32px;height: 32px" src="https://eshangtech.com/ShopICO/yxcl/projectWarning/question.svg"></image>
          <view>
            <view class="text">
              本项目驿达累计分润已达<span class="strong"><span clsas="strong" style="font-size: 14px">￥</span>{{ dataDetail.ROYALTY_PRICE|| '-' }}</span>,<br/>
              <span v-if="dataDetail.EXPIREDAYS!==0">预计<span class="strong">{{ dataDetail.EXPIREDAYS|| '-' }}</span>后完成</span>
              <span v-if="dataDetail.EXPIREDAYS===0" class="strong">已完成</span>保底！
            </view>
            <view class="text" :style="{marginBottom: dataDetail.PROJECTWARNING_STATE===2000?'8px':'0px'}">
              是否依合同将分润比例进行切换：<br/> 驿达<span class="strong">{{YDValue|| '-'}}%</span>,
              商家<span class="strong">{{SJValue|| '-'}}%</span>？
            </view>
            <view class="text" v-if="dataDetail.PROJECTWARNING_STATE===2000">
             {{desc[0]}}<br/><span class="strong" style="font-size: 14px">({{time}})</span>,<br/>
              {{desc[1]}}
            </view>
          </view>
        </view>
      </view>
      <view class="bottomBtn" v-if="dataDetail.DealMark===0">
        <button class="btn change" @click="handleChange">切换比例</button>
        <button class="btn" @click="handleNoChange">暂不切换</button>
      </view>
    </view>
</template>
<script>
import Store from "../../store/store";

export default {
    data() {
        return {
          PROJECTWARNING_ID:'',
          dataDetail:{},
          inputValue:'',// 分润比例的输入框
          useDate:{},
          YDValue:'',// 驿达的值
          SJValue:'',// 商家的值
          statusBarHeight:'',
          menu:'',
          time:'',// 详情给的备注的时间
          desc:[],// 详情给的备注
          type:true,// 是否从推送进
        }
    },
    onLoad(query){
      //  获取手机参数对页面进行适配
      let systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = Number(systemInfo.statusBarHeight)
      this.menu = uni.getMenuButtonBoundingClientRect()
      console.log('this.menu',this.menu)
      this.PROJECTWARNING_ID = query.id
      this.handleGetDetail()
      this.useDate = Store.state.userData
      console.log('this.useDate',this.useDate)
      if (query.type==='no'){
        this.type = false
      }
    },
  //页面关闭
  onUnload() {
    // 记录用户行为
    this.$util.addUserBehaviorNew()
  },
    methods:{
        // 拿到详细数据
        handleGetDetail(){
          uni.showLoading({
            title:'正在加载'
          })
            this.$request.$webGet('EShangApiMain/BusinessProject/GetPROJECTWARNINGDetail',{
                PROJECTWARNINGId:this.PROJECTWARNING_ID
            }).then(res=>{
                uni.hideLoading()
                this.dataDetail = res.Result_Data
                console.log('this.dataDetail',this.dataDetail)
                // 金额加上千分号
                for (let key in this.dataDetail){
                    if (key==='REVENUEDAILY_AMOUNT' || key==='REVENUE_AMOUNT' || key==='ROYALTY_PRICE' || key==='SUBROYALTY_PRICE' || key==='TICKET_FEE' || key==='MINTURNOVER'){
                        this.dataDetail[key] = this.$util.fmoney(this.dataDetail[key])
                    }
                }
                this.YDValue = this.dataDetail.MerchantRatio.split(':')[0]
                this.SJValue = this.dataDetail.MerchantRatio.split(':')[1]
              if (this.dataDetail.PROJECTWARNING_DESC){
                this.time = this.dataDetail.PROJECTWARNING_DESC.split('【')[1].split('】')[0]
                this.desc[0] = this.dataDetail.PROJECTWARNING_DESC.split('【')[0]
                this.desc[1] = this.dataDetail.PROJECTWARNING_DESC.split('【')[1].split('，')[1]
              }
              console.log('this.time',this.time)
              console.log('this.desc',this.desc)
            })
        },
        handleInput(e){
            this.inputValue = e.target.value
        },
        // 暂不切换比例
        handleNoChange(){
          uni.showLoading({
            title:'正在加载'
          })
            this.$request.$webGet('EShangApiMain/BusinessProject/ApproveProinst',{
                BusinessId: this.PROJECTWARNING_ID, // 预警记录内码
                StaffId:this.useDate.UserId,// 操作人内码
                StaffName:this.useDate.UserName,// 操作人名称
                SwitchRate:this.dataDetail.ROYALTY_RATE * 100,// 切换比例
                ApproveState:'9999',// 审批状态
            }).then(res=>{
              uni.hideLoading()
                uni.showToast({
                    title: res.Result_Desc,
                    icon: 'none'
                })
                this.handleGetDetail()
                uni.navigateBack({
                  delta: 1
                })
            })
        },
        // 切换比例
        handleChange(){
          uni.showLoading({
            title:'正在加载'
          })
                this.$request.$webGet('EShangApiMain/BusinessProject/ApproveProinst',{
                    BusinessId: this.PROJECTWARNING_ID, // 预警记录内码
                    StaffId:this.useDate.UserId,// 操作人内码
                    StaffName:this.useDate.UserName,// 操作人名称
                    SwitchRate:this.dataDetail.ROYALTY_CRATE,// 切换比例
                    ApproveState:this.dataDetail.PROJECTWARNING_STATE===1000?'2000':'9000',// 审批状态
                }).then(res=>{
                  uni.hideLoading()
                  if (this.dataDetail.PROJECTWARNING_STATE===1000){
                    this.$util.toNextRoute('redirectTo', `/pages/projectWarning/index`)
                  }
                    console.log('res')
                    uni.showToast({
                        title: res.Result_Desc,
                        icon: 'none'
                    })
                    this.handleGetDetail()
                })
        },
      handleBack(){
          if (this.type){
            uni.redirectTo({
              url: '/pages/projectWarning/index'
            });
          }else{
            uni.navigateBack({
              delta:1
            });
          }
      }
    }
}
</script>

<style scoped lang="scss">
@import '/static/public/font/stylesheet.css';
.page-body {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background-image: url("https://eshangtech.com/ShopICO/yxcl/projectWarning/bg.svg");
  background-size: cover;
  //position: relative;
  //.bg{
  //  width: 100%;
  //  height: 100%;
  //  position: absolute;
  //  top: 0;left: 0;
  //  z-index: 1;
  //}
  .header{
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    position: relative;
    margin-top: 0;
    z-index:222;
    .allowLeft{
      position: absolute;
      width: 24px;
      height: 24px;
      left: 16px;
    }
  }
  .title{
    font-size: 28px;
    font-family: Alimama ShuHeiTi;
    color: #160002;
    line-height: 39px;
    margin: 18px 0 16px 16px;
    background: linear-gradient(180deg, #C25E18 30%, #8C4917 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .main{
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px 92px;
    .detail{
      width: 100%;
      box-sizing: border-box;
      background: linear-gradient(314deg, #FFFCF3 0%, #FFF0E6 20%, #FFF9F5 51%, #FFF8E7 73%, #FFF6EE 100%);
      border-radius: 8px;
      padding: 16px;
      position: relative;
      .type{
        position: absolute;
        right: 0;
        top: 16px;
        background: linear-gradient(270deg, #F8D792 0%, #FFE6B2 50%, #FBC13B 100%);
        border-radius: 10px 0 0 2px;
        padding:2px 8px;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #604128;
        line-height: 20px;
      }
      .top{
        width: 100%;
        height: 168rpx;
        display: flex;
        .left{
          width: 168rpx;
          height: 168rpx;
          margin-right: 12px;
          border-radius: 8px;
          overflow: hidden;
          .logo{
            width: 168rpx;
            height: 168rpx;
          }
        }
        .right{
          //display: flex;
          //flex-direction: column;
          //justify-content: space-between;
          //align-items: flex-start;
          .detailTitle{
            font-size: 36rpx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #160002;
            margin-bottom: 12rpx;
            line-height: 56rpx;
          }
          .fixed{
            height: 24px;
            line-height: 24px;
            padding: 1px 4px;
            box-sizing: border-box;
            background: rgba(252, 186, 118, 0.2);
            border-radius: 4px;
            display: inline-block;
            margin-bottom: 12rpx;
            .serviceFixed{
              width: 20rpx;
              height: 24rpx;
              margin-right: 8rpx;
              line-height: 24px;
            }
            .service{
              font-size: 28rpx;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #6C492A;
              line-height: 40rpx;
            }
          }
          .other{
            width: 100%;
            display: flex;
            align-items: center;
            .item{
              display: flex;
              align-items: center;
              margin-right: 16px;
              .icon{
                width: 16px;
                height: 16px;
                margin-right: 6px;
              }
              .value{
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #160002;
                line-height: 40rpx;
                white-space: nowrap;
              }
            }
          }
        }
      }
      .bottom{
        margin-top: 24px;
        .message{
          width: 100%;
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          .icon{
            width: 16px;
            height: 16px;
            margin-right: 8px;
          }
          .text{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #786B6C;
            line-height: 20px;
            margin-right: 8px;
          }
          .money{
            font-size: 14px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #7D5632;
            line-height: 20px;
          }
        }
      }
    }
  }
  .contain{
    width: 100%;
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 16px;
    margin-top: 16px;
    display: flex;
    .img{
      width: 32px;
      height: 32px;
    }
    .text{
      margin-left: 8px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #160002;
      line-height: 24px;
      margin-bottom: 8px;
    }
    .strong{
      font-size: 18px;
      color: rgba(125, 86, 50, 1);
      font-weight: 600;
      margin-left: 4px;
    }
  }
  .bottomBtn{
    width: 100%;
    height: 92px;
    box-sizing: border-box;
    padding: 8px 16px 0;
    position: fixed;
    bottom: 0;
    background: #fff;
    display: flex;
    justify-content: space-between;
    .btn{
      width: calc((100% - 16px)/2);
      height: 41px;
      background: rgba(125, 86, 50, 0.1);
      border-radius: 4px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #6D5F5E;
      opacity: 0.6;
    }
    .change{
      background: #7D5632;
      color: #FEFFFF;
      opacity: 1;
    }
  }
}

</style>
