<template>
    <view v-if="data">
        <view v-show="!showPopupBottom">
            <view class="content-title">商户门店状态变更申请</view>
            <p class="box-top">
                <view class="item-title">日期：<text style="color:#333;font-size:24rpx;">{{data.OPERATE_DATE}}</text></view>
                <text style="color:#F27B4C;font-size:24rpx;">{{stateEmun[data.PERMISSIONAPPLY_STATE]}}</text>
            </p>
            <BaseDetail :baseData="data"/>
            <view class="card" v-if="shopDetail">
                <view class="title-row">
                    <view class="title">
                        <view>变更情况</view>
                    </view>
                </view>
                <view class="uni-flex jc-around  align-center" style="padding-top: 24rpx;">

                    <view  style="text-align: center;">
                        <view  style="font-size: 30rpx;">{{shopDetail.SHOPNAME}}</view>
                        <view class="tag-value">
                            <image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAmCAMAAABDGm2rAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAIQUExURUdwTP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////4qa4JgAAACvdFJOUwCU4OoB7/1wQDD+BiFbBwI57WLEiI8EqYDuRtE/rh76Xg7n9RLKCeHwPnHoCyAryQ9Vl6MkbEEm6Sz3hYoFpsdhh2YI69gDjM0bnU1vHMgup+UQtVwVrUWDM9TXdUpEzL2r83ewxQxP7IKom6BDHymB5tOQlVJ2+1EZvt2zfxcxZbbAuXoNTIlTvBjjMrcKV6Rg/HnL+To4HYSTL3gWjvF+2Z7auJkqdNU1rIuGr9IcTW76AAACwElEQVRIx5WW9UNiQRDHV0BQkFAQ8xTRQ5EwsL2zz/b07Nbr7u7u7u7O/RePnd33HvD2wXN+gN3vzHxgh9l5IBxjZV15Y9evdSJmBdODD+/fQxzT/amGd8y15PYiGmYgu1U6eb7/F/49WakIwFiTKgHwAVl+4B92hKqnq5QBOH2/BMBVMflT6dgx/zdjzrtMAQbBNmc3HznjpkmzJglQfD7q+B/02LFgX/wR/JhEAdH4blcyqIMSAJeek/wlYxjbq5Z+zn5bfj/BAyDUWAZJVoRyhRNtNYneDLI3zlTYPuE3iA+gMdgWXu0UCP2ik32r7+W41KMEcPqIPE/Ou0UgGARnNusYjMeREgC1EHk3WW07xAD6KebLFH9qqzKgncgbYZmWLnRXPfVdEgBmpAxYQ+Qsus4vZAnrSOehDrYrfIniAEaInMQ2LuEjL3YjtPiIrJpaxidQHID1IJFrhW2zQOhBRRvgdpwUQ/kAM8jDYutlCQTXsDH8+iDidnEBNQ1EnZMEz3oGePr8FcZPLCguYK15B6htEdqt24zgTrNrX6BYQKpgMynbDXu6aGirNTLuzs3yfDj+0tAzJAPwTBuQVWYBHCM6VQBNoyzf1psErscqAE2ZRbL8Pje+C7U0DsQHGDW7MkblrWWpCPsuw6TYFIwFpEhmq+lEXOsngTltEH+6JEEfcKwWLmQu6oGEU86VAvKPk7gr4SZpxZHXRC2goEF8PhTkQErHigCeXrjNV2EzQC+zdyWAEIz2YNRE0u5TDyiX5g8x02rY5/nVAvbqSUy1JKTR58akTh0gADOxIvIKn6Atd1YVwJ8HJx6KEg9Twg0VADqMjLnRKitD8evEgGMQ4IiVWRk0bxMB6qCAdqfMcZQe4ksiADwffH0cD50N2kSA+nDj6r08jwXK8BXB/4o4NSi5kF3H94y+++wLVf4HlTtB2ack5W8AAAAASUVORK5CYII=" mode="aspectFit" style="width: 32rpx;height: 19rpx;margin-right: 8rpx;" />
                            {{data.SERVERPART_NAME}}
                        </view>
                    </view>
                    <view class="uni-flex uni-column"  style="padding-right: 20rpx;">
                        <view class="uni-flex uni-row" style="align-items: center;padding-top: 8rpx;">
                            <view class="date-ico">原</view>
                            <text style="font-weight:bold; color: #878F94;">{{businessStatus[shopDetail.BUSINESS_ORISTATE]}}</text>
                        </view>
                        <view class="uni-flex uni-row end-date" style="align-items: center;">
                            <view class="date-ico" style="background-color: #63A1E6;color: #fff;">现</view>
                            <text style="font-weight:bold;margin-right: 16rpx;">{{businessStatus[shopDetail.BUSINESS_STATE]}}</text>
                            <text class="fs24" style="color: #878F94;">{{$util.cutDate(shopDetail.BUSINESS_ENDDATE,'YYYY年MM月DD')}}</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="card">
                <view class="dataAppoved">
                    <h2 style="font-weight: 700">营收详情</h2>
                    <view class="top">
                        <view class="left">
                            <span :class="{'scan-ico':effectiveDetail.SCAN_TYPE===1,'shouchi-ico':effectiveDetail.SCAN_TYPE===2,'jiekou-ico':effectiveDetail.SCAN_TYPE===3}">{{effectiveDetail.SHOPNAME}}</span>
                            <span style="color: #979797;">{{effectiveDetail.SERVERPART_NAME}}</span>
                        </view>
                        <view class="right">
                            <span class="fourth-name">结账人员：</span>{{effectiveDetail.WORKER_NAME}}
                            <div>{{effectiveDetail.ENDACCOUNT_DATE}}</div>
                        </view>
                    </view>
                    <view class="commodity">
                        <div style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-top: 16px">
                            <div class="commodityContent">
                                <span class="color1">{{showCash}}</span>
                                <div>
                                    <span class="ctitle">现金支付</span>
                                </div>
                            </div>
                            <div class="add">+</div>
                            <div class="commodityContent">
                                <span class="color1">{{effectiveDetail.MOBILEPAYMENT?$util.fmoney(effectiveDetail.MOBILEPAYMENT):'0.00'}}</span>
                                <div>
                                    <span class="ctitle">移动支付</span>
                                </div>

                            </div>
                            <div>=</div>
                            <div class="commodityContent">
                                <span class="color1">{{effectiveDetail.TOTALSELLAMOUNT?$util.fmoney(effectiveDetail.TOTALSELLAMOUNT):'0.00'}}</span>
                                <div>
                                    <span class="ctitle">销售金额</span>
                                </div>
                            </div>
                        </div>
                        <div style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-top: 16px">
                            <div class="commodityContent">
                                <span class="color1">{{effectiveDetail.CASHPAY_DOWNLORD?$util.fmoney(effectiveDetail.CASHPAY_DOWNLORD):'0.00'}}</span>
                                <div>
                                    <span class="ctitle">缴款金额</span>
                                </div>
                            </div>
                            <div class="add">-</div>
                            <div class="commodityContent">
                                <span class="color1">{{showCash}}</span>
                                <div>
                                    <span class="ctitle">现金支付</span>
                                </div>

                            </div>
                            <div>=</div>
                            <div class="commodityContent">
                                <span class="color1">{{effectiveDetail.DIFFERENT_PRICE?$util.fmoney(effectiveDetail.DIFFERENT_PRICE):'0.00'}}</span>
                                <div>
                                    <span class="ctitle">长短款额</span>
                                </div>
                            </div>
                        </div>
                        <div style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-top: 16px">
                            <div class="commodityContent-cashpay">
                                <span class="wid70" style="color: #333;">误差率：</span>
                                <span class="color1" :class="{'text-red': calcWuchalv > 0.3}">{{calcWuchalv}}%</span>
                            </div>
                            <div style="color:#fff">-</div>
                            <div class="commodityContent-cashpay">
                                <span class="wid70">实收金额：</span>
                                <view class="cashpay" >{{effectiveDetail.CASHPAY}}元</view>
                            </div>
                        </div>
                    </view>
                </view>
            </view>

            <view class="card" v-if="data.PendState===0">
                <view class="row jc-between" style="padding-top: 0;">
                    <view  style="color: #2f93e7;">审批意见</view>
                    <text v-if="data.APPOVED_DATE" style="color:#878F94">{{$util.cutDate( data.APPOVED_DATE,'YYYY/MM/DD hh:ss')}}</text>
                </view>
                <view class="approved-reason">
                    <view class="desc">
                <textarea
                        :value="approvalReason"
                        placeholder="请输入"
                        placeholder-style="color:#969EA4;line-height:2;padding-top:10rpx;"
                        auto-height
                        @blur="changeReason"
                        auto-focus
                ></textarea>
                    </view>
                </view>
                <!--        v-if="data.PendState===0"-->
            </view>




            <view class="card" style="margin-bottom: 20px" v-if="data.PendState===0">
                <view class="button-box">
                    <span @tap="cancelApproval"><image src="@/static/images/bh-btn.png" mode="aspectFit"></image>否决</span>
                    <span @click="savaShops"><image src="@/static/images/sh-btn.png" mode="aspectFit"></image>同意</span>
                </view>
            </view>
        </view>


    </view>
