<template>
    <div>
        <lj-win-common :title="title" :show-back="true" ref="baseWin">
            <div slot="body">
                <template>
                    <!-- <configure-select-pic v-model="status" :configureName="statusName" :flag="mtrlInfo.statusflag"
                        :option="mtrlInfo.statusop" v-if="mtrlInfo.statusflag" @input="inputStatus"
                        :disabled="statusdisable" /> -->
                    <configure-select-pic v-model="woodcode" :flag="mtrlInfo.woodcodeflag"
                        :option="mtrlInfo.woodcodeop" v-if="mtrlInfo.woodcodeflag" @input="inputWoodcode" />
                </template>
                <template>
                    <div class="lj-card-item">
                        <span class="choose">已选择  <span style="color:red">{{chooseStr}}</span></span>
                    </div>
                </template>
                <template>
                    <lj-dictionary :data="fileClass" :columns="dictColumns" :editing="true"
                        @action-row-click="handleMainActionRowClick"></lj-dictionary>
                </template>
                <template>
                    <div class="lj-card-item">
                        <mu-row>
                            <mu-col span="4" class="lj-card-secondary-title"
                                style="text-align: center; padding-bottom: 8px;" v-for="(picture, index) in pictureList"
                                ::key="index">
                                <lj-img style="width: 30vw; height: 30vw; " v-bind:src="picture.url"
                                    v-bind:md5="picture.filemd5" @click.native="photoBrowser(index)" />
                                <br>
                                <mu-button round color="blue" @click="handleDelFile(picture)">删除</mu-button>
                            </mu-col>
                            <mu-col span="4" class="lj-card-secondary-title" style="text-align: center;">
                                <i class="iconfont icon-add" style="width: 30vw; height: 30vw; font-size: 18vw;"
                                    @click="handleAddFile"></i>
                            </mu-col>
                        </mu-row>
                    </div>
                </template>
            </div>
        </lj-win-common>
        <lj-dialog-sel title="选择附件类别" :options="fileClassList" showLabel="className" @select-item="handleSelectItem"
            ref="dialogOpen"></lj-dialog-sel>
    </div>
</template>

<script>
    import configureSelectPic from "components/L1APP/public/configure-select-pic";
    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"

    export default {
        components: {
            configureSelectPic,
            ljWinCommon,
            LjDictionary,
            LjDialogSel,
            LjImg
        },
        data() {
            return {
                pictureList: [],
                dialogShow: false,
                mainObject: {
                    classid: 0,
                    className: ""
                },
                fileClassList: [],
                fileClass: {},
                mtrlInfo: {},
                pzid: 0,
                pzcode:"",
                printid: 0,
                chooseStr:"",
                title: "物料详情-选配",
                statusname: "配置配置",
                woodcodename: "配置11",
                pcodename: "配置22",
                woodcode:"",
                dictColumns: [{
                    label: "附件类别",
                    property: "className",
                    type: "Action"
                }, ],
            }
        },
        created() {
            let user = $lj.getStorage("userInfo");
            if (user) {
                this.statusname = user.statusname;
                this.woodcodename = user.woodcodename;
                this.pcodename = user.pcodename;
            }
            var pageParm = $lj.getPageParam();
            this.mainObject = pageParm.mainObject;
            this.getFileClass();
            this.GetMtrlInfo();
        },
        methods: {
            handleAddFile() {
                var self = this;
                if (self.pzid == 0 || self.printid == 0) {
                    alert("请先选择选配项!")
                    return;
                }
                $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: 270,
                            ClassID: self.fileClass.classId,
                            relid: self.pzid,
                            relidmx: self.printid,
                            relcode: self.pzcode
                        });
                        $lj.postLJRequest("UploadL1File", {
                            token: $lj.getStorage("token"),
                            fileList: FileDatas
                        }, function (ret) {
                            if (ret) {
                                $lj.toast("上传成功!");
                                self.getFileList(self.fileClass.classId);
                            }
                        });
                        // })
                    }
                }, 700)
            },
            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: 270
                }, function (ret) {
                    if (ret) {
                        self.fileClassList = ret.list;
                        if (ret.list.length > 0) {
                            self.fileClass = ret.list[0];
                        }
                    }
                })
            },
            getFileList(classid) {
                this.pictureList=[];
                var self = this;
                $lj.postLJRequest("GetL1FileByBilltype", {
                    token: $lj.getStorage("token"),
                    classid: classid,
                    relid: this.pzid,
                    relidmx: this.printid,
                }, function (rsp) {
                    if (rsp) {
                        self.pictureList = rsp.Files;
                    }
                })
            },
            photoBrowser(index) {
                var images = [];
                var md5list = [];
                for (const picture of this.pictureList) {
                    var url = $lj.constant.cacheDir + "/" + picture.filemd5;
                    images.push(url);
                    md5list.push(picture.filemd5)
                }
                $lj.photoBrowser(images, index,md5list);
            },
            handleMainActionRowClick(eventData) {
                if (eventData.field === "className") {
                    this.$refs.dialogOpen.open();
                }
            },
            handleSelectItem(item) {
                this.fileClass = item.item;
                this.getFileList(item.item.classId);
            },
            GetMtrlInfo() {
                let mtrlcode = this.mainObject.mtrlcode;
                let self = this;
                $lj.postLJRequest("GetMtrlInfo", {
                    token: $lj.getStorage("token"),
                    mtrlcode: mtrlcode
                }, function (ret) {
                    self.mtrlInfo = ret.mainInfo;
                })
            },
            inputWoodcode(inputItem) {
                this.pzid = inputItem.pzid;
                this.printid = inputItem.opString.printid;
                this.pzcode = inputItem.pzcode;
                this.chooseStr = inputItem.name + ':' + inputItem.opString.valuestr;
                this.getFileList(this.fileClass.classId);
            }
        },
        computed: {

        }
    }
</script>

<style>
    .choose {
        font-size: 18px;
        padding: 5px;
    }
</style>