<template>
    <lj-win-common title="报价结果" :closeWinHandler="closeWin">
        <template slot="header_right">
            <mu-button icon @click="openTitle = true">
                <i class="iconfont icon-more"></i>
            </mu-button>
            <mu-menu cover :open.sync="openTitle">
                <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>
            </mu-menu>
        </template>
        <div slot="body" style="margin-top:10px">
            <div class="quote_rslt">
                <div class="quote_rslt_mtrl">
                    <div class="quote_rslt_mtrl_info">
                        <div class="quote_rslt_mtrl_info_mtrlname">{{mainObject.mtrlname}}</div>
                        <div class="quote_rslt_mtrl_info_price">
                            <span>{{other.moneycode}}</span>{{other.price |moneyFilter}}</div>
                    </div>
                </div>
                <div class="quotelist_main">
                    <div class="quote-img-responsive">
                        <lj-img :md5="mainObject.picmd5" />
                    </div>
                </div>
                <!-- 参数 -->
                <div class="quote_rslt_pz">
                    <div class="quote_edit_main">
                        <div class="quote_edit_main_title">参数</div>
                        <div class="quote_edit_main_pz" v-if="mainObject.mtrlmode">
                            <div class="quote_edit_main_pzname">规格</div>
                            <div class="quote_edit_main_pzvalue">{{mainObject.mtrlmode}}</div>
                        </div>
                        <div class="quote_edit_main_pz" v-if="mainObject.net_weight">
                            <div class="quote_edit_main_pzname">净重</div>
                            <div class="quote_edit_main_pzvalue">{{mainObject.net_weight}}KG</div>
                        </div>
                        <div class="quote_edit_main_pz" v-if="mainObject.gross_weight">
                            <div class="quote_edit_main_pzname">毛重</div>
                            <div class="quote_edit_main_pzvalue">{{mainObject.gross_weight}}KG</div>
                        </div>
                        <div class="quote_edit_main_pz" v-for="Pros in mtrlPros">
                            <div class="quote_edit_main_pzname">{{Pros.proname}}</div>
                            <div class="quote_edit_main_pzvalue">{{Pros.provalue}}</div>
                        </div>
                    </div>
                </div>
                <!-- 配置 -->
                <div class="quote_rslt_pz">
                    <div class="quote_edit_main">
                        <div class="quote_edit_main_title">配置</div>
                        <div class="quote_edit_main_pz">
                            <div class="quote_edit_main_pzname">{{other.statusname}}</div>
                            <div class="quote_edit_main_pzvalue">{{status}}</div>
                        </div>
                        <div class="quote_edit_main_pz" v-for=" woodcodeitem in woodcodeList">
                            <div class="quote_edit_main_pzname">{{woodcodeitem.lable}}</div>
                            <div class="quote_edit_main_pzvalue">{{woodcodeitem.value}}</div>
                        </div>
                    </div>
                </div>
                <!-- 其他 -->
                <div style="display:flex;width:100%;align-items: center;font-size:12px;color:#666">
                    <div style="font-size:16px;font-weight:bold;margin-right:10px">{{other.moneyname}}</div>
                    <div style="margin-right:8px">{{other.moneycode}}{{other.price |moneyFilter}}</div>
                    <div v-if="other.tax > 0" style="border:1px solid">含税</div>
                </div>
                <div style="display:flex;width:100%;align-items: center;font-size:12px;color:#666">
                    <div style="margin-right:8px">数量:{{other.qty}}</div>
                    <div>贸易方式:{{other.Tname}}</div>
                </div>
                <div style="display:flex">
                    <div style="color: #666">业务员代号：{{usercode}}</div>
                    <div class="quote_rslt_date" v-if="other.validityday">有效期至：{{other.validityday | dateFilter}}</div>
                </div>
                <div style="display:flex;width:100%;align-items: center;color:#666">
                    <div style="color: #666">备注：{{other.dscrp}}</div>
                </div>
                <div class="watermark_wrap">
                    <div class="watermark" id="watermark" :style="{backgroundImage:watermark}"></div>
                </div>
            </div>
        </div>
    </lj-win-common>
</template>

<script>
    import LjWinCommon from "components/lj-win-common";
    import LjImg from "components/lj-img";
    // import Watermark from 'components/watermark'
    import {
        throws
    } from 'assert';
    export default {
        components: {
            LjWinCommon,
            LjImg
        },
        data() {
            return {
                watermark: "url('../../assets/image/watermark.png')",
                openTitle: false,
                //接收用
                usercode: "",
                mainObject: {},
                other: {},
                mtrlPros: [],
                status: "",
                woodcode: "",
                woodcodeList: [],

                qty: 0,
                Tname: "",
                otheramt: 0,
                iftax: false,
                //显示用
                moneycode: "",
                tax: 0,
                validityday: "",
                openMode: 0,
            }
        },
        created() {
            // Watermark.set("安吉南方");
            var MObject = $lj.getPageParam();
            this.mainObject = MObject.mainObject;
            this.mtrlPros = MObject.mtrlPros;
            this.other = MObject.other;

            this.woodcode = MObject.other.woodcode;
            this.status = MObject.other.status;

            this.openMode = MObject.other.openMode
            if (this.openMode == 0 || this.openMode == 2) {
                let userInfo = $lj.getStorage("userInfo");
                if (userInfo) {
                    this.usercode = userInfo.outrepcode;
                }
            } else {
                this.usercode = MObject.other.outrepcode
            }
            this.splitStatus();
        },
        methods: {
            splitStatus() {
                var woodcodeList = this.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]
                        }
                        this.woodcodeList.push(S)
                    }
                }
            },
            closeWin() {
                if (this.openMode == 0) {
                    api.closeToWin({
                        name: 'root'
                    });
                } else {
                    api.closeToWin({
                        name: 'quote-history'
                    });
                }

            },
        },
    }
</script>

<style>
    .quotelist_main {
        width: 100%;
        height: auto;
    }

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

    .quote_rslt {
        background-color: #ffffff;
        margin: 10px 10px 10px 10px;
        padding: 10px 10px 10px 10px;
        border-radius: 15px;
        border: 1px solid #e5e5e5;
    }

    .quote_rslt_date {
        position: absolute;
        right: 25px;
        color: #666
    }

    .quote_rslt_mtrl_info {
        display: flex;
        align-items: center;
        font-size: 20px;
        font-weight: bold;

    }

    .quote_rslt_mtrl_info_mtrlname {
        padding: 0 0 0 10px;
    }

    .quote_rslt_mtrl_info_price {
        color: #fd7526;
        position: absolute;
        right: 30px;
    }

    .quote_rslt_mtrl_info_price span {
        font-size: 14px;
    }

    .quote_rslt_mtrl_info_pic {
        /* overflow: hidden; */
        text-align: center;
    }

    .quote_edit_img {
        width: 80%
    }

    .quote_rslt_pz {
        border-top: 2px dashed #e5e5e5;
        padding: 10px;
    }

    .quote_edit_main_pz {
        font-size: 14px;
        display: flex;
        line-height: 24px;
    }

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

    .quote_edit_main_pzvalue {
        color: #666
    }

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

    .watermark_wrap {
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    .watermark {
        height: 90%;
        width: 100%;
        /* background: url('../../assets/image/nflogo.jpg'); */
        background-size: 200px;
        /* background-position:center; */
        z-index: 98;
        opacity: 0.08;
        position: absolute;
        top: 80px;
        left: -5px;
        /* transform: rotate(-50deg); */
        overflow: hidden;
    }
</style>