<template>
    <div>
        <lj-win-common title="产品报价">
            <template slot="header_right">
                <mu-menu placement="bottom-end" :open.sync="openTitle">
                    <mu-button icon>
                        <i class="iconfont icon-more"></i>
                    </mu-button>
                    <mu-list slot="content">
                        <mu-list-item button @click="openTitle = false">
                            <mu-list-item-title>转换为中文</mu-list-item-title>
                        </mu-list-item>
                        <mu-list-item button onclick="$lj.toast('功能正在开发中!')">
                            <mu-list-item-title>转换为英文</mu-list-item-title>
                        </mu-list-item>
                        <mu-list-item button @click="GetMtrlInfo">
                            <mu-list-item-title>刷新选配项</mu-list-item-title>
                        </mu-list-item>
                    </mu-list>
                </mu-menu>
            </template>
            <div slot="body">
                <div class="lj-card-item">
                    <div class="quotelist_main">
                        <div class="quote-img-responsive">
                            <lj-img :md5="mainObject.picmd5" />
                        </div>
                    </div>
                    <div>
                        <div class="lj-sharp-red-text" style="font-weight: bold;font-size: 20px;">
                            {{moneycode}}{{mainObject.price / rate |moneyFilter}}</div>
                        <div class="quote_edit_flex">
                            <div class="quote_edit_mtrlname" style="flex:0 0 85%">{{mainObject.mtrlname}}</div>
                            <div class="quote_edit_subinfo">月销{{mainObject.noallocqty}}{{mainObject.unit}}</div>
                        </div>
                        <div class="lj-card-summary-light-text lj-card-quaternary-content">
                            <span v-if="mainObject.mtrlmode !=''"
                                style="padding:0px 5px">·规格{{mainObject.mtrlmode}}</span>
                            <span style="padding:0px 5px 0px 0px">·净重{{mainObject.net_weight}}KG</span>
                            <span style="padding:0px 5px 0px 0px">·毛重{{mainObject.gross_weight}}KG</span>
                            <span v-for="Pros in mtrlPros"
                                style="padding:0px 5px">·{{Pros.proname}}{{Pros.provalue}}</span>
                            <span v-if="mainObject.mtrlsectype"
                                style="padding:0px 5px">·{{mtrlsectypename + mainObject.mtrlsectype}}</span>
                            <span v-if="mainObject.zxmtrlmode"
                                style="padding:0px 5px">·{{zxmtrlmodename + mainObject.zxmtrlmode}}</span>
                            <span v-if="mainObject.usermtrlmode"
                                style="padding:0px 5px">·{{usermtrlmodename + mainObject.usermtrlmode}}</span>
                        </div>
                    </div>
                </div>
                <div class="lj-card-item">
                    <div class="card-title">
                        选配
                    </div>
                    <div style="margin: 0 -10px;">
                        <configure-select v-model="status" :flag="mtrlInfo.statusflag" :option="mtrlInfo.statusop"
                            v-if="mtrlInfo.statusflag" @input="inputStatus" :readonly="!ifedit"
                            :disabled="statusdisable" />
                        <configure-select v-model="woodcode" :flag="mtrlInfo.woodcodeflag" :option="mtrlInfo.woodcodeop"
                            v-if="mtrlInfo.woodcodeflag" @input="inputWoodcode" :readonly="!ifedit"
                            :disabled="statusdisable" />
                        <!--<configure-select v-model="pcode" :configureName="pcodeName" :flag="mtrlInfo.pcodeflag"-->
                        <!--:option="mtrlInfo.pcodeop" />-->
                    </div>
                    <div style="margin-top:3px;">
                        <mu-row>
                            <mu-col :span="rowTitleSpan" class="card-title">选配单价</mu-col>
                            <mu-col style="margin:3px 0px 0px 0px;">
                                <span v-if="moneyname.trim() == '人民币'">{{price_xuanpei | moneyFilter}}</span>
                                <span v-if="moneyname.trim() != '人民币'">
                                    {{moneyname}}{{moneycode}}{{Math.round(price_xuanpei / rate * 100) / 100  | moneyFilter}}
                                    折合人民币{{price_xuanpei | moneyFilter}}
                                </span>
                            </mu-col>
                        </mu-row>
                    </div>
                </div>
                <div class="lj-card-item">
                    <mu-row>
                        <mu-col :span="rowTitleSpan" class="card-title">柜型</mu-col>
                        <mu-col style="margin:3px 0px 0px 0px;" @click="showC">{{Cname}}<span
                                style="margin-left:10px">参考柜数:{{ckCnum}}</span></mu-col>
                        <mu-col>
                            <i class="iconfont icon-right" style="font-weight: bold;font-size:16px;float:right;margin:5px 0px 0px 0px;color:#C8C8CD"
                                @click="showC"></i>
                        </mu-col>
                        <!-- 柜型弹窗 -->
                        <mu-dialog title="柜型" width="360" scrollable :open.sync="openC">
                            <mu-list>
                                <mu-list-item v-for="C in Clist">
                                    <mu-list-item-content>
                                        <mu-radio :label="C.lable" :value="C.lable" v-model="Cname"
                                            @click="closeC(C.value)"></mu-radio>
                                    </mu-list-item-content>
                                </mu-list-item>
                            </mu-list>
                        </mu-dialog>
                    </mu-row>
                    <mu-divider style="margin:5px 0px 5px 0px;"></mu-divider>
                    <mu-row>
                        <mu-col :span="rowTitleSpan" class="card-title" style="margin-bottom:5px">数量</mu-col>
                        <mu-col @click="showDis">
                            <div style="margin:3px 0px 0px 0px;">
                                {{qty}}
                                <span v-if="ifedit">
                                    <svg class="icon" aria-hidden="true" style="margin-left:20px">
                                        <use xlink:href="#icon-edit"></use>
                                    </svg>
                                </span>
                            </div>
                        </mu-col>
                        <div class="quote_edit_subinfo" style="margin:5px 0px 0px 10px;" @click="showDis">
                            {{discountlable}}
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-question"></use>
                            </svg>
                        </div>

                    </mu-row>
                    <!-- <mu-row v-if="PCTprice_dvi > 0">
                    <mu-col :span="rowTitleSpan" class="card-title"></mu-col>
                    <mu-col @click="showDis">运费分摊:
                        <span v-if="moneyname.trim() == '人民币'">{{PCTprice_dvi}}</span>
                        <span v-if="moneyname.trim() != '人民币'">
                            {{moneyname}}{{moneycode}}{{PCTprice_dvi}}
                            折合人民币{{PCTprice_dvi_Rmb}}
                        </span>
                    </mu-col>
                </mu-row> -->
                    <mu-divider style="margin:5px 0px 5px 0px;"></mu-divider>
                    <mu-row>
                        <mu-col :span="rowTitleSpan" class="card-title">贸易方式</mu-col>
                        <mu-col style="margin:3px 0px 0px 0px;" @click="showT">{{Tname}}</mu-col>
                        <mu-col>
                            <i class="iconfont icon-right" style="font-weight: bold;font-size:16px;float:right;margin:5px 0px 0px 0px;color:#C8C8CD"
                                @click="showT"></i>
                        </mu-col>
                        <!-- 贸易弹窗 -->
                        <mu-dialog title="贸易方式" width="360" scrollable :open.sync="openT">
                            <mu-list>
                                <mu-list-item v-for="T in Tlist">
                                    <mu-list-item-content>
                                        <mu-radio :label="T.lable" :value="T.lable" v-model="Tname"
                                            @click="closeT(T.value)"></mu-radio>
                                    </mu-list-item-content>
                                </mu-list-item>
                            </mu-list>
                        </mu-dialog>
                    </mu-row>
                    <mu-divider style="margin:5px 0px 5px 0px;"></mu-divider>
                    <mu-row>
                        <mu-col :span="rowTitleSpan" class="card-title">港口</mu-col>
                        <mu-col style="margin:3px 0px 0px 0px;" @click="showP">{{Pname}}</mu-col>
                        <mu-col>
                            <i class="iconfont icon-right" style="font-weight: bold;font-size:16px;float:right;margin:5px 0px 0px 0px;color:#C8C8CD"
                                @click="showP"></i>
                        </mu-col>
                        <!-- 港口弹窗 -->
                        <mu-dialog title="港口" width="360" scrollable :open.sync="openP">
                            <mu-list>
                                <mu-list-item v-for="P in Plist">
                                    <mu-list-item-content>
                                        <mu-radio :label="P.lable" :value="P.lable" v-model="Pname"
                                            @click="closeP(P.value)"></mu-radio>
                                    </mu-list-item-content>
                                </mu-list-item>
                            </mu-list>
                        </mu-dialog>
                    </mu-row>
                    <mu-divider style="margin:5px 0px 5px 0px;"></mu-divider>
                    <mu-row>
                        <mu-col :span="rowTitleSpan" class="card-title">参考装柜量</mu-col>
                        <mu-col style="margin:3px 0px 0px 0px;">{{RLQprice}}{{mainObject.unit}}</mu-col>
                    </mu-row>
                    <!-- <mu-row>
                    <mu-col :span="rowTitleSpan" class="card-title">
                        总运费
                    </mu-col>
                    <mu-col style="margin:3px 0px 0px 0px;">
                        <span v-if="moneyname.trim() == '人民币'">{{PCTprice | moneyFilter}}</span>
                        <span v-if="moneyname.trim() != '人民币'">
                            {{moneyname}}{{moneycode}}{{Math.round(PCTprice / rate * 100) / 100 | moneyFilter}},
                            折合人民币{{PCTprice | moneyFilter}}</span>
                    </mu-col>
                </mu-row> -->
                </div>
                <div class="lj-card-item">
                    <div class="quote_edit_main_title">调整费用</div>
                    <mu-row style="display:flex;align-items: center;margin-bottom:5px;">
                        <mu-col :span="rowTitleSpan" class="quote_edit_main_pzname">优惠比例</mu-col>
                        <mu-col style="margin-top:3px">{{discountamt}} %</mu-col>
                    </mu-row>
                    <mu-row style="display:flex;align-items: center;margin-bottom:5px;">
                        <mu-col :span="rowTitleSpan" class="quote_edit_main_pzname">其它费用</mu-col>
                        <mu-col>—<input type="number" style="width:38px;text-align: center;" v-model="otheramt"
                                :disabled="!ifedit" onFocus="window.scrollTo(0,0)"></mu-col>
                    </mu-row>
                </div>

                <div class="lj-card-item">
                    <div class="quote_edit_flex">
                        <div class="quote_edit_main_qty">币种</div>
                        <div class="quote_edit_main_pzvalue">{{moneyname}}
                        </div>
                        <div class="quote_edit_main_pzvalue" style="margin-left:10px;">汇率 {{rate}}</div>

                        <div style="margin:6px 0px 0px 10px" v-if="moneyname.trim() == '人民币'">
                            <mu-checkbox v-model="iftax" label="含税 税率13%" @change="taxChange" :disabled="!ifedit">
                            </mu-checkbox>
                        </div>
                        <div class="quote_edit_main_pzbtn" @click="showMoney">
                            <i class="iconfont icon-right" style="font-weight: bold;font-size:16px;float:right;margin:5px 0px 0px 0px;color:#C8C8CD"></i>
                        </div>
                        <!-- 币种弹窗 -->
                        <mu-dialog title="币种" width="360" scrollable :open.sync="openMoney">
                            <mu-list>
                                <mu-list-item v-for="money in moneyList">
                                    <mu-list-item-content>
                                        <mu-radio :label="money.name" :value="money.name" v-model="moneyname"
                                            @click="closeMoney(money)"></mu-radio>
                                    </mu-list-item-content>
                                </mu-list-item>
                            </mu-list>
                        </mu-dialog>
                    </div>
                    <div class="quote_edit_flex" style="margin-top:5px;">
                        <div class="quote_edit_main_qty">单价</div>
                        <div class="quote_edit_main_pzvalue">
                            <span>{{moneyname}}</span>{{moneycode}}{{price_ori | moneyFilter}} </div>
                        <div class="quote_edit_main_pzvalue" style="margin-left:10px;" v-if="moneyname.trim() != '人民币'">
                            折合人民币￥{{(price_yuan - Number(otheramt) * rate) * (100-Number(discountamt)) * 0.01  | moneyFilter}}
                        </div>
                    </div>
                    <div class="quote_edit_flex" style="margin-top:5px;">
                        <div class="quote_edit_main_qty">总金额</div>
                        <div class="quote_edit_main_pzvalue">
                            <span>{{moneyname}}</span>{{moneycode}}{{finalPrice | moneyFilter}}</div>
                        <div class="quote_edit_main_pzvalue" style="margin-left:10px;" v-if="moneyname.trim() != '人民币'">
                            折合人民币￥{{finalPriceShow| moneyFilter}}
                        </div>
                    </div>
                    <div class="quote_edit_flex" style="margin-top:5px;">
                        <div class="quote_edit_main_qty">有效期</div>
                        <div class="quote_edit_main_pzvalue">
                            <mu-date-input v-model="validityday" solo value-format="YYYY-MM-DD" container="bottomSheet"
                                style="width:70%" :disabled="!ifedit"></mu-date-input>
                            <span v-if="ifedit">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-edit"></use>
                                </svg>
                            </span>
                        </div>
                    </div>
                </div>
                <!-- 客户 -->
                <div class="lj-card-item">
                    <div class="quote_edit_flex">
                        <!-- <div style="display:flex;">
                        <div class="quote_edit_main_title">客户
                            <svg class="icon" aria-hidden="true" v-if="ifcust==1 && CusID != 0" @click="ifcust = 0">
                                <use xlink:href="#icon-yanjing_kai"></use>
                            </svg>
                            <svg class="icon" aria-hidden="true" v-if="ifcust==0" @click="ifcust = 1">
                                <use xlink:href="#icon-yanjing_bi"></use>
                            </svg>
                        </div>
                        <div class="quote_edit_main_pzbtn" style="color:#333" @click="openCust">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-right"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="quote_edit_main_pzvalue"><span v-if="ifcust==1">{{Cusname}}</span><span
                            v-if="ifcust==0">{{Cuscode}}</span>
                    </div>
                    <div class="quote_edit_main_pzvalue" style="font-size:12px;padding:5px 0 " v-if="ifcust==1">
                        {{CusAddress}}
                    </div>
                    <div style="color:#FF0000" v-if="ifcust==1 && BJnum > 0" @click="gotoHistory">该客户已有{{BJnum}}次报价,点击查看
                    </div> -->
                        <div class="quote_edit_main_qty">客户</div>
                        <div class="quote_edit_main_pzvalue" @click="openCust">
                            <span v-if="ifedit && Cuscode == ''">点击填写客户编号</span>
                            {{Cuscode}}
                            <span v-if="ifedit">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-edit"></use>
                                </svg>
                            </span>
                        </div>

                    </div>
                </div>
                <div class="lj-card-item">
                    <div class="quote_edit_flex" style="margin-top:5px;">
                        <div class="quote_edit_main_qty">备注</div>
                        <div class="quote_edit_main_pzvalue" @click="openDscrp">
                            <!-- <mu-text-field :disabled="!ifedit" solo :placeholder="ifedit==true?'点击填写备注(选填)':''"
                            v-model="dscrp" :rows="3" :rows-max="6" style="font-size:15px;width:70%"></mu-text-field> -->
                            <span v-if="ifedit && dscrp == ''">点击填写备注(选填)</span>
                            {{dscrp}}
                            <span v-if="ifedit">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-edit"></use>
                                </svg>
                            </span>
                        </div>

                    </div>
                </div>
                <!-- 调试用看数据 -->
                <!-- <div>
                <mu-button flat color="primary" @click="alertPrice">调试专用按钮</mu-button>
            </div> -->

                <!-- 数量输入弹窗 -->
                <popup v-model="ifshowdis" position="bottom"
                    style="background-color:#ffffff;border-top-left-radius:2em;border-top-right-radius:2em;"
                    @on-hide="CloseNum">
                    <div style="border-top-left-radius:2em;border-top-right-radius:2em;height:15px"></div>
                    <div class="quote_edit_flex quote_edit_main_title">
                        <div style="margin-left:20px">优惠信息</div>
                        <div class="quote_edit_main_pzbtn" style="right:5%" @click="ifshowdis = false">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-guanbi"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="quote_edit_pzch_value" v-for="disitem in mtrldiscountlist">
                        <div class="quote_edit_pzch_value_row">
                            <div>
                                {{disitem}}
                            </div>
                        </div>
                    </div>
                    <mu-row style="margin:10px 0px 10px 0px">
                        <mu-col :span="rowTitleSpan" style="margin:5px 0px 0px 20px;font-weight:bold;">数量</mu-col>
                        <mu-col>
                            <lj-number v-model="qty" :min="0" :fillable="true" :width="'80px'" :align="'left'"
                                @change="changeqty" />
                        </mu-col>
                        <!-- <div class="quote_edit_subinfo" style="margin:5px 5px 0px 10px;">{{discountlable}}</div> -->
                    </mu-row>
                    <mu-button color="error" large full-width style="margin-top:5px" @click="CloseNum">确定
                    </mu-button>
                </popup>
                <!-- 客户弹窗 -->
                <mu-dialog title="客户编号" width="400" :open.sync="onfucosCust" :esc-press-close="false"
                    :overlay-close="false">
                    <mu-radio :value="0" v-model="ifNewCust" label="旧客户" @change="changeCustMode"></mu-radio>
                    <mu-radio :value="1" v-model="ifNewCust" label="新客户" @change="changeCustMode"></mu-radio>
                    <input placeholder="客户编号" style="width: 100%;margin-top:20px" v-model="oldCuscode"
                        v-if="ifNewCust == 0">
                    <input placeholder="新客户编号" style="width: 100%;margin-top:20px" v-model="newCuscode"
                        v-if="ifNewCust == 1">
                    <div @click="openCusarea" style="margin-top:10px" v-if="ifNewCust == 1">
                        <span v-if="Cusareaname == ''">选择地区</span>
                        <span v-if="Cusareaname != ''">新客户地区: {{Cusareaname}}</span>
                        <i class="iconfont icon-location" style="margin:3px 0px 0px 5px"></i>
                    </div>
                    <mu-button slot="actions" flat color="red" @click="closeCust">取消</mu-button>
                    <mu-button slot="actions" flat color="primary" @click="comfirmCust">确认</mu-button>
                </mu-dialog>
                <!-- 备注弹窗 -->
                <mu-dialog title="备注" width="400" :open.sync="onfucosDscrp" :esc-press-close="false"
                    :overlay-close="false">
                    <!-- <mu-text-field v-model="dscrp" solo multi-line full-width :max-length="255" :rows="3" :rows-max="6"></mu-text-field> -->
                    <textarea placeholder="点击填写备注" style="width: 100%;" rows="5" v-model="dscrp"></textarea>
                    <mu-button slot="actions" flat color="red" @click="closeDscrp">取消</mu-button>
                    <mu-button slot="actions" flat color="primary" @click="onfucosDscrp = false">确认</mu-button>
                </mu-dialog>
            </div>

            <template slot="footer" v-if="!ifshowdis">
                <mu-row>
                    <mu-col span="8">
                        <div class="quote_edit_btn" style="background-color: #ffb732;width: 100%">单价
                            <span>{{moneycode}}{{price_ori | moneyFilter}}</span></div>
                    </mu-col>
                    <mu-col span="4" v-if="ifedit">
                        <div class="quote_edit_btn" @click="SaveQuote">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-tongyi"></use>
                            </svg>
                            确定报价
                        </div>
                    </mu-col>
                    <mu-col span="4" v-if="!ifedit">
                        <div class="quote_edit_btn" @click="quoteAgain">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-tongyi"></use>
                            </svg>
                            再次报价
                        </div>
                    </mu-col>
                </mu-row>
            </template>
        </lj-win-common>
        <q5-area-choose ref="areaChooseDialog" @area-chosen="handleAreaChosen" />
    </div>
