<template>
    <div>
        <lj-win-common title="销售预测单详情">
            <template slot="body">
                <lj-detail-status-header :value="mainObject.statusstr">
                    {{mainObject.taskcode}}
                    <svg v-if="mainObject.ifnew" class="icon" aria-hidden="true" >
                        <use xlink:href="#icon-notify-new"></use>
                    </svg>
                </lj-detail-status-header>
                <div class="lj-detail-content">
                    <div class="lj-card-item lj-detail-content-top">
                        <div class="lj-taskinfo-title" style="text-align: left;width: auto;">
                            <i class="iconfont icon-account lj-card-summary-icon"></i>
                            {{mainObject.cusname}}
                        </div>
                        <template v-if="mainObject.rel_rep || mainObject.cus_tele">
                            <div class="lj-taskinfo-title" style="text-align: left;">
                                <i class="iconfont icon-location lj-card-summary-icon"></i>
                                {{mainObject.rel_rep}}&nbsp;&nbsp;&nbsp;&nbsp;{{mainObject.cus_tele}}
                            </div>
                        </template>
                        <template v-if="mainObject.cus_address">
                            <div class="lj-card-quaternary-content" style="margin-left: 20px;">
                                地址：{{mainObject.cus_address}}
                            </div>
                        </template>
                    </div>
                    <div class="lj-card-item">
                        <mu-row>
                            <mu-col span="3" class="lj-taskinfo-title">业务员：</mu-col>
                            <mu-col span="3" class="lj-taskinfo-content">{{mainObject.assign_emp}}</mu-col>
                            <mu-col span="3" class="lj-taskinfo-title">相关号：</mu-col>
                            <mu-col span="3" class="lj-taskinfo-content">{{mainObject.relcode}}</mu-col>
                            <mu-col span="3" class="lj-taskinfo-title">订货日期：</mu-col>
                            <mu-col span="3" class="lj-taskinfo-content">{{mainObject.taskdate | dateFilter}}</mu-col>
                            <mu-col span="3" class="lj-taskinfo-title">交货日期：</mu-col>
                            <mu-col span="3" class="lj-taskinfo-content">{{mainObject.requiredate | dateFilter}}</mu-col>
                            <mu-col span="3" class="lj-taskinfo-title">优先级：</mu-col>
                            <mu-col span="3" class="lj-taskinfo-content">{{mainObject.levelStr}}</mu-col>
                        </mu-row>

                        <template v-if="mainObject.freight ||mainObject.freight_tele ||mainObject.station_address">
                            <template v-if="mainObject.freight ||mainObject.freight_tele">
                                <mu-row style="margin-top: 10px;">
                                    <template v-if="mainObject.freight">
                                        <mu-col span="3" class="lj-taskinfo-title">货运部：</mu-col>
                                        <mu-col span="9" class="lj-taskinfo-content">{{mainObject.freight}}</mu-col>
                                    </template>
                                    <template v-if="mainObject.freight_tele">
                                        <mu-col span="3" class="lj-taskinfo-title">货运电话：</mu-col>
                                        <mu-col span="9" class="lj-taskinfo-content">{{mainObject.freight_tele}}
                                        </mu-col>
                                    </template>
                                </mu-row>
                            </template>
                            <template v-if="mainObject.station_address">
                                <div class="lj-card-tag-text lj-card-summary-light-text" style="margin-left: 5px;">
                                    货运部地址：{{mainObject.station_address}}
                                </div>
                            </template>
                        </template>
                        <!-- 订单备注 -->
                        <div v-if="mainObject.dscrp" class="lj-card-summary lj-card-summary-light-text">
                            <i class="iconfont icon-edit lj-card-summary-icon"></i>
                            <span class="lj-card-tertiary-content">
                                 {{mainObject.dscrp}}
                            </span>
                        </div>
                        <!-- 生产备注 -->
                        <div v-if="mainObject.dscrp2" class="lj-card-summary lj-card-summary-light-text">
                            <i class="iconfont icon-edit lj-card-summary-icon"></i>
                            <span class="lj-card-tertiary-content">
                                 {{mainObject.dscrp2}}
                            </span>
                        </div>
                        <!-- 单据附件 -->
                        <div class="lj-card-item" v-if="filedatasList.length > 0">
                            <div style="padding: 2px; color: gray; font-size: 14px;">
                                单据附件
                            </div>
                            <van-cell class="lj-file-show_and_update" v-if="picFjFilter(filedatasList).length > 0">
                                <template v-for="(file, index) in picFjFilter(filedatasList)">
                                    <lj-img-pro
                                        :key="file.fileid"
                                        class="file-rel-item"
                                        v-if="file.filemd5"
                                        :md5="file.filemd5"
                                        @image-click="photoBrowser(index, picFjFilter(filedatasList))"
                                    />
                                </template>
                            </van-cell>
                            <div class="lj-card-item" v-for="(file, index) in docFjFilter(filedatasList)" :key="index">
                                <lj-fj :fileName="file.fileName" :fileType="file.fileType" :fileSize = file.filekb  :md5="file.filemd5"  :fileid="file.fileid"/>
                            </div>
                        </div>
                    </div>

                    <div class="lj-card-item" v-if="docInfo">
                        <div style="font-size:14px;margin:10px;">
                            <div v-if="docInfo.docflag === 1">
                                <div style="font-weight:bold">
                                    <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-dengdai1"></use>
                                    </svg>
                                    审批流程处理中
                                </div>
                                <div style="color:#888;line-height:30px;margin-left:18px;">正在审批步骤：{{currentFlowsort}}</div>
                            </div>
                            <div v-if="docInfo.docflag === 2">
                                <div style="font-weight:bold;color:#f00">
                                    <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-weiwancheng"></use>
                                    </svg>
                                    审批流程已否决
                                </div>
                                <div style="color:#888;line-height:30px;margin-left:18px;">否决步骤：{{currentFlowsort}}</div>
                            </div>
                            <div v-if="docInfo.docflag === 11">
                                <div style="font-weight:bold">
                                    <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-zhengque1"></use>
                                    </svg>
                                    审批流程已通过
                                </div>
                                <div style="color:#888;line-height:30px;margin-left:18px;">共耗时{{durationTime}}</div>
                            </div>
                            <div style="display:flex">
                                <div style="color:#6495ed;margin:10px auto 0 auto" @click="openProcess">查看详细审批情况</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="lj-card-item">
                        <div class="lj-detail-are-title">
                            订单明细
                        </div>
                        <div class="lj-detail-mx-list-content">
                            <div v-for="item in mxList">
                                <mu-row style="margin-left:-10px">
                                    <mu-col span="1" style="text-align: right;">
                                        <li></li>
                                    </mu-col>
                                    <mu-col>
                                        <div class="lj-taskinfo-content">
                                            {{item.mtrlname}}{{item.mtrlmode !== "" ? ","+item.mtrlmode : ""}}
                                            <template v-if="item.status"><br/>{{item.status}}</template>
                                            <template v-if="item.woodcode"><br/>{{item.woodcode}}</template>
                                            <template v-if="item.pcode"><br/>{{item.pcode}}</template>
                                        </div>
                                        <div class="lj-card-tertiary-content lj-card-summary-light-text">
                                            数量：{{item.saleqty}},  金额：￥{{item.fprice * item.saleqty | moneyFilter}}
                                        </div>
                                    </mu-col>
                                </mu-row>
                                <van-cell class="lj-file-show_and_update" v-if="picFjFilter(item.filedatas).length > 0">
                                    <template v-for="(file, index) in picFjFilter(item.filedatas)">
                                        <lj-img-pro
                                            :key="file.fileid"
                                            class="file-rel-item"
                                            v-if="file.filemd5"
                                            :md5="file.filemd5"
                                            @image-click="photoBrowser(index, picFjFilter(item.filedatas))"
                                        />
                                    </template>
                                </van-cell>
                                <div class="lj-card-item" v-for="(file, index) in docFjFilter(item.filedatas)" :key="index">
                                    <lj-fj :fileName="file.fileName" :fileType="file.fileType" :fileSize = file.filekb  :md5="file.filemd5"  :fileid="file.fileid"/>
                                </div>
                                <div class="lj-divider"></div>
                            </div>
                        </div>
                    </div>

                </div>
            </template>
        </lj-win-common>

        <div v-if="docInfo" v-show="shwoProcess">
            <div class="quote_edit_mask" @click="shwoProcess = false"></div>
            <div class="popupProcess">
                <div style="width:100%;height:168px;overflow:hidden;" :class="pic_bg_color">
                    <div class="wave_one" :class="wave_color"></div>
                    <div class="wave_two" :class="wave_color"></div>
                    <div class="wave_three" :class="wave_color"></div>
                </div>
                <!-- 图片 -->
                <div class="pic_warp">
                    <div style="text-align: center;">
                        <img :src="'../../../assets/image/toppic.png'" style="display: inline-block;max-width:200px;"> </img>
                    </div>
                </div>
                <!-- 关闭按钮 -->
                <div style="position: absolute;top:15px;right: 6%;color: #f0f0f0;font-size: 12px;line-height:26px;" @click="closeProcess">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanbi"></use>
                    </svg>
                </div>
                <!-- 左边状态角标 -->
                <div v-if="docInfo.docflag === 1" style="position: absolute;top:40px;background-color:#d8ebf9;color:#0679b2;padding:2px 8px;font-weight:bold;font-size:14px;box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.3);">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dengdai1"></use>
                    </svg>
                    {{docInfo.docflagStr}}
                </div>
                <div v-if="docInfo.docflag === 2" style="position: absolute;top:40px;background-color:#fee7e5;color:#ff6f61;padding:2px 8px;font-weight:bold;font-size:14px;box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.3);">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weiwancheng"></use>
                    </svg>
                    {{docInfo.docflagStr}}
                </div>
                <div v-if="docInfo.docflag === 11" style="position: absolute;top:40px;background-color:#ebfbd4;color:#88b04b;padding:2px 8px;font-weight:bold;font-size:14px;box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.3);">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhengque1"></use>
                    </svg>
                    {{docInfo.docflagStr}}
                </div>
                <!-- 审批流程状态 -->
                <div style="display:flex;margin:10px 0 0 0;align-items: center;">
                    <div style="position: absolute;right:5%;color:#888;font-size:12px" v-if="docInfo.docflag === 1">
                        已审批了{{durationTime}}
                    </div>
                    <div style="position: absolute;right:5%;color:#888;font-size:12px" v-else>
                        审批耗时{{durationTime}}
                    </div>
                </div>

                <div>
                    <div style="padding:10px 20px;">
                        <template v-for="step in docInfo.stepList">
                            <div style="margin-top: 5px;">
                                <div style="display: flex;align-items: center;">
                                    <span v-if="step.flowsort == 0" style="font-size: 20px;">
                                        <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-zhengque1"></use>
                                        </svg>
                                    </span>
                                    <span v-else-if="step.allpassed == 3" style="font-size: 20px;">
                                        <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-dengdai1"></use>
                                        </svg>
                                    </span>
                                    <span v-else-if="step.allpassed == 2" style="font-size: 20px;">
                                        <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-weiwancheng"></use>
                                        </svg>
                                    </span>
                                    <span v-else-if="step.allpassed == 1" style="font-size: 20px;">
                                        <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-zhengque1"></use>
                                        </svg>
                                    </span>
                                    <span v-else-if="step.allpassed == 0 || step.allpassed == 5" style="font-size: 20px;">
                                        <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-jianzhanbuzhouweiwan"></use>
                                        </svg>
                                    </span>
                                    <div class="flowstep_title">
                                        <span v-if="step.allpassed == 5" style="text-decoration: line-through;color: #aaa">{{step.flowstepname}}</span>
                                        <span v-else class="flowstep_title">{{step.flowstepname}}</span>
                                        <span v-if="step.flowsort == docInfo.flowsort && step.flowsort > 0 && docInfo.docflag !== 11">(正在审批)</span>
                                    </div>
                                </div>
                                <!-- 审批流程明细 -->
                                <div>
                                    <div style="margin-left: 30px;font-size: 15px;">
                                        <template v-for="stepmx in step.flowEmpList">
                                            <div style="display: flex;">
                                                <!--是否全部通过审批（图标）-->
                                                <div v-if="step.flowEmpList.length > 1">
                                                    <div v-if="step.ifjoin == 0" :style="stepmx.cancel == 1 ? {color: '#aaa'}:{}">
                                                        <svg class="icon" aria-hidden="true" style="color: red" v-if="stepmx.passed == 2">
                                                            <use xlink:href="#icon-butongguo"></use>
                                                        </svg>
                                                        <svg class="icon" aria-hidden="true" v-if="stepmx.passed == 1">
                                                            <use xlink:href="#icon-tongguo"></use>
                                                        </svg>
                                                        <svg class="icon" aria-hidden="true" v-if="stepmx.passed == 0">
                                                            <use xlink:href="#icon-unselected"></use>
                                                        </svg>
                                                    </div>
                                                    <div v-else>
                                                        <svg class="icon" aria-hidden="true" style="color: red" v-if="stepmx.passed == 2">
                                                            <use xlink:href="#icon-cuowu"></use>
                                                        </svg>
                                                        <svg class="icon" aria-hidden="true" v-if="stepmx.passed == 1">
                                                            <use xlink:href="#icon-kongjianyixuan"></use>
                                                        </svg>
                                                        <svg class="icon" aria-hidden="true" v-if="stepmx.passed == 0">
                                                            <use xlink:href="#icon-kongjianweixuan"></use>
                                                        </svg>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div v-if="stepmx.cancel == 1" style="text-decoration: line-through;color: #aaa">
                                                        <span>{{stepmx.empname}}</span>
                                                    </div>
                                                    <div v-else>
                                                        <div v-if="stepmx.passed == 2" style="color: red;">
                                                            <span>{{stepmx.empname}}</span>
                                                            <span style="margin-left: 10px;">{{stepmx.greetime | timeFilter2}}</span>
                                                        </div>
                                                        <div v-else-if="stepmx.passed == 1">
                                                            <span>{{stepmx.empname}}</span>
                                                            <span style="margin-left: 10px;color: #888">{{stepmx.greetime | timeFilter2}}</span>
                                                        </div>
                                                        <div v-else>
                                                            <span>{{stepmx.empname}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--PC移动端图标-->
                                                <div  v-if="stepmx.clienttype" style="margin-left: 10px;">
                                                    <div v-if="stepmx.clienttype" style="color: #7ba62c;">
                                                        <svg class="icon" aria-hidden="true">
                                                            <use xlink:href="#icon-tel"></use>
                                                        </svg>
                                                        {{stepmx.clienttype}}
                                                    </div>
                                                    <div v-else style="color: #0281ed;">
                                                        <svg class="icon" aria-hidden="true">
                                                            <use xlink:href="#icon-diannao"></use>
                                                        </svg>
                                                        PC
                                                    </div>
                                                </div>
                                            </div>
                                            <div v-if="stepmx.empcontent" 
                                                :class="stepmx.passed == 2 ? 'lj-sharp-red-text' : 'lj-card-summary-heavy-text'"
                                                style="margin-left: 20px;font-size: 14px;"
                                            >
                                                <span v-if="stepmx.passed == 2">否决理由：</span>
                                                <span v-else>审批意见：</span>
                                                {{ stepmx.empcontent }}
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <!-- 按钮 -->
                <div v-show="showUrgeButton" style="padding: 10px 20px 10px 0;">
                    <mu-button color="#0074d9" style="float: right;" @click="handleClickUrge">催办</mu-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import LjWinCommon from "components/lj-win-common";
    import LjDetailStatusHeader from "components/lj-detail-status-header";
    import LjFj from "components/lj-fj";
    import LjImgPro from "components/lj-img-pro";

    export default {
        name: "saletask-detail",
        components: {LjDetailStatusHeader, LjWinCommon, LjFj, LjImgPro},
        data() {
            return {
                mainObject: {},
                userFunids: [],
                mxList: [],
                jdmxList: [],
                docInfo: {},
                currentFlowsort: "",
                showUrgeButton: false,
                durationTime: null,
                shwoProcess: false,
                filedatasList: [],
            }
        },
        created() {
            this.userFunids = $lj.getStorage('user').rsltFunids;
            let pageParam = $lj.getPageParam();
            if (pageParam.mainObject) {
                this.mainObject = pageParam.mainObject;
            }
            this.reloadData();
        },
        methods: {
            photoBrowser(index, arr) {
                var images = [];
                for (const picture of arr) {
                    let url = "";
                    if (picture.hasOwnProperty("thumbPath")) {
                        url = picture.thumbPath
                    } else {
                        url = $lj.constant.cacheDir + "/" + picture.filemd5;
                    }
                    images.push(url);
                }
                $lj.photoBrowser(images, index);
            },
            docFjFilter(data) {
                if (!data || !data.length) return []
                let picArr = ["jpg","jpeg","png","gif","bmp"]
                return data.filter((item) => {
                    return picArr.indexOf(item.fileType.trim().toLowerCase()) == -1
                })
            },
            picFjFilter(data) {
                if (!data || !data.length) return []
                let picArr = ["jpg","jpeg","png","gif","bmp"]
                return data.filter((item) => {
                    return picArr.indexOf(item.fileType.trim().toLowerCase()) > -1
                })
            },
            reloadData() {
                if (!this.mainObject.taskid) {
                    return;
                }
                this.fillData();
            },
            fillData() {
                let self = this;
                let requestBody = {
                    token: $lj.getStorage("token"),
                    scid: this.mainObject.scid,
                    taskid: this.mainObject.taskid
                };
                $lj.postLJRequest('GetL1SaletaskForeMx', requestBody, function (ret) {
                    if (ret) {
                        self.mxList = ret.saletaskmxList;
                        self.jdmxList = ret.saletaskjdmxList;

                        if (ret.docInfo) {
                            let dt = new Date(ret.docInfo.last_time.replace(/-/g, '/')) - new Date(ret.docInfo.opdt.replace(/-/g, '/'));
                            self.durationTime = parseInt(dt  / (1000 * 60 * 60 * 24)) + '天' + parseInt(dt  / (1000 * 60 * 60)) + '时';
                            let ifCancel = 0;
                            //获取当前进度
                            let currentFlowSort = ret.docInfo.flowsort;
                            if (ret.docInfo.docflag == 2) {
                                ret.docInfo.stepList.forEach((step) => {
                                    let ifbreak = false;
                                    step.flowEmpList.forEach((stepmx) => {
                                        if (stepmx.passed == 2) {
                                            currentFlowSort = step.flowsort
                                            ifbreak = true;
                                            return false;
                                        }
                                    })
                                    if (ifbreak) {
                                        return false;
                                    }
                                })
                            }

                            for(let i = 0; i < ret.docInfo.stepList.length; i++)  {
                                ret.docInfo.stepList[i].allpassed = 0
                                //判断之前的步骤
                                if (ret.docInfo.stepList[i].flowsort < currentFlowSort) {
                                    ret.docInfo.stepList[i].allpassed = 1
                                    if (ret.docInfo.stepList[i].ifjoin == 0 && ret.docInfo.stepList[i].flowEmpList.length > 1) {
                                        let passedEmp = "";
                                        for (let j = 0; j < ret.docInfo.stepList[i].flowEmpList.length; j++) {
                                            if (ret.docInfo.stepList[i].flowEmpList[j].passed == 1) {
                                                passedEmp = ret.docInfo.stepList[i].flowEmpList[j].empname
                                                break;
                                            }
                                        }
                                        ret.docInfo.stepList[i].flowEmpList.forEach((stepmx) => {
                                            if (stepmx.empname != passedEmp) {
                                                stepmx.cancel = 1;
                                            }
                                        })
                                    }
                                    
                                }
                                //判断当前步骤
                                let opposeEmp = "";
                                if (ret.docInfo.stepList[i].flowsort == currentFlowSort) {
                                    let passedNum = 0;
                                    ret.docInfo.stepList[i].allpassed = ret.docInfo.docflag == 11 ? 1 : 3
                                    self.currentFlowsort = ret.docInfo.stepList[i].flowstepname
                                    for (let j = 0; j < ret.docInfo.stepList[i].flowEmpList.length; j++) {
                                        if(ret.docInfo.stepList[i].flowEmpList[j].empname == self.currentEmpname) {
                                            self.showUrgeButton = ret.docInfo.docflag == 11 ? false : true;
                                        }
                                        //存在否决，跳出循环，将之后的步骤全部取消
                                        if (ret.docInfo.stepList[i].flowEmpList[j].passed == 2) {
                                            ret.docInfo.stepList[i].allpassed = 2
                                            opposeEmp = ret.docInfo.stepList[i].flowEmpList[j].empname
                                            self.showUrgeButton = false;
                                            ifCancel = 1
                                            break;
                                        }
                                        // 通过人员统计
                                        else if (ret.docInfo.stepList[i].flowEmpList[j].passed == 2) {
                                            passedNum++;
                                        }
                                    }
                                    if (ifCancel == 1) {
                                        ret.docInfo.stepList[i].flowEmpList.forEach((stepmx) => {
                                            if (stepmx.passed == 0 && stepmx.empname != opposeEmp) {
                                                stepmx.cancel = 1;
                                            }
                                        })
                                    } else {
                                        //(单选)存在通过审批时，其他用户变为取消
                                        if (passedNum > 0 && ret.docInfo.stepList[i].ifjoin === 0) {
                                            ret.docInfo.stepList[i].flowEmpList.forEach((stepmx) => {
                                                if (stepmx.passed == 0 && stepmx.empname != opposeEmp) {
                                                    stepmx.cancel = 1;
                                                }
                                            })
                                        }
                                    }
                                }
                                //判断之后的步骤
                                if (ret.docInfo.stepList[i].flowsort > currentFlowSort) {
                                    if (ifCancel == 1) {
                                        ret.docInfo.stepList[i].allpassed = 5
                                        ret.docInfo.stepList[i].flowEmpList.forEach((stepmx) => {
                                            stepmx.cancel = 1;
                                        })
                                    } else {
                                        ret.docInfo.stepList[i].allpassed = 0
                                    }
                                }
                            }
                        }
                        self.docInfo = ret.docInfo;
                        
                        if(ret.filedatas){
                            self.filedatasList = ret.filedatas;
                        }
                    }
                })
            },
            handleClickUrge() {
                let self = this;
                $lj.postLJRequest('UrgeDoc', {token: $lj.getStorage("token"), docid: self.docInfo.docid}, function (ret) {
                    if (ret) {
                        alert("催办成功");
                        self.shwoProcess = false;
                    }
                })
            },
            openProcess() {
                this.shwoProcess = true;
            },
            closeProcess() {
                this.shwoProcess = false;
            }
        },
        computed: {
            wave_color: function () {
                return {
                    wave_blue: this.docInfo.docflag == 1,
                    wave_red: this.docInfo.docflag == 2,
                    wave_green: this.docInfo.docflag == 11
                };
            },
            pic_bg_color: function () {
                return {
                    pic_bg_blue: this.docInfo.docflag == 1,
                    pic_bg_red: this.docInfo.docflag == 2,
                    pic_bg_green: this.docInfo.docflag == 11
                };
            },
        }
    }
</script>

<style scoped>
    .popupProcess {
        background-color: #fff;
        height:85%;
        position: fixed;
        right: 10px;
        bottom: 10px;
        left: 10px;
        z-index: 9999;
        border-radius: 15px;
        overflow:hidden;
    }

    /* 顶部造型css */
    .wave_one {
        width: 180%;
        height: 180%;
        background-color: #fec1c1;
        opacity: 0.3;
        border-radius: 50%;
        position: relative;
        top: 98px;
        left: -40%;
        z-index: 9990;
    }

    .wave_two {
        width: 180%;
        height: 180%;
        background-color: #fec1c1;
        opacity: 0.4;
        border-radius: 50%;
        position: relative;
        top: -183px;
        left: -40%;
        z-index: 9991;
    }

    .wave_three {
        width: 160%;
        height: 160%;
        background-color: #fec1c1;
        opacity: 0.5;
        border-radius: 50%;
        position: relative;
        top: -468px;
        left: -30%;
        z-index: 9991;
    }

    .pic_warp {
        position: absolute;
        top: 38px;
        width: 95%;
        z-index: 9998;
    }


    .wave_green {
        background-color: #d2f3a2;
    }

    .pic_bg_green {
        background-color: #88b14b;
    }

    .wave_blue {
        background-color: #82bcd8;
    }

    .pic_bg_blue {
        background-color: #0679b2;
    }


    .wave_red {
        background-color: #fec1c1;
    }

    .pic_bg_red {
        background-color: #fa5a5a;
    }

    .flowstep_title {
        font-weight: bold;
        margin-left: 5px;
        font-size: 17px;
    }

    .quote_edit_mask {
        height: 100%;
        width: 100%;
        background-color: #1d1d1d;
        opacity: 0.8;
        position: fixed;
        top: 0px;
        z-index: 9998;
    }
</style>