<template>
    <div>
        <lj-win-common :title="title" :show-back="true" ref="baseWin">
            <template slot="header_right">
                <mu-button icon @click="openSettingWin">
                    <i class="iconfont icon-settings"></i>
                </mu-button>
            </template>
            <div slot="body">
                <div style="padding:15px 0px 10px 15px">基础信息</div>
                <div class="lj-card-item">
                    <mu-row style="padding:5px 0 0 0;">
                        <mu-col span="3" class="mtrlTitle"><span >物料编码：</span></mu-col>
                        <mu-col span="9">
                            <span class="lj-taskinfo-content">{{mainObject.mtrlcode}}</span>
                        </mu-col>
                    </mu-row>
                    <mu-row style="padding:5px 0 0 0;">
                        <mu-col span="3" class="mtrlTitle"><span >物料名称：</span></mu-col>
                        <mu-col span="9">
                            <span class="lj-taskinfo-content">{{mainObject.mtrlname}}</span>
                        </mu-col>
                    </mu-row>
                    <mu-row style="padding:5px 0 0 0;">
                        <mu-col span="3" class="mtrlTitle"><span >物料规格：</span></mu-col>
                        <mu-col span="9">
                            <span class="lj-taskinfo-content">{{mainObject.mtrlmode}}</span>
                        </mu-col>
                    </mu-row>
                    <mu-row style="padding:5px 0 0 0;">
                        <mu-col span="3" class="mtrlTitle"><span >物料来源：</span></mu-col>
                        <mu-col span="9">
                            <span class="lj-taskinfo-content">{{mainObject.mtrloriginStr}}</span>
                        </mu-col>
                    </mu-row>
                    <mu-row style="padding:5px 0 0 0;">
                        <mu-col span="3" class="mtrlTitle"><span >物料类别：</span></mu-col>
                        <mu-col span="9">
                            <span class="lj-taskinfo-content">{{mainObject.mtrltype}}</span>
                        </mu-col>
                    </mu-row>
                </div>

                <div style="padding:5px 0px 10px 15px;font-size:20px;color:#1E90FF" @click="pfcodeSelectShow = true">
                    <i class="iconfont icon-shouzhi" style="font-size: 18px;"></i>
                    {{pfcodeName}}
                </div>

                <template>
                    <lj-grid :table-data="prdpfList" :columns="gridColumns" :editing="false"
                        @cell-click="handleListAllGridCellClick"/>
                </template>

                <van-action-sheet
                    v-model:show="pfcodeSelectShow"
                    :actions="pfcodeActions"
                    cancel-text="取消"
                    close-on-click-action
                    @select="selectPfcode"
                >
                </van-action-sheet>
            </div>
        </lj-win-common>
    </div>
</template>