</template>

<script>
    import ConfigureSelect from "./configure-select";
    import LjWinCommon from "components/lj-win-common";
    import LjImg from "components/lj-img";
    import LjNumber from "components/lj-number";
    import Q5AreaChoose from "components/L1APP/public/Q5-area-choose";
    import {
        XNumber,
        Popup,
    } from 'vux'

    export default {
        components: {
            LjNumber,
            LjImg,
            LjWinCommon,
            ConfigureSelect,
            XNumber,
            Popup,
            Q5AreaChoose,
        },
        data() {
            return {
                ifFirst: false,
                ifedit: true,
                openTitle: false,
                iftax: false,
                statusname: "配置配置",
                woodcodename: "配置11",
                pcodename: "配置22",
                mtrlsectypename: "自定义1",
                zxmtrlmodename: "自定义2",
                usermtrlmodename: "自定义3",
                status: "",
                statusdisable: false,
                woodcode: "",
                pcode: "",
                discountlable: "暂无优惠",
                mtrlPros: [],
                mtrldiscountlist: [],

                Plist: [], //港口
                Clist: [], //柜型
                Tlist: [], //贸易方式
                Pid: 0,
                Cid: 0,
                Tid: 0,
                openP: false,
                openC: false,
                openT: false,
                Pname: "无",
                Cname: "无",
                Tname: "无",
                PCTprice: 0, //总运费
                PCTprice_ori: 0, //总运费-原始
                // PCTprice_dvi: 0, //总运费-分摊-显示
                // PCTprice_dvi_Rmb: 0, //总运费-分摊 人民币

                openMoney: false,
                moneyid: 0,
                moneyname: "无",
                moneycode: "",
                rate: 0,
                moneyList: [],

                mtrlInfo: {},
                mtrlObject: {},
                rowTitleSpan: 3,
                qty: 1,
                discountamt: 0, //优惠比例
                otheramt: 0, //其他费用
                ifshowdis: false,
                finalPrice: 0,
                finalPriceShow: 0,

                tax: 0.13, //税率
                price_ori: 0, //部件选配得出物料金额
                price_yuan: 0, //原价
                price_xuanpei: 0, //原价，不参与计算
                CusID: 0,
                Cusname: "",
                Cuscode: "",
                oldCuscode: "",
                newCuscode: "",
                CuscodeTemp: "",
                CusareaID: 0,
                Cusareaname: "",
                ifNewCust: 0,
                Custrep: "",
                CusAddress: "",
                ifcust: 1,
                BJnum: 0,
                dscrp: "",
                dscrpTemp: "",
                onfucosDscrp: false,
                onfucosCust: false,

                packqty: 0, //包装件数（PCS/箱）
                packvol: 0, //包装体积（立方米）
                RLQprice: 0,
                ckCnum: 0, //参考柜数 = 数量/参考装柜量

                openMode: 0,
                //保存用
                quote: {},
                quotemx: [{}],

                validityday: "",
                woodcodeList: [],
            }
        },
        created() {
            let user = $lj.getStorage("userInfo");
            if (user) {
                this.statusname = user.statusname;
                this.woodcodename = user.woodcodename;
                this.pcodename = user.pcodename;
                this.Custrep = user.username;
                this.mtrlsectypename = user.zxmtrlmodename;
                this.zxmtrlmodename = user.usermtrlmodename;
                this.usermtrlmodename = user.mtrlsectypename;
            }

            var mtrlObject = $lj.getPageParam();
            this.mainObject = mtrlObject.mainObject;
            this.openMode = mtrlObject.openMode;
            // this.mtrlInfo.mtrlcode = mtrlObject.mainObject.mtrlcode;
            this.RLQprice = this.mainObject.ck_packqty;
            // this.GetMtrlInfo();
            if (this.openMode == 0) {
                var date = new Date();
                this.validityday = date.getFullYear() + '-' + (date.getMonth() + 2) + '-' + date.getDate();
                this.validityday = $lj.dateformat(this.validityday, 'yyyy-MM-dd');
            }
            // 3个配置名，需要从后端查系统选项显示
            // 带出默认配置statusop.dftValue
            // 快捷配置组合选择mainInfo.fastp

            // this.mtrlInfo = {
            //     // 商品主要信息
            //     mainInfo: {},
            //     // 大图链接
            //     pics: ['a', 'b'],
            //     // 配置类型
            //     statusflag: 0,
            //     // 配置(是否必填)
            //     status_check: 0,
            //     // 配置1类型
            //     woodcodeflag: 0,
            //     // 配置1(是否必填)
            //     woodcode_check: 0,
            //     // 配置2类型
            //     pcodeflag: 0,
            //     // 配置2(是否必填)
            //     pcode_check: 0,
            //     // 配置选项
            //     statusop: {},
            //     // 配置1选项
            //     woodcodeop: {},
            //     // 配置2选项
            //     pcodeop: {}
            // };
            if (this.openMode == 1) {
                this.ifedit = false;
                this.statusdisable = true;
                this.reloadData();
            }
            if (this.openMode == 2) {
                this.reloadData();
            }

            this.GetQuoteInfo();
        },
        methods: {
            alertPrice() {
                // alert(JSON.stringify(this.price_ori))
                // alert(JSON.stringify(this.price_yuan))
                // alert(JSON.stringify(this.finalPrice))
                // alert(JSON.stringify(this.finalPriceShow))
                // alert(JSON.stringify(this.discountamt))
                // this.discountamt = 4.72;
            },
            reloadData() {
                //数量、PCT
                if (this.openMode == 0 || this.openMode == 2) {
                    this.qty = 0;
                } else {
                    this.qty = this.mainObject.qty;
                }

                if (this.mainObject.iftax) {
                    this.iftax = this.mainObject.iftax;
                }
                this.Pname = this.mainObject.portname;
                this.Pid = this.mainObject.portid;
                this.Cname = this.mainObject.containername;
                this.Cid = this.mainObject.containerid;
                this.Tname = this.mainObject.trade;
                this.Tid = this.mainObject.tradewayid;

                //调整费用
                this.otheramt = this.mainObject.otheramt;
                this.discountamt = this.mainObject.offerrate;
                //币种
                this.moneyid = this.mainObject.moneyid;
                this.moneyname = this.mainObject.moneyname;
                this.moneycode = this.mainObject.code;
                this.rate = this.mainObject.mrate;
                //客户
                this.Cusname = this.mainObject.cusname;
                this.CusID = this.mainObject.cusid;
                this.CusAddress = this.mainObject.address;
                this.Cuscode = this.mainObject.cuscode;
                this.BJnum = this.mainObject.BJnum;

                this.validityday = this.mainObject.validityday;

                this.status = this.mainObject.status;
                this.woodcode = this.mainObject.woodcode;

                this.dscrp = this.mainObject.mxDscrp;
                this.inputConfigure();
                this.ifFirst = true;
                this.changeqty(this.qty)
                this.getPCTprice();
                this.GetCalRLQ();

            },
            GetMtrlInfo() {
                let mtrlcode = this.mainObject.mtrlcode;
                let self = this;
                $lj.postLJRequest("GetMtrlInfo", {
                    token: $lj.getStorage("token"),
                    mtrlcode: mtrlcode
                }, function (ret) {
                    self.mtrlInfo = ret.mainInfo;
                    if (self.openMode !== 0) {
                        if (self.woodcode) {
                            var woodcodeList = self.woodcode.split("|");
                            for (let i = 0; i < woodcodeList.length; i++) {
                                var LV = woodcodeList[i].split(":")
                                if (LV[0] != "") {
                                    var S = {
                                        lable: LV[0],
                                        value: LV[1]
                                    }
                                    self.woodcodeList.push(S)
                                }
                            }
                        }
                        for (let j = 0; j < self.woodcodeList.length; j++) {
                            for (let k = 0; k < self.mtrlInfo.woodcodeop.mtrlcfgcodes.length; k++) {
                                if (self.woodcodeList[j].lable === self.mtrlInfo.woodcodeop.mtrlcfgcodes[k]
                                    .name) {
                                    for (let l = 0; l < self.mtrlInfo.woodcodeop.mtrlcfgcodes[k].opstrings
                                        .length; l++) {
                                        if (self.mtrlInfo.woodcodeop.mtrlcfgcodes[k].opstrings[l].valuestr ===
                                            self.woodcodeList[j].value) {
                                            self.mtrlInfo.woodcodeop.mtrlcfgcodes[k].opstrings[l].choice = 1;
                                        } else {
                                            self.mtrlInfo.woodcodeop.mtrlcfgcodes[k].opstrings[l].choice = 0;
                                        }
                                    }
                                }
                            }
                        }
                        for (let m = 0; m < self.mtrlInfo.statusop.opstrings.length; m++) {
                            if (self.status === self.mtrlInfo.statusop.opstrings[m].valuestr) {
                                self.mtrlInfo.statusop.opstrings[m].choice = 1;
                            } else {
                                self.mtrlInfo.statusop.opstrings[m].choice = 0;
                            }
                        }
                    }
                    self.changeqty(self.qty);
                })
            },
            GetQuoteInfo() {
                let self = this;
                $lj.postLJRequest("GetQuoteInfo", {
                    token: $lj.getStorage("token"),
                    mtrlid: self.mainObject.mtrlid,
                }, function (ret) {
                    self.mtrldiscountlist = ret.mtrlDsicount;
                    self.mtrlPros = ret.mtrlProsList;
                    self.Plist = ret.PLV;
                    self.Clist = ret.CLV;
                    self.Tlist = ret.TLV;
                    for (var i in self.Plist) {
                        if (self.Plist[i].ifdft == 1) {
                            self.Pname = self.Plist[i].lable;
                            self.closeP(self.Plist[i].value);
                        }
                    }
                    for (var i in self.Clist) {
                        if (self.Clist[i].ifdft == 1) {
                            self.Cname = self.Clist[i].lable;
                            self.Cid = self.Clist[i].value
                            if (self.Pid != 0 && self.Cid != 0 && self.Tid != 0) {
                                self.getPCTprice();
                            }
                        }
                    }
                    for (var i in self.Tlist) {
                        if (self.Tlist[i].ifdft == 1) {
                            self.Tname = self.Tlist[i].lable;
                            self.closeT(self.Tlist[i].value);
                        }
                    }
                    self.moneyList = ret.currencyList;
                    if (self.moneyid == 0) {
                        self.moneyid = ret.currencyList[0].moneyid;
                        self.moneyname = ret.currencyList[0].name;
                        self.rate = ret.currencyList[0].rate;
                        self.moneycode = ret.currencyList[0].code;
                    }
                    self.GetMtrlInfo();
                })
            },
            changeqty(value) {
                if (value == "") {
                    value = 0;
                }
                let self = this;
                $lj.postLJRequest("GetMtrlDiscount", {
                    token: $lj.getStorage("token"),
                    mtrlid: self.mainObject.mtrlid,
                    num: value
                }, function (ret) {
                    if (self.ifFirst) {
                        self.discountamt = self.mainObject.offerrate;
                        self.ifFirst = false;
                    } else {
                        self.discountamt = ret.Dsicount.value;
                    }
                    self.discountlable = ret.Dsicount.lable;
                })
            },
            closeT(value) {
                this.openT = false;
                this.Tid = value
                if (this.Pid != 0 && this.Cid != 0 && this.Tid != 0) {
                    this.getPCTprice();
                }
            },
            closeP(value) {
                this.openP = false;
                this.Pid = value
                if (this.Pid != 0 && this.Cid != 0 && this.Tid != 0) {
                    this.getPCTprice();
                }
            },
            closeC(value) {
                this.openC = false;
                this.Cid = value
                if (this.Pid != 0 && this.Cid != 0 && this.Tid != 0) {
                    this.getPCTprice();
                }
                this.GetCalRLQ()

            },
            closeMoney(money) {
                // alert(JSON.stringify(money.name))
                this.moneyid = money.moneyid;
                this.rate = money.rate;
                this.moneycode = money.code;
                this.openMoney = false;
                if (money.name.trim() != '人民币') {
                    if (this.iftax) {
                        this.iftax = false;
                        this.price_yuan = this.price_yuan / (1 + this.tax);
                        // this.PCTprice_dvi_Rmb = this.PCTprice_dvi_Rmb / (1 + this.tax);
                        this.price_yuan = Math.round(this.price_yuan * 100) / 100;
                        // this.PCTprice_dvi_Rmb = Math.round(this.PCTprice_dvi_Rmb * 100) / 100;
                    }
                    this.price_yuan = this.price_yuan + Number(this.otheramt);
                } else {
                    this.price_yuan = this.price_yuan - Number(this.otheramt);
                }
                this.CmplfinalPrice();
            },
            showDis() {
                if (!this.ifedit) {
                    return;
                }
                this.ifshowdis = true;
            },
            showT() {
                if (!this.ifedit) {
                    return;
                }
                this.openT = true;
            },
            showP() {
                if (!this.ifedit) {
                    return;
                }
                this.openP = true;
            },
            showC() {
                if (!this.ifedit) {
                    return;
                }
                this.openC = true;
            },
            showMoney() {
                if (!this.ifedit) {
                    return;
                }
                this.openMoney = true;
            },
            getPCTprice() {
                let self = this;
                $lj.postLJRequest("GetPCTPrice", {
                    token: $lj.getStorage("token"),
                    Pid: self.Pid,
                    Cid: self.Cid,
                    Tid: self.Tid,
                }, function (ret) {
                    self.PCTprice_ori = ret.PCTprice
                    if (self.ckCnum > 0) {
                        self.PCTprice = self.PCTprice_ori * self.ckCnum;
                    } else {
                        self.PCTprice = self.PCTprice_ori;
                    }
                    // alert(JSON.stringify(ret))
                })
            },
            GetCalRLQ() {
                let self = this;
                $lj.postLJRequest("GetCalRLQ", {
                    token: $lj.getStorage("token"),
                    Cname: self.Cname,
                    mtrlid: self.mainObject.mtrlid
                }, function (ret) {
                    self.RLQprice = ret.RLQprice;
                    if (self.RLQprice <= 0) {
                        self.ckCnum = 0
                    } else {
                        var cnum = Number(self.qty) / self.RLQprice
                        self.ckCnum = Math.ceil(cnum)
                    }
                })
            },
            inputStatus(value) {
                this.status = value;
                this.inputConfigure();
            },
            inputWoodcode(value) {
                this.woodcode = value;
                this.inputConfigure();
            },
            inputConfigure() {
                let self = this;
                var Pqty = 1;
                $lj.postLJRequest("GetMtrlItemPrice", {
                    token: $lj.getStorage("token"),
                    cusid: 0,
                    mtrlid: self.mainObject.mtrlid,
                    status: self.status,
                    woodcode: self.woodcode,
                    qty: Pqty
                }, function (ret) {
                    if (ret.price_ori) {
                        self.price_ori = ret.price_ori;
                        self.price_yuan = ret.price_ori;
                        self.price_xuanpei = ret.price_ori;
                    } else {
                        self.price_ori = 0;
                        self.price_yuan = 0;
                        self.price_xuanpei = 0;
                    };
                    if (self.otheramt) {
                        if (self.moneyname.trim() == '人民币') {
                            self.price_yuan = self.price_yuan - Number(self.otheramt)
                        }
                    };
                    if (self.iftax == true) {
                        self.price_ori = self.price_ori * (1 + self.tax);
                        self.price_yuan = (ret.price_ori - Number(self.otheramt)) * (1 + self.tax);
                        self.price_ori = Math.round(self.price_ori * 100) / 100;
                        self.price_yuan = Math.round(self.price_yuan * 100) / 100;
                    };
                    self.CmplfinalPrice();
                })
            },
            openCust() {
                if (!this.ifedit) {
                    return;
                }
                let self = this;
                $lj.removeEventListener("cust_select");
                $lj.addEventListener("cust_select", function (ret) {
                    if (ret.value) {
                        let custInfo = ret.value;
                        if (custInfo.cusid) {

                            self.$set(self, "CusID", custInfo.cusid);
                            self.$set(self, "Cusname", custInfo.name);
                            self.$set(self, "Cuscode", custInfo.cuscode);
                            self.$set(self, "CusAddress", custInfo.address);
                            self.$set(self, "BJnum", custInfo.BJnum);
                        }
                    }
                });
                $lj.openWin("cust", {
                    winMode: "single-select"
                });
            },
            SaveQuote() {
                //主表
                this.quote.cusid = this.CusID;
                this.quote.moneyid = this.moneyid;
                this.quote.containerid = this.Cid;
                this.quote.portid = this.Pid;
                this.quote.tradewayid = this.Tid;
                this.quote.validityday = this.validityday;
                //明细
                this.quotemx[0].mtrlid = this.mainObject.mtrlid;
                this.quotemx[0].status = this.status;
                this.quotemx[0].woodcode = this.woodcode;
                this.quotemx[0].qty_mx = this.qty;
                this.quotemx[0].sumprice = this.price_ori;
                // var fprice = this.price_yuan * (100 - Number(this.discountamt)) * 0.01;
                // this.quotemx[0].fprice = Math.round(fprice * 100) / 100;
                if (this.iftax) {
                    this.quotemx[0].taxrate = this.tax;
                } else {
                    this.quotemx[0].taxrate = 0;
                }

                this.quotemx[0].otheramt = this.otheramt;
                this.quotemx[0].shipamt = this.PCTprice;
                this.quotemx[0].offerrate = this.discountamt; //优惠比例
                this.quotemx[0].mxDscrp = this.dscrp;
                this.SaveL1APPQuote();
            },
            SaveL1APPQuote() {
                let self = this;
                let other = {
                    Tname: self.Tname,
                    otheramt: self.otheramt,
                    discountamt: self.discountamt,
                    moneyname: self.moneyname,
                    moneycode: self.moneycode,
                    tax: self.iftax == true ? self.tax : 0,
                    // iftax: self.iftax,
                    price: self.price_ori,
                    // allprice: self.finalPrice,
                    qty: self.qty,
                    validityday: self.validityday,
                    openMode: self.openMode,
                    woodcode: self.woodcode,
                    statusname: self.mtrlInfo.statusop.typename,
                    status: self.status,
                    dscrp: self.dscrp,
                }
                $lj.postLJRequest("SaveL1APPQuote", {
                    token: $lj.getStorage("token"),
                    quote: self.quote,
                    quotemx: self.quotemx,
                }, function (ret) {
                    $lj.openWin("quote-final", {
                        mainObject: self.mainObject,
                        mtrlPros: self.mtrlPros,
                        other: other
                    });
                    $lj.toast('提交成功！');
                })
            },
            gotoHistory() {
                $lj.openWin("quote-history", {
                    cusid: this.CusID
                });
            },
            quoteAgain() {
                this.ifedit = true;
                this.statusdisable = false;
                this.qty = 0;
                this.changeqty(0);
            },
            openDscrp() {
                if (!this.ifedit) {
                    return;
                }
                this.onfucosDscrp = true;
                this.dscrpTemp = this.dscrp;
            },
            closeDscrp() {
                this.onfucosDscrp = false;
                this.dscrp = this.dscrpTemp;
            },
            openCust() {
                if (!this.ifedit) {
                    return;
                }
                this.onfucosCust = true;
                this.CuscodeTemp = this.Cuscode;
            },
            closeCust() {
                this.onfucosCust = false;
                this.Cuscode = this.CuscodeTemp;
                this.oldCuscode = "";
                this.newCuscode = "";
                this.Cusareaname = "";
                this.CusareaID = 0;
            },
            changeCustMode() {
                if (this.ifNewCust == 0) {
                    this.newCuscode = "";
                    this.Cusareaname = "";
                    this.CusareaID = 0;
                } else {
                    this.oldCuscode = "";
                }
            },
            openCusarea() {
                this.stopBodyScroll(false)
                this.$refs.areaChooseDialog.open();
            },
            handleAreaChosen(item) {
                if (item && item.CusareaID) {
                    this.$set(this, "CusareaID", item.CusareaID);
                    this.$set(this, "Cusareaname", item.Cusareaname);
                }
                this.stopBodyScroll(true)
            },
            comfirmCust() {
                let self = this;
                if (self.ifNewCust == 0) {
                    $lj.postLJRequest("GetCustByCuscodeBJ", {
                        token: $lj.getStorage("token"),
                        cuscode: self.oldCuscode
                    }, function (ret) {
                        if (ret.ErrMsg) {
                            alert(JSON.stringify(ret.ErrMsg))
                        } else {
                            self.CusID = ret.cust.cusid;
                            self.Cusname = ret.cust.name;
                            self.Cuscode = self.oldCuscode;
                            self.onfucosCust = false;
                        }
                    })
                } else if (self.ifNewCust == 1) {
                    if (self.CusareaID == 0) {
                        alert(JSON.stringify("新客户没有选择地区,请检查"))
                        return;
                    };
                    var cust = {};
                    cust.custype = self.Custrep;
                    cust.state = 3;
                    cust.cusareaid = self.CusareaID;
                    cust.name = self.newCuscode;
                    cust.cuscode = self.newCuscode;
                    let requestBody = {
                        token: $lj.getStorage("token"),
                        cust: cust
                    };
                    $lj.postLJRequest("SaveL1Cust", requestBody, function (ret) {
                        if (ret) {
                            self.CusID = ret.cusid;
                            self.Cuscode = self.newCuscode;
                            self.onfucosCust = false;
                        }
                    });
                }
            },
            stopBodyScroll(isFixed) {
                //在IOS里面当弹出层弹出后滚动到弹出层底部时，弹出层后面的背景是可以滚动的。致使软键盘弹出时界面移位
                //监听弹出变量，参考watch
                if (api.systemType != 'ios') {
                    return;
                }
                if (isFixed) {
                    document.body.style.position = 'fixed'
                    this.top = window.scrollY //并没有起到作用，但是最好是加上
                    document.body.style.top = -this.top + 'px' //同上
                } else {
                    document.body.style.position = ''
                    document.body.style.top = '' //并没有起到作用，但是最好是加上
                    window.scrollTo(0, this.top) //同上
                }
            },
            CloseNum() {
                this.ifshowdis = false;
                this.changeqty(this.qty)
            },
            taxChange() {
                if (this.iftax) {
                    this.price_yuan = this.price_yuan * (1 + this.tax);
                    // this.PCTprice_dvi_Rmb = this.PCTprice_dvi_Rmb * (1 + this.tax);
                } else {
                    this.price_yuan = this.price_yuan / (1 + this.tax);
                    // this.PCTprice_dvi_Rmb = this.PCTprice_dvi_Rmb / (1 + this.tax);
                }
                this.price_yuan = Math.round(this.price_yuan * 100) / 100;
                // this.PCTprice_dvi_Rmb = Math.round(this.PCTprice_dvi_Rmb * 100) / 100;
                this.CmplfinalPrice();
            },
            CmplfinalPrice() {
                var RMB = this.price_yuan * (100 - Number(this.discountamt)) * 0.01;
                var notRMB = (this.price_yuan - Number(this.otheramt) * this.rate) * (100 - Number(this.discountamt)) *
                    0.01;
                this.finalPriceShow = Number(RMB) * Number(this.qty);
                if (this.moneyname.trim() != '人民币') {
                    // this.PCTprice_dvi = this.PCTprice_dvi_Rmb / this.rate;
                    this.price_ori = Number(notRMB) / this.rate;
                    this.finalPriceShow = Number(notRMB) * Number(this.qty);
                    this.finalPrice = this.finalPriceShow / this.rate;
                } else {
                    // this.PCTprice_dvi = this.PCTprice_dvi_Rmb;
                    this.price_ori = Number(RMB);
                    this.finalPrice = this.finalPriceShow;
                }
                // this.PCTprice_dvi = Math.round(this.PCTprice_dvi * 100) / 100;
                this.price_ori = Math.round(this.price_ori * 100) / 100;
                this.finalPrice = Math.round(this.finalPrice * 100) / 100;
                this.finalPriceShow = Math.round(this.finalPriceShow * 100) / 100;
            }
        },
        watch: {
            PCTprice(newVal, oldVal) {
                if (newVal !== oldVal) {
                    // if (this.qty > 0) {
                    //     this.PCTprice_dvi_Rmb = Math.round(Number(newVal) / Number(this.qty) * 100) / 100;
                    // } else {
                    //     this.PCTprice_dvi_Rmb = 0;
                    // }
                    this.CmplfinalPrice(newVal);
                }
            },
            otheramt(newVal, oldVal) {
                if (newVal !== oldVal) {
                    if (this.moneyname.trim() == '人民币') {
                        this.price_yuan = this.price_yuan + Number(oldVal) - Number(newVal);
                    }
                    this.CmplfinalPrice(newVal);
                }
            },
            qty(newVal, oldVal) {
                if (newVal !== oldVal) {
                    if (this.RLQprice <= 0) {
                        this.ckCnum = 0
                    } else {
                        var cnum = Number(newVal) / this.RLQprice
                        this.ckCnum = Math.ceil(cnum)
                    }
                    if (this.ckCnum > 0) {
                        this.PCTprice = this.PCTprice_ori * this.ckCnum;
                        // this.PCTprice_dvi_Rmb = Math.round(this.PCTprice / Number(newVal) * 100) / 100;
                    }
                    this.CmplfinalPrice(newVal);
                }
            },
            discountamt(newVal, oldVal) {
                if (newVal !== oldVal) {
                    this.CmplfinalPrice(newVal);
                }
            },
            onfucosCust: {
                deep: true,
                handler: function (newV, oldV) {
                    this.stopBodyScroll(newV)
                }
            },
            onfucosDscrp: {
                deep: true,
                handler: function (newV, oldV) {
                    this.stopBodyScroll(newV)
                }
            },
            ifshowdis: {
                deep: true,
                handler: function (newV, oldV) {
                    this.stopBodyScroll(newV)
                }
            },
        },
    }