</template>

<script>
import ShopList from "./SelectShopList.vue";
import BaseDetail from "./baseDetail.vue";
import UniPopup from "../../../components/uni-popup.vue";
import {mapState} from "vuex";
import Store from "../../../store/store";

export default {
    props: {
        data: {
            type: Object,
        },
        businessId: {
            type: String,
            required: true
        },
        approvalData:{ // 审核通过时，被授权的门店数据
            type: Object,
            required: false
        },
        imagsList:{ // 附件信息
            type: Array,
            required: false
        },
        effectiveDetail:{
            type: Object,
        }
    },
    components:{
        ShopList,
        UniPopup,
        BaseDetail
    },
    computed: {
        ...mapState({
            user: (state)=>{ return state.userData}
        }),
        shopDetail () {
            return this.approvalData && this.approvalData.ShopModifyList ? this.approvalData.ShopModifyList[0] :null
        },
        // 金额格式化处理
        showCash() {
          if (this.effectiveDetail.CASH){
            return this.$util.fmoney(this.effectiveDetail.CASH)
          }else {
            return '0.00'
          }
        },
        calcWuchalv(){ // 误差率
          let _data = this.effectiveDetail
          if ( _data.CASH == 0 ) {
            if(_data.DIFFERENT_PRICE!=0) {
              return "100.00";

            }else {
              return "0.00";
            }
          }
          else {

            return (Math.abs(_data.DIFFERENT_PRICE)  / _data.CASH * 100).toFixed(2);

          }
        }
    },
    data() {
        return {
            showPopupBottom: false,
            shops:[],
            selectShopids:[],
            approvalReason: '',
            isloading:false,
            stateEmun: {2000:"办理中",3000:"未通过",9000:"已通过"},
            businessStatus : {
                3000: '关闭' ,
                2000: '暂停'
                ,
                1010: '待运营'
                ,
                1000: '运营中'
            },
            isState2010:false,
            isdisabled: true,
        }
    },
    watch:{
        data(newVal,oldVal){
            console.log('newVal',newVal)
            console.log('oldVal',oldVal)
        }
    },
    methods: {
      checkNum(event, s) {
        let value = event.detail.value.match(/[+-]?\d+(\.\d{0,2})?/)
        if (value) {
          value = value[0]
        } else {
          value = 0
        }
        this.effectiveDetail[s] = value
      },
        changeReason(event){
            this.approvalReason = event.detail.value
        },
        hidePopup(){
            this.showPopupBottom = false
        },
        priviewImages(type){ // 1 身份证正反面 2 营业执照
            uni.previewImage(type===1 ? {urls: this.personImges} : {urls: this.shopImges})
        },
        changeValues(values){
            let list = [] // this.selectShopids
            let _this =this
            if(values.length){
                _this.shops.forEach(n=>{
                    const index = values.includes(n.value)
                    if(index){
                        list.push({
                            PERMISSIONAPPLY_ID: this.data.PERMISSIONAPPLY_ID,
                            SERVERPART_NAME: this.data.SERVERPART_NAME ,
                            SERVERPART_ID: this.data.SERVERPART_ID,
                            SERVERPARTSHOP_NAME: n.label,
                            SERVERPARTSHOP_ID: n.value,
                            PERMISSIONAPPLY_TYPE: 4000,
                            PERMISSIONAPPLYDETAIL_TYPE:2000,
                            OPERATE_DATE: new Date()
                        })
                    }
                })
            }
            this.selectShopids=list
            // this.hidePopup()
        },
        getShops(data) {
            let _this = this
            this.$request.$webGet('/EShangApiMain/BaseInfo/GetServerpartShopDDL',{
                ProvinceCode: data.OWNERUNIT_ID,
                ServerpartId: data.SERVERPART_ID
            }).then(res=>{
                if(res.Result_Code!==100) return
                _this.shops = res.Result_Data.List
            })
        },
        savaShops() {
            let _this = this

            if(_this.isloading) return
            uni.showLoading({
                title:'正在提交'
            })
            _this.isloading = true
            let flag = false
            if (this.data.PERMISSIONAPPLY_STATE===2000){
                flag = true
            }
          let useData = Store.state.userData
          let detail = _this.data
          const date = new Date()
          let y = date.getFullYear()
          let m = date.getMonth() + 1
          let d = date.getDate()
          if (m<10){
            m='0'+m
          }
          if (d<10){
            d = '0'+d
          }
          let H = date.getHours()
          H<10?`0${H}`:H
          let M = date.getMinutes()
          M<10?`0${M}`:M
          let S = date.getSeconds()
          S<10?`0${S}`:S
          console.log('detail',detail)
          console.log('_this.effectiveDetail',_this.effectiveDetail)
          const req ={
            PermissionApplyModel:{
              PERMISSIONAPPLY_TYPE: 9000,
              USER_MOBILEPHONE: detail.USER_MOBILEPHONE,
              PERMISSIONAPPLY_DATE: detail.PERMISSIONAPPLY_DATE,
              PERMISSIONAPPLY_REASON: detail.PERMISSIONAPPLY_REASON,
              SERVERPART_ID: detail.SERVERPART_ID,
              SERVERPART_NAME: detail.SERVERPART_NAME,
              APPLYSHOP_NAME:_this.effectiveDetail.ENDACCOUNT_ID,
              STAFF_ID: detail.STAFF_ID,
              STAFF_NAME: detail.STAFF_NAME,
              OPERATE_DATE: detail.OPERATE_DATE,
              APPOVED_ID: useData.UserId,
              APPOVED_NAME: useData.UserName,
              APPOVED_INFO: this.approvalReason,
              PERMISSIONAPPLY_ID: detail.PERMISSIONAPPLY_ID,
              APPOVED_DATE: `${y}-${m}-${d} ${H}:${M}:${S}`,
              PERMISSIONAPPLY_STATE: 9000,
            }
          }
          console.log('req',req)
          this.$request.$webPost('EShangApiMain/Verification/CancelEndaccount',req).then(res=>{
            console.log('res',res)
                uni.hideLoading()
                _this.isloading=false
                if (res.Result_Code===100){
                    if (flag){
                        _this.isState2010 = true
                    }
                }
                if(res.Result_Code!==100) {
                    uni.showModal({
                        title: '温馨提示',
                        content: res.Result_Desc
                    })
                    return
                }
                uni.showModal({
                    title: '温馨提示',
                    content: res.Result_Desc,
                    showCancel:false,
                    success: function (res) {
                        if (res.confirm) {
                            _this.$util.toNextRoute('reLaunch', "/pages/authorityApproval/index")
                        }
                    }
                })
          })


            // const permissionApplyModel = {
            //     ...this.data,
            //     APPOVED_NAME: this.user.Membership_Name,
            //     APPOVED_INFO: this.approvalReason ||'通过',
            //     APPOVED_ID: this.user.UserId,
            //     PERMISSIONAPPLY_STATE: this.data.PERMISSIONAPPLY_STATE===2000?2010:9000,
            //     APPOVED_DATE: new Date()
            // }
            // console.log('req',permissionApplyModel)
            // this.$request.$webPost('/EShangApiMain/BusinessProcess/ApprovedMerchantApply',{
            //     PermissionApplyModel: permissionApplyModel,
            //     ShopModifyList: this.approvalData.ShopModifyList
            // }).then(res=>{
            //     uni.hideLoading()
            //     _this.isloading=false
            //     if (res.Result_Code===100){
            //         if (flag){
            //             _this.isState2010 = true
            //         }
            //     }
            //     console.log('res',res)
            //
            //     if(res.Result_Code!==100) {
            //         uni.showModal({
            //             title: '温馨提示',
            //             content: res.Result_Desc
            //         })
            //         return
            //     }
            //     uni.showModal({
            //         title: '温馨提示',
            //         content: res.Result_Desc,
            //         showCancel:false,
            //         success: function (res) {
            //             if (res.confirm) {
            //                 _this.$util.toNextRoute('reLaunch', "/pages/authorityApproval/index")
            //             }
            //         }
            //     })
            // })
        },
        cancelApproval(){
            let _this = this
            if(!this.approvalReason){
                uni.showToast({ title: '请填写否决意见' ,icon:'none'})
                return
            }
            if(_this.isloading) return
            uni.showLoading({
                title:'正在提交'
            })
            _this.isloading=true
            const permissionApplyModel = {
                ...this.data,
                APPOVED_NAME:this.user.Membership_Name,
                APPOVED_INFO: this.approvalReason,
                APPOVED_ID: this.user.UserId,
                PERMISSIONAPPLY_STATE: 3000,
                APPOVED_DATE: new Date()
            }
            this.$request.$webPost('/EShangApiMain/BusinessProcess/RejectPermissionApply',{
                PermissionApplyModel: permissionApplyModel
            }).then(res=>{
                uni.hideLoading()
                _this.isloading=false
                if(res.Result_Code!==100) {
                    uni.showModal({
                        title: '温馨提示',
                        content: res.Result_Desc
                    })
                    return
                }
                uni.showModal({
                    title: '温馨提示',
                    content: res.Result_Desc,
                    showCancel:false,
                    success: function (res) {
                        if (res.confirm) {
                            // _this.$emit('refresh')
                            _this.$util.toNextRoute('reLaunch', "/pages/authorityApproval/index")
                        }
                    }
                })

            })
        },
      handleCancel(){

      }
    },
}
</script>

