<template>
    <view class="page-body">
        <!-- 顶部信息卡片 -->
        <view class="card-header">
            <!-- 顶部信息卡片第一行 -->
            <view style="display: flex;align-items: center;justify-content: space-between">
                <h3 style="padding-bottom: 0">{{dataDetail.SERVERPARTSHOP_NAME}}</h3>
                <span style="font-size: 15px">{{dataDetail.BUSINESS_TYPE===1000?'合作经营':dataDetail.BUSINESS_TYPE===2000?'固定租金':''}}</span>
            </view>
            <!-- 顶部信息卡片第二行 -->
            <view style="text-align: right">
                <!-- 左侧 -->
                <span style="font-size: 15px">{{dataDetail.SERVERPART_NAME}}</span>
            </view>
        </view>

        <view class="content-detail-box main-card ino-flex ai-center uni-column" style="margin-top: 12px">
            <view class="cellTopStyle" >
                <view class="item">
                    <span class="fourth-name" style="font-size: 16px;">合同期限：</span>
                    <span class="fourth-value" >{{dataDetail.STARTDATE}} - {{dataDetail.ENDDATE}}</span>
                </view>
            </view>
            <view class="cellTopStyle" >
                <view class="item">
                    <span class="fourth-name" style="font-size: 16px;">保底租金：</span>
                    <span class="fourth-value" ><span class="unit" v-if="dataDetail.MINTURNOVER">￥</span>{{dataDetail.MINTURNOVER?dataDetail.MINTURNOVER:''}}</span>
                </view>
            </view>
        </view>

        <view class="content">
            <p class="text">本项目驿达累计分润已达￥<span style="font-size: 18px;color: orangered">{{ dataDetail.ROYALTY_PRICE }}</span>，
                <span v-if="dataDetail.EXPIREDAYS">预计<span style="font-size: 22px;color: orangered">{{ dataDetail.EXPIREDAYS }}</span>天后完成保底！</span>
                <span v-if="!dataDetail.EXPIREDAYS" ><span style="font-size: 18px;color: orangered">已完成</span>保底！</span></p>
            <p class="text">是否依合同将分润比例进行切换：驿达<span style="font-size: 18px;color: orangered">{{YDValue}}%</span>，商家<span style="font-size: 18px;color: orangered">{{SJValue}}%</span>？</p>
        </view>

        <p class="showText" v-if="dataDetail.PROJECTWARNING_STATE===2000">{{dataDetail.PROJECTWARNING_DESC}}</p>

        <view class="position" v-if="dataDetail.DealMark===0" >
            <button class="change"  type="primary"  @click="handleChange">切换比例</button>
            <button class="noChange"  type="primary"  @click="handleNoChange">暂不切换</button>
        </view>
    </view>
</template>
<script>
import Store from "../../store/store";

export default {
    data() {
        return {
            PROJECTWARNING_ID:'',
            dataDetail:{},
            inputValue:'',// 分润比例的输入框
            useDate:{},
            YDValue:'',// 驿达的值
            SJValue:'',// 商家的值
        }
    },
    onLoad(query){
        this.PROJECTWARNING_ID = query.id
        this.handleGetDetail()
        this.useDate = Store.state.userData
        console.log('this.useDate',this.useDate)

    },
    methods:{
        // 拿到详细数据
        handleGetDetail(){
            this.$request.$webGet('EShangApiMain/BusinessProject/GetPROJECTWARNINGDetail',{
                PROJECTWARNINGId:this.PROJECTWARNING_ID
            }).then(res=>{
                this.dataDetail = res.Result_Data
                // 金额加上千分号
                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]
                // this.dataDetail.SERVERPART_NAME = this.dataDetail.SERVERPART_NAME.split('服务区')[0]
            })
        },
        handleInput(e){
            this.inputValue = e.target.value
        },
        // 暂不切换比例
        handleNoChange(){
            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=>{
                console.log('res')
                uni.showToast({
                    title: res.Result_Desc,
                    icon: 'none'
                })
                this.handleGetDetail()
            })
        },
        // 切换比例
        handleChange(){
                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=>{
                  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()
                })
        }
    }
}
</script>

<style scoped>
.page-body {
  min-height: 100%;
  padding: 40rpx 25rpx;
  background-color: #fff;
  box-sizing: border-box;
  padding-bottom: 196rpx;
}
.card-header {
  border-radius: 10rpx;
  background: linear-gradient(to right, #8998bb 0%, #a9b5d2 100%);
  color: #FFFFFF;
  box-sizing: border-box;
  width: 100%;
  padding: 24rpx 16rpx;
}

.card-header h3 {
  padding-bottom: 10rpx;
  font-size: 30rpx;
}

.card-header .fs12>text {
  font-size: 24rpx;

}
.cellTopStyle {
  line-height: 45rpx;
  width: 100%;
  display: inline-block;
}
.cellTopStyle .item{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cellTopStyle .item .fourth-value{
    display: inline-block;
    width: 200px;
    text-align: left;
    font-size: 16px;
}
.showText{
  font-size: 13px;
  text-indent: 2rem;
}
.content{
    margin-top: 12px;
}
.content .text{
    font-size: 13px;
    text-indent: 2rem;
}
.cellTopStyle .noSpace{
    width: 100%;
    display: flex;
    align-items: center;
}
.fourth-name {
  min-width: 120rpx;
  max-width: 185rpx;
  color: #ADB2BF;
  font-size: 16px;
}
.position{
    position: fixed;
    width: calc(100% - 24px);
    bottom: 44px;
    color: #fff;
    display: flex;
    justify-content: space-between;
}
.position .change{
    width: 48%;
    height: 44px;
    border-radius: 22px;
    line-height: 44px;
    text-align: center;
    font-size: 13px;

}
.position .noChange{
    width: 48%;
    height: 44px;
    border-radius: 22px;
    line-height: 44px;
    text-align: center;
    background: linear-gradient( to right ,#8998bb 0%, #8a99bc 100%);
    font-size: 13px;

}

.modle-title {
  color: #000;
  padding: 14px 15px 10px 0;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

 h4 {
  font-weight: bolder;
}
.content-detail-box {
  background: #f8f9fa;
  border-radius: 8rpx;
  overflow: hidden;
  position: relative;
  padding: 10rpx 30rpx 16rpx 30rpx;
  font-size: 26rpx;
}

.content-detail-box span {
  font-size: 26rpx;
}
</style>