<script>
    import ljWinCommon from "components/lj-win-common";
    import LjImg from "components/lj-img"
    import LjGrid from "components/lj-grid";

    export default {
        components: {
            ljWinCommon,
            LjImg,
            LjGrid
        },
        data(){
            return {
                apiName: 'GetL1APPPrdPfTree',
                dwname: "L1APP",
                title: "物料清单",
                mainObject:{},
                pfcodeList:[],
                pfcodeActions: [],
                pfcodeName:"",
                prdpfList:[],
                filedatasList:[],
                openConfigure:false,
                gridColumns: [
                    {label: "序",property: "printid", width: screen.width * 0.1},
                    {label: "物料编码", property: "mtrlcode", width: screen.width * 0.2 },
                    {label: "物料名称", property: "mtrlname", width: screen.width * 0.3},
                    {label: "规格", property: "mtrlmode", width: screen.width * 0.3},
                    {label: "单位", property: "unit", width: screen.width * 0.1},
                    {label: "用料量", property: "Sonscale", width: screen.width * 0.15, type:"number" },
                    {label: "总用料量", property: "realqty", width: screen.width * 0.15, type:"number"  },
                    {label: "领用工段", property: "wrkgrpname", width: screen.width * 0.2},
                    {label: "按配置运\r\n算或拆装", property: "ifover", width: screen.width * 0.2, type:"ifbox" },
                    {label: "运算或拆\r\n装配置", property: "dipztype", width: screen.width * 0.2, type:"ifbox" },
                    {label: "损耗率", property: "SonLoss", width: screen.width * 0.15,type:"number"  },
                    {label: "MRP领料数方案", property: "scllqtytype", width: screen.width * 0.2,type:"number"  },
                    {label: "部件名称", property: "pfgroup", width: screen.width * 0.2 },
                    {label: "清单", property: "Sonpfcode", width: screen.width * 0.3 },
                    {label: "基数", property: "baseqty", width: screen.width * 0.1,type:"number"  },
                    {label: "说明", property: "dscrp", width: screen.width * 0.2 },
                    {label: "最新报价单价\r\n不含税价", property: "price_bj_notax", width: screen.width * 0.2,type:"number" },
                    {label: "计划成本金额", property: "planamt", width: screen.width * 0.15,type:"number"  },
                    {label: "计划成本价", property: "planprice", width: screen.width * 0.15,type:"number" },
                    {label: "最新加工价", property: "wfjgprice", width: screen.width * 0.15,type:"number"  },
                    {label: "最新购价", property: "newprice", width: screen.width * 0.15,type:"number"  },
                ],
                pfcodeSelectShow: false
            }
        },
        created() {
            var pageParm = $lj.getPageParam();
            this.mainObject = pageParm.mainObject;

            this.MergeCustomSetting();
        },
        mounted(){
            let self = this;
            this.getMtrlpfcode(function(){
                self.pfcodeName = self.pfcodeList[0].pfcode;
                self.refresh()  
            });
        },
        methods:{
            refresh(){
                var self = this;
                var RequestBody = {
					token: $lj.getStorage("token"),
					mtrlid: this.mainObject.mtrlid,
                    pfcode: this.pfcodeName
				}

                $lj.postLJRequest('GetL1APPPrdPfTree', RequestBody, function (ret) {
					if (ret.prdpfList) {
                        self.prdpfList = ret.prdpfList;
                    }

                    // if(ret.filedatas){
                    //     self.filedatasList = ret.filedatas;
                    // }
                })
            },
            setPfcodeAction(list) {
                for(let i = 0; i < list.length;i++) {
                    let pfObj = new Object({name: list[i].pfcode});
                    this.pfcodeActions.push(pfObj);
                }
            },
            selectPfcode(item,index){
                this.pfcodeName = item.name;
                this.refresh();
            },
            changepfcode(item){
                this.pfcodeName = item.pfcode;
                this.openConfigure = false;
                this.refresh();
            },
            getMtrlpfcode(callback){
                var self = this;
                var RequestBody = {
					token: $lj.getStorage("token"),
					mtrlid: this.mainObject.mtrlid,
				}

                $lj.postLJRequest('GetL1APPMtrlPfcode',RequestBody,function(ret){
                    if(ret.pfcodeList){
                        self.pfcodeList = ret.pfcodeList;
                        self.setPfcodeAction(self.pfcodeList);
                        callback && callback();
                    }
                })
            },
            photoBrowser(index) {
                var images = [];
                for (const picture of this.filedatasList) {
                    var url = $lj.constant.cacheDir + "/" + picture.filemd5;
                    images.push(url);
                }
                $lj.photoBrowser(images, index);
            },
            handleListAllGridCellClick(event){
                if (!event) {
                    return;
                }
                let {row, column} = event;
                if (!row || !column) {
                    return;
                }
            },
            openSettingWin(){
                let self = this;
                $lj.removeEventListener("grid_style_updated");
                $lj.addEventListener("grid_style_updated", function (ret) {
                    if (ret.value) {
                        if (ret.value.dwname === self.dwname && ret.value.itemname === self.apiName) {
                            self.MergeCustomSetting();
                        }
                    }
                });
                $lj.openWin('grid-drag-setting', {
                    columns: this.gridColumns,
                    apiName: this.apiName
                });
            },
            MergeCustomSetting: function () {
                let userInfo = $lj.getStorage('userInfo');
                let empid = userInfo.empid;
                let requestBody = {
                    token: $lj.getStorage("token"),
                    empid: empid,
                    dwname: this.dwname,
                    itemname: this.apiName,
                    ifcompress: 1
                };
                let self = this;
                let displayColumns = [];
                this.popupColumns = [];
                $lj.postLJRequest(
                    "GetSysUserFileString", requestBody,
                    function (ret) {
                        if (ret && ret.itemvalue) {
                            let customSetting = JSON.parse(ret.itemvalue);
                            // 构建field-style键值对
                            let customSettingDictionary = new Map();
                            for (let item of customSetting) {
                                customSettingDictionary.set(item.property, item);
                            }
                            // 合并过滤字段，以这个字典为准，用户历史设置多删少补
                            for (let item of self.columns) {
                                let curField = item.property;
                                let userStyle = customSettingDictionary.get(curField);
                                if (userStyle) {
                                    // for (let prop in userStyle) {
                                    //     item[prop] = userStyle[prop];
                                    // }
                                    item.order = userStyle.order;
                                    item.invisible = userStyle.invisible;
                                } else {
                                    // 新增字段，暂不显示
                                    // item.invisible = true;
                                }
                            }
                        } else {
                            for (let i in self.columns) {
                                self.columns[i].order = i;
                            }
                        }
                        self.columns.sort(function (object1, object2) {
                            return object1.order - object2.order;
                        });
                        for (let i in self.columns) {
                            let item = self.columns[i];
                            item.order = i;
                            if (item.optionid) {
                                let optionName = $lj.getOptionValue(item.optionid);
                                item.label = optionName ? optionName : item.label;
                            }
                            if (item.fixed) {
                                displayColumns.push(item);
                            } else if (!item.invisible) {
                                self.popupColumns.push(item);
                            }
                        }
                        if (self.popupColumns.length > 0) {
                            displayColumns.push(self.moreColumn);
                        }
                        console.log("displayColumns>>>>>>",JSON.stringify(displayColumns));
                        self.$refs.baseWin.setDisplayColumns(displayColumns);
                    }
                );
            },
        },     
    }
</script>

<style>
    .mtrlTitle {
        font-weight: bold;
        text-align: center;
    }
</style>