</script>

<style scoped>
    .lj-card-item {
        padding: 0 20px;
    }

    .card-title {
        font-size: 16px;
        font-weight: bold;
    }

    .quotelist_main {
        width: 100%;
        height: auto;
    }

    .quote-img-responsive {
        /* text-align: center; */
        width: 120px;
        height: 120px;
        /* margin: 10px auto; */
    }

    .quote_edit_flex {
        display: flex;
        align-items: center;
    }

    .quote_edit_mtrlname {
        font-size: 16px;
        font-weight: bold;
        line-height: 18px;
        color: #333;
    }

    .quote_edit_subinfo {
        font-size: 12px;
        color: #666;
    }

    .quote_edit_main {
        /* margin: 5px 20px; */
        padding: 5px 0;
    }

    .quote_edit_main_title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .quote_edit_main_pzname {
        flex: 0 0 65px;
        font-weight: bold;
        color: #666;
        margin-top: 3px;
    }

    .quote_edit_main_qtyvalue {
        background-color: #f6f6f6;
        font-size: 14px;
        padding: 4px 15px;
    }

    .quote_edit_main_qty {
        font-size: 16px;
        font-weight: bold;
        flex: 0 0 70px;
    }

    .quote_edit_main_pzvalue {
        color: #666
    }

    .quote_edit_main_pzbtn {
        position: absolute;
        right: 5px;
        font-size: 16px;
        color:#C8C8CD;
    }

    .quote_edit_pzch_value {
        font-size: 15px;
        padding: 5px 20px;
    }

    .quote_edit_pzch_value_row {
        display: flex;
        padding: 0 0 0 10px;
        border-bottom: 1px solid #f5f5f5;
        line-height: 30px;
    }

    .quote_edit_pzch_value_row div {
        margin-right: 10px;
    }

    .quote_edit_pzch {
        background-color: #ffffff;
        position: fixed;
        bottom: 0px;
        width: 100%;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        padding: 10px 0;
    }

    .quote_edit_btn {
        /* background-color: #ffb732; */
        background-color: #fc4e2c;
        color: #ffffff;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        padding: 8px;
    }
</style>