<template>
    <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="GetMtrlPic">
                            <mu-list-item-title>刷新</mu-list-item-title>
                        </mu-list-item>
                    </mu-list>
                </mu-menu>
        </template>
        <div slot="body">
            <div v-if="imgList.length > 0">
                <lj-img-carousel :img="imgList" :width="width" :height="height"></lj-img-carousel>
            </div>
            <mu-divider></mu-divider>
            <div class="lj-card-item" :style="{marginTop:height+10 +'px'}">
                <div>
                    <span style="float:right;margin-top:5px">月销{{mainObject.noallocqty}}{{mainObject.unit}}</span>
                    <mu-row>
                        <mu-col span="12">
                            <span class="lj-sharp-red-text" style="font-weight: bold;font-size: 20px;">¥
                                {{mainObject.price}} / {{mainObject.unit}}</span>
                        </mu-col>
                        <mu-col span="6" style="font-size: 15px;">
                            <span>名称</span>
                            <span style="margin-left:10px;">{{mainObject.mtrlname}}</span>
                        </mu-col>
                        <mu-col span="6" style="font-size: 15px;">
                            <span>编码</span>
                            <span style="margin-left:10px;">{{mainObject.mtrlcode}}</span>
                        </mu-col>
                        <mu-col span="6" style="font-size: 15px;">
                            <span>规格</span>
                            <span style="margin-left:10px;">{{mainObject.mtrlmode}}</span>
                        </mu-col>
                        <mu-col span="6" style="font-size: 15px;">
                            <span>参考装柜量</span>
                            <span style="margin-left:10px;">{{mainObject.ck_packqty}}</span>
                        </mu-col>
                    </mu-row>
                </div>
            </div>
            <div class="lj-card-item">
                <div style="text-align:center;font-size:15px">默认配置</div>
                <div class="demo_line"></div>
                <mu-row style="margin-top:5px;font-size:15px">
                    <mu-col span="12" v-if="mainObject.status_config">
                        <span>{{mainObject.status_configName}} : {{mainObject.status_config}} </span>
                    </mu-col>
                    <mu-col span="12">
                        <div v-for="item in woodcodeList">
                            {{item.lable}} : {{item.value}}
                        </div>
                    </mu-col>
                </mu-row>
            </div>
            <div class="lj-card-item">
                <div style="text-align:center;font-size:15px">产品详情</div>
                <div class="demo_line"></div>
                <div class="lj-card-summary-light-text lj-card-quaternary-content"
                    style="margin-top:5px;font-size:13px">
                    <div>产品参数 : </div>
                    <mu-row>
                        <mu-col span="6">
                            ·净重 {{mainObject.net_weight}}KG
                        </mu-col>
                        <mu-col span="6">
                            ·毛重 {{mainObject.gross_weight}}KG
                        </mu-col>
                        <mu-col v-for="Pros in mtrlPros" span="6">
                            ·{{Pros.proname}} {{Pros.provalue}}
                        </mu-col>
                    </mu-row>
                </div>
                <!-- <div v-if="src != ''">
                    <video :src="src" controls autoplay :width="width-20"
                        :height="width-20"></video>
                </div> -->
            </div>
        </div>
        <template slot="footer">
            <mu-button full-width large color="red" @click="openQuote">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tongyi"></use>
                </svg>点击报价
            </mu-button>
        </template>
    </lj-win-common>
</template>

<script>
    import LjWinCommon from "components/lj-win-common";
    import ljImgCarousel from "components/lj-img-carousel";


    export default {
        components: {
            LjWinCommon,
            ljImgCarousel,
        },
        data() {
            return {
                openTitle: false,
                mainObject: {},
                mtrlPros: [],
                dataList: [],
                src: "",
                width: screen.width,
                height: screen.width,
                imgList: [],
                RLQprice:"",
                woodcodeList: [], //默认配置分开显示
            }
        },
        created() {
            var mtrlObject = $lj.getPageParam();
            this.mainObject = mtrlObject.mainObject;
            this.DealWoodcodeConfig();
            this.GetMtrlPic();
            // this.GetL1MtrldefVideo();
        },
        methods: {
            DealWoodcodeConfig() {
                let self = this;
                var woodcodeList = self.mainObject.woodcode_config.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)
                    }
                }
            },
            // GetCalRLQ() {
            //     let self = this;
            //     $lj.postLJRequest("GetCalRLQ", {
            //         token: $lj.getStorage("token"),
            //         Cname: "",
            //         mtrlid: self.mainObject.mtrlid
            //     }, function (ret) {
            //         self.RLQprice = ret.RLQprice;
            //         self.mainObject.RLQprice = ret.RLQprice;
            //     })
            // },
            GetMtrlPic() {
                let self = this;
                $lj.postLJRequest("GetL1MtrldefPic", {
                    token: $lj.getStorage("token"),
                    mtrlid: self.mainObject.mtrlid,
                }, function (ret) {
                    self.dataList = [];
                    self.dataList = ret.dataList;
                    self.mtrlPros = ret.mtrlProsList;
                    if (self.dataList.length > 0) { //图片
                        for (let i = 0; i < self.dataList.length; i++) {
                            // let user = $lj.getStorage("userInfo");
                            // if (user.picBaseUrl) {
                                var img = {};
                                // img.src = user.picBaseUrl + self.dataList[i].filemd5;
                                img.picmd5 = self.dataList[i].filemd5;
                                self.imgList.push(img);
                                self.src = self.dataList[i].base64
                            // }
                        }
                    } else {
                        var img = {};
                        img.src =
                            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563445048768&di=44ba05f4cb71a02d2f9cc668fb08560a&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fbdaca9a07e1a8947c00c2f826ebf848750927aa24963-cATwbg_fw658"
                        img.noPic = true;
                        self.imgList.push(img);
                    }
                    // self.GetCalRLQ();
                })
            },
            openQuote() {
                //0-默认打开，为编辑状态 1-非编辑状态 2-再次报价
                $lj.openWin("mtrl-configuration", {
                    mainObject: this.mainObject,
                    openMode: 0,
                });
            },
        },
    }
</script>

<style>
    .demo_line {
        height: 1px;
        background: #ff0000;
        transform: scaleY(0.5);
    }
</style>