<style lang="stylus">
@import url("/common/css/tenderingDetail.css");
.card {
    background-color: #fff;
    border-radius: 12rpx;
    margin: 24rpx 24rpx 24rpx;
    padding: 24rpx;
    box-shadow: 0px 4px 12px 0px rgba(225,225,225,0.56);

    .dataAppoved{
        .top{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .left{
            display: flex;
            flex-direction: column;
          }
        }
        .commodity{
            .commodity {
                width: 100%;
                background-color: #fff;
                padding: 30rpx 20rpx;
                box-sizing: border-box;
            }

            .commodity>div {
                display: flex;
                justify-content: space-around;
                font-size: 24rpx;
                align-items: center;
                margin-bottom: 30rpx;

            }

            .commodityContent {
                box-sizing: border-box;
                display: flex;
                align-items: center;
                width: 180rpx;
                justify-content: center;
                /* padding-top: 6rpx; */
                box-shadow: 0px 1rpx 8rpx 0.4rpx #ccc;
                flex-direction: column;
                border-radius: 4rpx;
            }

            .commodityContent>div {
                background: url('/static/images/effective/sjjy_jb.png') no-repeat center;
                width: 100%;
                text-align: center;
                background-size: contain;
            }

            .commodity>div:last-child {
                padding-top: 12rpx;
                margin-bottom: 0;
            }

            /* .commodity img {
              display: none;
              width: 40rpx;
              height: 40rpx;
              vertical-align: middle;
            } */

            .cashpay-box image {
                width: 40rpx;
                height: 40rpx;
            }

            .color1 {
                color: #333;
                font-size: 28rpx;
                line-height: 56rpx;
            }

            .ctitle {
                color: #63A0E5;
                font-size: 24rpx;
            }

            .text-red {
                color: #D13B3B;
                line-height: 60rpx;
            }

            .shenhe-mask {
                position: fixed;
                z-index: 998;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-color: rgba(0, 0, 0, .6);
            }

            .text-content {
                max-height: 150rpx;
                height: 120rpx;
                width: 100%;
                font-size: 28rpx;
                line-height: 1.5;
            }

            .check-reason {
                background-color: #f8f9fa;
                padding: 16rpx 20rpx;
                box-sizing: border-box;
                border-radius: 14rpx 14rpx 0 0;
            }


            .cashpay {
                display: inline-block;
                padding-left: 16rpx;
                height: 60rpx;
                line-height: 60rpx;
                color: #878787;
                box-sizing: border-box;
                width: 160rpx;
            }

            .cashpay-box {
                display: flex;
                align-items: center;
                justify-content: space-between;
                background-color: #f8f9fb;
                padding: 26rpx 0;
                flex-wrap: wrap;
                /* margin: 0 26rpx; */
            }

            .cashpay-box>div {
                width: 50%;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                height: 70rpx;
                padding-left: 36rpx;
            }

            .cashpay-check {
                margin: 0 20rpx 0 10rpx;
            }

            .data-check {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20rpx;
            }

            .data-check>.ctitle {
                width: 30%;
                display: flex;
                justify-content: center;
                color: #999;
            }

            .data-check-data {
                box-sizing: border-box;
                display: flex;
                align-items: center;
                width: 28%;
                justify-content: center;
                padding: 8rpx 0;
                box-shadow: 0px 1px 8px 0.2px #e2e2e2;
                height: auto;
                border-radius: 4rpx;
            }

            .data-check-data input {
                width: 90%;
            }

            .check-btn {
                width: 48%;
                background-color: #64a0e6;
                border: none;
                color: #fff;
                height: 80rpx;
                line-height: 80rpx;
                margin-top: 30rpx;
                text-align: center;
                border-radius: 10rpx;
            }

            .no-check {
                background-color: #fff;
                color: #666;
                border: 1px solid #d2d2d2;
            }


            /* 传输方法的图标 */
            .scan-ico,
            .shouchi-ico,
            .jiekou-ico,
            .weisc-ico {
                display: flex;
                align-items: center;

            }

            .scan-ico:after {
                content: '';
                display: block;
                margin-left: 16rpx;
                width: 30rpx;
                height: 30rpx;
                background: url(/static/images/effective/ewm.png) no-repeat center;
                background-size: contain;
            }

            .shouchi-ico:after {
                content: '';
                display: block;
                margin-left: 16rpx;
                width: 21rpx;
                height: 29rpx;
                background: url(/static/images/effective/scj.png) no-repeat center;
                background-size: contain;
            }

            .jiekou-ico:after {
                content: '';
                display: block;
                margin-left: 16rpx;
                width: 29rpx;
                height: 27rpx;
                background: url(/static/images/effective/jkcs.png) no-repeat center;
                background-size: contain;
            }


            /* 图片上传 */
            .img-box {
                background: #f8f9fa;
                padding: 10rpx 0 20rpx 20rpx;
                border-radius: 0 0 14rpx 14rpx;
            }

            .upload-file-container {
                display: flex;
                align-items: center;
                width: 100%;
                /* min-height: 260rpx; */
                box-sizing: border-box;
                flex-wrap: wrap;
            }

            .upload-file-add-container {
                position: relative;
                border: 1rpx solid #ccc;
                width: 136rpx;
                height: 137rpx;
                border-radius: 6rpx;
                margin-bottom: 16rpx;
            }

            .upload-file-add-container::before {
                content: '';
                display: block;
                position: absolute;
                left: 40rpx;
                top: 50%;
                height: 2rpx;
                background-color: #ccc;
                width: 60rpx;
            }

            .upload-file-add-container::after {
                content: '';
                display: block;
                position: absolute;
                left: 50%;
                top: 40rpx;
                width: 2rpx;
                height: 60rpx;
                background-color: #ccc;
            }


            .upload-file-unit {
                position: relative;
                width: 137rpx;
                height: 136rpx;
                margin-right: 32rpx;
                margin-bottom: 16rpx;
                border-radius: 8rpx;
                border: 2rpx solid #ccc;
            }

            .upload-file-unit image {
                width: 136rpx;
                height: 136rpx;
                border-radius: 8rpx;
            }

            .upload-file-remove {
                position: absolute;
                top: -14rpx;
                right: -12rpx;
                display: inline-block;
                width: 37rpx;
                height: 37rpx;
                line-height: 30rpx;
                background-color: #ff0000;
                color: #ffffff;
                font-size: 30rpx;
                border-radius: 50%;
                text-align: center;
                z-index: 1;
            }
        }




    }


    .row,.title-row {
        display flex;
        align-items center
        line-height 2
        padding 24rpx 0
        .title {
        flex 5
        .tag {
        background-color #5BC898
        color #FFFFFF
        padding 0rpx 8rpx
        border-radius 6rpx
        font-size 24rpx
        display inline-block
    }
    font-size 26rpx
    }
    .desc {
    flex 19
    color #3C3C3C
    font-size 26rpx
    textarea {
    width auto
    height 50rpx
    padding-top 4rpx
    line-height 1.5
    }
    }
    &:last-child {
    border none
    padding-top: 0
    }

    }
    .row +.row {
        padding-top: 0
    }
    .title-row {
        border-bottom 1px solid #F1F1F1
        padding-top 0
    }
    .approved-reason {
        padding: 16rpx 24rpx;
        background: #F8F9FB;
        border-radius: 4rpx;
        min-height: 97rpx;
        line-height: 2;
    }

    .approvalList{
        width: 100%;
        box-sizing: border-box;
        background: #fff;
        .approvalItem{
            width: 100%;
            .top{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .topLeft{
                    display: flex;
                    align-items: center;
                    .stateIcon{
                        width: 18px;
                        height: 18px;
                    }
                    .stateName{

                    }
                }
            }
            .bottom{
                width: 100%;
                display: flex;
                justify-content: flex-end;
            }
        }
    }



    .uni-icon-arrowright {
        color: #969EA4;
        font-size: 24rpx;
        margin-left 16rpx;
    }
    .select-item {
        background: #f6f9fe;
        border none;
        border-radius: 12rpx;
        padding  24rpx
        margin-top 24rpx
    }
    .tag-value {
        font-size: 22rpx;
        background-color: #63A1E6;
        margin-top: 8rpx;
        color: #fff;
        border-radius: 20rpx;
        padding: 0rpx 16rpx;
        justify-content: flex-start;
        display: flex;
        align-items: center;
    }
    .end-date {
        margin-top: 32upx;
        position: relative;
    }
    .end-date:before {
        content: '';
        position: absolute;
        height: 53upx;
        width: 1upx;
        border-left: 2upx dashed #BBC3C8;
        top: -42upx;
        left: 13upx;
    }
    .date-ico {
        font-size: 20upx;
        border-radius: 50%;
        height: 30rpx;
        width: 30rpx;
        color: #fff;
        text-align: center;
        line-height: 30upx;
        background-color: #BBC3C8;
        margin-right: 16rpx;
    }
}
</style>
