<template>
    <div>
        <lj-win-common :title="title" :show-back="true" ref="baseWin">
            <mu-menu slot="header_right" :open.sync="openConfigure">
                <mu-button icon>
                    <i class="iconfont icon-dots-menu"></i>
                </mu-button>
                <mu-list slot="content">
                    <mu-list-item button @click="gotoConfigure">
                        <mu-list-item-title>选配</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button @click="scWorkpricetable">
                        <mu-list-item-title>工价表</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button @click="openMtrlStructure">
                        <mu-list-item-title>物料清单</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button @click="handleGotoScanRoute">
                        <mu-list-item-title>
                            <i class="iconfont icon-iconfontscan" style="font-size: 14px;"></i>
                            工艺扫描
                        </mu-list-item-title>
                    </mu-list-item>
                </mu-list>
            </mu-menu>
            <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.unit}}</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>
                    <mu-row style="padding:5px 0 0 0;" v-if="mainObject.status_config">
                        <mu-col span="3" class="mtrlTitle"><span >标准配置：</span></mu-col>
                        <mu-col span="9">
                            <span class="lj-taskinfo-content">{{mainObject.status_config}}</span>
                        </mu-col>
                    </mu-row>
                    <mu-row style="padding:5px 0 0 0;" v-if="mainObject.woodcode_config">
                        <mu-col span="3" class="mtrlTitle"><span >标准配置1：</span></mu-col>
                        <mu-col span="9">
                            <span class="lj-taskinfo-content">{{mainObject.woodcode_config}}</span>
                        </mu-col>
                    </mu-row>
                    <mu-row style="padding:5px 0 0 0;" v-if="mainObject.pcode_config">
                        <mu-col span="3" class="mtrlTitle"><span >标准配置2：</span></mu-col>
                        <mu-col span="9">
                            <span class="lj-taskinfo-content">{{mainObject.pcode_config}}</span>
                        </mu-col>
                    </mu-row>
                </div>
                <template v-if="isCanClassView">
                    <div class="flex" style="padding:5px 15px 10px 15px;">
                        <span class="flex-1" style="margin: auto 0">
                            附件信息
                        </span>
                        <div class="flex_shrink-0 flx-center" v-if="isCanClassEdit">
                            <template v-if="!ifEdit">
                                <van-button type="info" plain size="small" @click="ifEdit = true">编辑</van-button>
                            </template>
                            <template v-else>
                                <van-button type="info" size="small" style="margin-right: 10px;" @click="handleAddFile">
                                    <i class="iconfont icon-ic_add" style="font-size: 14px;"></i>
                                </van-button>
                                <van-button type="primary" size="small" @click="ifEdit = false">完成</van-button>
                            </template>
                        </div>
                    </div>
                    <div class="lj-card-item"  style="padding:0 16px;">
                        <van-tabs v-model="fileActive" @click="handleSelectItem" color="#2196f3">
                            <van-tab v-for="(item,index) in fileClassList" :title="item.className" :name="item.classId">
                                <div class="file-rel">
                                    <template v-for="(file, idx) in pictureList">
                                        <lj-img-pro
                                            v-if="checkImg(file.fileType)"
                                            class="file-rel-item"
                                            :key="'fileclass' + item.classId + '-img' + file.FileID_ERP"
                                            :md5="file.filemd5"
                                            :fileType="file.fileType | trimFilter"
                                            :fileName="file.fileName | trimFilter"
                                            showfilename
                                            :delbtn="ifEdit && isCanClassDel"
                                            @bottom-nav="handleDelFile(file)"
                                            @image-click="photoBrowser(idx)"
                                        >
                                            <div class="bottom-nav" slot="bottom-nav">
                                                <div class="name text-ellipsis-one">
                                                    {{ file.fileName }}
                                                </div>
                                            </div>
                                        </lj-img-pro>
                                        <lj-fj v-else 
                                            :key="'fileclass' + item.classId + '-fj' + file.FileID_ERP" 
                                            :deletable="ifEdit && isCanClassDel"
                                            :fileName="file.fileName | trimFilter"  
                                            :md5="file.filemd5" 
                                            :fileType="file.fileType | trimFilter" 
                                            :fileSize="file.filekb" 
                                            :fileid="file.FileID_ERP" 
                                            @on-delete="handleDelFile(file)"
                                        />
                                    </template>
                                </div>
                            </van-tab>
                        </van-tabs>
                    </div>
                </template>
                <template>
                    <div style="padding:5px 0px 10px 15px;">相关数量</div>
                    <div class="lj-card-item" style="font-size:14px;padding:0 20px;font-weight:bold;color:#666">

                        <div style="border-bottom: 1px solid #eee;padding:0 0 10px 0 ;line-height:20px">
                            <div style="display:flex;padding:10px 0 ">
                                <div style="width:100px">需求数 <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-down"></use>
                                    </svg></div>
                                <div style="position: absolute;right:30px;color:#888">
                                    {{(L1APPMtrlWilluse.rqqty + L1APPMtrlWilluse.taskqty + L1APPMtrlWilluse.wfjgrqqty)?(L1APPMtrlWilluse.rqqty + L1APPMtrlWilluse.taskqty + L1APPMtrlWilluse.wfjgrqqty):"0"}}
                                </div>
                            </div>

                            <div style="font-size:14px;color:#999;margin-left:30px;font-weight:400">
                                <div style="display:flex;" @click="handleClickSummary(1)">
                                    <div>生产需求数</div>
                                    <div style="position: absolute;right:30px;">{{L1APPMtrlWilluse.rqqty}}</div>
                                </div>

                                <div style="display:flex;" @click="handleClickSummary(2)">
                                    <div>订单需求数</div>
                                    <div style="position: absolute;right:30px;">{{L1APPMtrlWilluse.taskqty}}</div>
                                </div>

                                <div style="display:flex;" @click="handleClickSummary(3)">
                                    <div>外协需求数</div>
                                    <div style="position: absolute;right:30px;">{{L1APPMtrlWilluse.wfjgrqqty}}</div>
                                </div>

                            </div>
                        </div>

                        <div style="border-bottom: 1px solid #eee;padding:0 0 10px 0;line-height:20px ">
                            <div style="display:flex;padding:10px 0 ">
                                <div style="width:100px">库存数 <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-down"></use>
                                    </svg></div>
                                <div style="position: absolute;right:30px;color:#888">
                                    {{L1APPMtrlWilluse.storageSum?L1APPMtrlWilluse.storageSum:"0"}}</div>
                            </div>

                            <div style="font-size:14px;color:#999;margin-left:30px;font-weight:400">
                                <div style="display:flex;" v-for="(item,index) in L1APPMtrlWilluse.storageList"
                                    :key="index">
                                    <div>{{item.storagename}}</div>
                                    <div style="position: absolute;right:30px;">{{item.noallocqty}}</div>
                                </div>

                            </div>
                        </div>
                        <div style="display:flex;border-bottom: 1px solid #eee;padding:10px 0;line-height:20px ">
                            <div style="width:100px">可装数</div>
                            <div style="position: absolute;right:30px;color:#888">{{L1APPMtrlWilluse.noauditingqty}}
                            </div>
                        </div>

                        <div style="display:flex;border-bottom: 1px solid #eee;padding:10px 0;line-height:20px ">
                            <div style="width:180px">外协商库存数</div>
                            <div style="position: absolute;right:30px;color:#888">{{L1APPMtrlWilluse.wxnoallocqty}}
                            </div>
                        </div>

                        <div style="border-bottom: 1px solid #eee;padding:0 0 10px 0 ">
                            <div style="display:flex;padding:10px 0 ">
                                <div style="width:100px">在途数 <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-down"></use>
                                    </svg></div>
                                <div style="position: absolute;right:30px;color:#888">
                                    {{(L1APPMtrlWilluse.buytaskqty + L1APPMtrlWilluse.ordermlqty + L1APPMtrlWilluse.wfjgqty)?(L1APPMtrlWilluse.buytaskqty + L1APPMtrlWilluse.ordermlqty + L1APPMtrlWilluse.wfjgqty):"0"}}
                                </div>
                            </div>

                            <div style="font-size:14px;color:#999;margin-left:30px;font-weight:400">
                                <div style="display:flex;" @click="handleClickSummary(4)">
                                    <div>采购未到货数</div>
                                    <div style="position: absolute;right:30px;">{{L1APPMtrlWilluse.buytaskqty}}</div>
                                </div>

                                <div style="display:flex;" @click="handleClickSummary(5)">
                                    <div>生产未完成数</div>
                                    <div style="position: absolute;right:30px;">{{L1APPMtrlWilluse.ordermlqty}}</div>
                                </div>
                                <div style="display:flex;" @click="handleClickSummary(6)">
                                    <div>外协未完成数</div>
                                    <div style="position: absolute;right:30px;">{{L1APPMtrlWilluse.wfjgqty}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </lj-win-common>
        <lj-dialog-sel title="选择附件类别" :options="fileClassList" showLabel="className" @select-item="handleSelectItem"
            ref="dialogOpen"></lj-dialog-sel>
        <van-action-sheet
            v-model="wpcodeState"
            :actions="wpcodeActions"
            description="质检不合格，请选择"
            cancel-text="取消"
            close-on-click-action
            get-container="body"
            @select="handleSelWpcode"
        >
        </van-action-sheet>
    </div>
</template>

<script>
    import ljWinCommon from "components/lj-win-common";
    import LjDictionary from "components/lj-dictionary";
    import LjDialogSel from "components/lj-dialog-sel";
    import LjImg from "components/lj-img"
    import LjImgPro from "components/lj-img-pro"
    import LjFj from "components/lj-fj"

    export default {
        components: {
            ljWinCommon,
            LjDictionary,
            LjDialogSel,
            LjImg,
            LjImgPro,
            LjFj
        },
        data() {
            return {
                pictureList: [],
                dialogShow: false,
                openConfigure: false,
                trigger: null,
                mainObject: {
                    classid: 0,
                    className: ""
                },
                wpcode: '', // 工艺路线选择的工价表
                wpcodeState: false,
                wpcodeActions: [],
                wpcodeActions: [],
                wpcodeList: [],
                fileClassList: [],
                fileClass: {},
                fileActive: "",
                title: "物料详情",
                L1APPMtrlWilluse: {},
                dictColumns: [{
                    label: "附件类别",
                    property: "className",
                    type: "Action"
                }, ],
                picArr: ["bmp", "png", "gif", "jpg", "jpeg"],
                ifEdit: false,
                classeditstr: "", // 附件分类新增权限
                classdelstr: "", // 附件分类删除权限
                classviewstr: "", // 附件分类查看权限
            }
        },
        created() {
            var pageParm = $lj.getPageParam();
            this.mainObject = pageParm.mainObject;
            this.getFileClass();
            this.getSummary();
            this.getMtrlWpcode(() => {
                this.wpcodeActions = [];
                let length = this.wpcodeList.length;
                for (let i = 0; i < length; i++) {
                    this.wpcodeActions.push(
                        {id: i, name: this.wpcodeList[i].wpcode},
                    );
                }
                console.log(' this.wpcodeActions :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.wpcodeActions));
            });
        },
        methods: {
            getMtrlWpcode(callback){
                var self = this;
                var RequestBody = {
					token: $lj.getStorage("token"),
					mtrlid: this.mainObject.mtrlid,
				}
                $lj.postLJRequest('GetL1APPMtrlWpcode',RequestBody,function(ret){
                    if(ret.wpcodeList){
                        self.wpcodeList = ret.wpcodeList;
                        callback();
                    }
                })
            },
            handleGotoScanRoute() {
                if (this.wpcodeList.length == 1) {
                    this.wpcode = this.wpcodeList[0].wpcode
                    this.handleScanCode();
                } else {
                    this.wpcodeState = true;
                }
            },
            handleSelWpcode(action, index) {
                this.wpcode = action.name;
                this.wpcodeState = false;
                this.handleScanCode();
            },
            // 扫描工位机二维码，投射工艺路线
            handleScanCode() {
                let self = this;
                $lj.openScanner(function (ret) {
                    setTimeout(() => {
                        // 扫描登陆-工艺展示工位机
                        let Obj = eval("(" + ret.content + ")");
                        let _content = "scid:" + self.mainObject.scid + ";mtrlid:" + self.mainObject.mtrlid  + ";wpcode:" + self.wpcode;
                        $lj.confirm('登录提示', Obj.msg, function () {
                            $lj.postLJRequest("ConfirmLoginQRCode", {
                                token: $lj.getStorage("token"),
                                qrcode: JSON.stringify(Obj),
                                content: _content
                            }, function () {
                                self.$toast.success('登录成功');
                            });
                        })
                    }, 200);
                })
            },
            handleAddFile() {
                var self = this;
                $lj.getPicture(function (ret) {
                    if (ret.data) {
                        // $lj.prompt("操作", "请输入文件名称", "", "text", function (filename) {
                        var FileDatas = [];
                        FileDatas.push({
                            base64: ret.base64Data,
                            fileType: ret.data.substring(ret.data.lastIndexOf("\/") + 1, ret.data
                                .length).split(".")[1],
                            fileName: "",
                            billtype: 201,
                            ClassID: self.fileClass.classId,
                            relid: self.mainObject.mtrlid,
                            relidmx: 0,
                            relcode: self.mainObject.mtrlcode
                        });
                        $lj.postLJRequest("UploadL1File", {
                            token: $lj.getStorage("token"),
                            fileList: FileDatas
                        }, function (ret) {
                            if (ret) {
                                $lj.toast("上传成功!");
                                self.getFileList(self.fileClass.classId);
                            }
                        });
                        // })
                    }
                }, 700)
            },
            getSummary() {
                let self = this;
                $lj.postLJRequest("GetL1APPMtrlWilluse", {
                    token: $lj.getStorage("token"),
                    mtrlid: this.mainObject.mtrlid,
                    status: this.mainObject.status_config ? this.mainObject.status_config : "",
                    woodcode: this.mainObject.woodcode_config ? this.mainObject.woodcode_config : "",
                    pcode: this.mainObject.pcode_config ? this.mainObject.pcode_config : "",
                }, function (ret) {
                    if (ret) {
                        self.L1APPMtrlWilluse = ret.L1APPMtrlWilluse;
                        if (self.L1APPMtrlWilluse.storageList) {
                            if (self.L1APPMtrlWilluse.storageList.length > 0) {
                                self.L1APPMtrlWilluse.storageSum = 0;
                                self.L1APPMtrlWilluse.storageList.forEach(element => {
                                    self.L1APPMtrlWilluse.storageSum += element.noallocqty
                                });
                            }
                        }
                    }
                })
            },
            handleDelFile(picture) {
                let self = this;
                $lj.confirm("确认", "是否删除该附件", function () {
                    var FileDatas = [];
                    FileDatas.push({
                        FileID_ERP: picture.FileID_ERP
                    });
                    $lj.postLJRequest("DeleteL1File", {
                        token: $lj.getStorage("token"),
                        FileDatas: FileDatas
                    }, function (ret) {
                        if (ret) {
                            $lj.toast("删除成功!");
                            self.getFileList(self.fileClass.classId);
                        }
                    })
                });
            },
            getFileClass() {
                let self = this;
                $lj.postLJRequest("GetFileClass", {
                    token: $lj.getStorage("token"),
                    billtype: 201
                }, function (ret) {
                    if (ret) {
                        self.fileClassList = ret.list;
                        if (ret.list.length > 0) {
                            self.fileClass = ret.list[0];
                            self.fileActive = ret.list[0].classId;
                            self.getFileList(ret.list[0].classId);
                        }
                        self.classeditstr = ret.classeditstr;
                        self.classdelstr = ret.classdelstr;
                        self.classviewstr = ret.classviewstr;
                    }
                })
            },
            getFileList(classid) {
                var self = this;
                self.pictureList = []
                $lj.postLJRequest("GetL1FileByBilltype", {
                    token: $lj.getStorage("token"),
                    classid: classid,
                    relid: this.mainObject.mtrlid,
                    relidmx: 0
                }, function (rsp) {
                    if (rsp) {
                        for (const item of rsp.Files) {
                            let order = -1;
                            if (self.picArr.indexOf(item.fileType.trim().toLowerCase()) > -1) {
                                order = 1
                            }
                            item.order = order
                        }

                        rsp.Files.sort((a, b) => {
                            return b.order - a.order
                        })
                        self.pictureList = rsp.Files;
                        console.log('self.pictureList :>> ', self.pictureList);
                    }
                })
            },
            photoBrowser(index) {
                var images = [];
                var md5list = [];
                for (const picture of this.pictureList) {
                    if (this.checkImg(picture.fileType)) {
                        var url = $lj.constant.cacheDir + "/" + picture.filemd5;
                        images.push(url);
                        md5list.push(picture.filemd5);
                    }
                }
                let isSuper = $lj.getStorage('user').empid === 0;
                $lj.photoBrowser(images, index, null, !isSuper && $lj.checkPower(7329));
            },
            handleMainActionRowClick(eventData) {
                if (eventData.field === "className") {
                    this.$refs.dialogOpen.open();
                }
            },
            handleSelectItem(name, title) {
                let length = this.fileClassList.length;
                for (let i = 0; i < length; i++) {
                    if (name == this.fileClassList[i].classId) {
                        this.fileClass = this.fileClassList[i];
                    }
                }
                this.fileActive = name;
                this.getFileList(name);
            },
            gotoConfigure() {
                $lj.openWin("mtrldef-fj-configuration", {
                    mainObject: this.mainObject
                });
            },
            scWorkpricetable(){
                $lj.openWin("mtrl-sc-workpricetable", {
                    mainObject: this.mainObject
                });
            },
            openMtrlStructure() {
                if(!$lj.checkPower(6878)) {
                    alert("没有查看物料清单的权限,请联系管理员!");
                    return;
                }
                $lj.openWin("mtrl-structure", {
                    mainObject: this.mainObject
                });
            },
            handleClickSummary(type) {
                var title = "";
                switch (type) {
                    case 1:
                        title = '生产需求数';
                        break;
                    case 2:
                        title = '订单需求数';
                        break;
                    case 3:
                        title = '外协需求数';
                        break;
                    case 4:
                        title = '采购未到货数';
                        break;
                    case 5:
                        title = '生产未完成数';
                        break;
                    case 6:
                        title = '外协未完成数';
                        break;
                }
                this.mainObject.title = title;
                this.mainObject.type = type;
                $lj.openWin("mtrldef-fj-table", {
                    mainObject: this.mainObject
                });

            },
            checkImg(fileType){
                fileType = fileType.trim().toLowerCase();
                return fileType =="bmp" || fileType == "png" || fileType == "gif" || fileType == "jpg" || fileType == "jpeg";
            },
            // handleFjClick(file) {
            //     if (file.filemd5) {
            //         $lj.openFile(file.fileName.trim(), file.fileType.trim(), file.filemd5, file.FileID_ERP, 'UFile');
            //     } else if (file.url) {
            //         $lj.openFileByUrl(file.url);
            //     }
            // }
        },
        computed: {
            isCanClassEdit() {
                if (this.classeditstr == '-1') return false;
                if (this.classeditstr == '0') return true;
                return this.classeditstr.indexOf(',' + this.fileClass.classId + ',') > -1
            },
            isCanClassDel() {
                if (this.classdelstr == '-1') return false;
                if (this.classdelstr == '0') return true;
                return this.classdelstr.indexOf(',' + this.fileClass.classId + ',') > -1
            },
            isCanClassView() {
                if (this.classviewstr == '-1') return false;
                if (this.classviewstr == '0') return true;
                return this.classviewstr.indexOf(',' + this.fileClass.classId + ',') > -1
            }
        },
        filters: {
            IconFiletypeFilter(data) {
                let type = data.fileType.trim().toLowerCase();
                if (type) {    
                    switch (type) {
                        case "jpg":
                        case "jpeg":
                        case "png":
                        case "gif":
                        case "bmp":
                            return "#icon-tupian";
                        case "xls":
                        case "xlsx":
                            return "#icon-excel";
                        case "doc":
                        case "docx":
                            return "#icon-WORD";
                        case "txt":
                            return "#icon-txt";
                        case "pdf":
                            return "#icon-PDF";
                        default:
                            return "#icon-yasuobao";
                    }
                }
            },
            trimFilter(val) {
                return val.trim()
            }
        }
    }
</script>
<style scoped lang="less">
    .mtrlTitle {
        font-weight: bold;
        text-align: center;
    }
    .file-rel {
        margin-top: 10px;
    }
    .file-rel .file-rel-item {
        width: -moz-calc(~"33.33vw - 18px");
        width: -webkit-calc(~"33.33vw - 18px");
        width: calc(~"33.33vw - 18px");
        height: -moz-calc(~"33.33vw - 18px");
        height: -webkit-calc(~"33.33vw - 18px");
        height: calc(~"33.33vw - 18px");
    }

</style>