<template>
    <div>
        <lj-win-common title="用料详情">
            <div slot="body">
                <!--<div class="lj-card-item">-->
                <div style="font-size:22px;">唛头用料</div>
                <div style="margin-top:10px">
                    <lj-grid :table-data="MTMtrlUseList" :columns="MTColumns" @cell-click="handleGridCellClick" />
                </div>
                <!--</div>-->
                <!--<div class="lj-card-item">-->
                <div style="font-size:22px;">BOM用料</div>
                <div style="margin-top:10px">
                    <lj-grid :table-data="BOMMtrlUseList" :columns="BOMColumns" @cell-click="handleGridCellClick" :row-style="setRowStyle" />
                </div>
                <!--</div>-->
            </div>
        </lj-win-common>
        <mu-dialog :open.sync="mxDialogOpenCP" width="100%" :title="mxTitle" scrollable>
            <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 itemFiles" :key="index">
                        <lj-img style="width: 25vw; height: 25vw; " v-bind:src="picture.url"
                            v-bind:md5="picture.filemd5" @click.native="itemPhotoBrowser(index)" />
                        <br>
                    </mu-col>
                </mu-row>
            </div>
            <mu-button slot="actions" color="primary" flat @click="mxDialogOpenCP=false">
                关闭
            </mu-button>
        </mu-dialog>
    </div>
</template>

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

    export default {
        components: {
            ljWinCommon,
            LjGrid,
            LjImg
        },
        data() {
            return {
                orderid: 0,
                MTMtrlUseList: [],
                BOMMtrlUseList: [],
                MTColumns: [{label: "物料编码",property: "mtrlcode",width: screen.width * 0.2},
                    {label: "物料名称",property: "mtrlname",width: screen.width * 0.2},
                    {label: "物料规格",property: "mtrlmode",width: screen.width * 0.2},
                    {label: "图片",property: "Photo",icon: "iconfont icon-fasongtupian",width: screen.width * 0.15,type: "pic"},
                    {label: "用料量",property: "dqty",width: screen.width * 0.15},
                    {label: "单位",property: "unit",width: screen.width * 0.1},
                ],
                BOMColumns: [{label: "物料编码",property: "mtrlcode",width: screen.width * 0.2},
                    {label: "物料名称",property: "mtrlname",width: screen.width * 0.2},
                    {label: "物料规格",property: "mtrlmode",width: screen.width * 0.2},
                    {label: "工艺说明",property: "gydscrp",width: screen.width * 0.2},
                    {label: "图片",property: "Photo",icon: "iconfont icon-fasongtupian",width: screen.width * 0.15,type: "pic"},
                    {label: "用料量",property: "sonscale",width: screen.width * 0.15},
                    {label: "毛需求数",property: "truerqqty",width: screen.width * 0.15},
                    {label: "单位",property: "unit",width: screen.width * 0.1}
                ],
                mxTitle: "质检项目可选项",
                mxDialogOpenCP: false,
                itemFiles: [],
            }
        },
        created() {
            var pageParm = $lj.getPageParam();
            this.orderid = pageParm.orderid;
            // this.orderid = 121502; //测试用
            this.GetL1MtrlUseDetail()
        },
        methods: {
            GetL1MtrlUseDetail() {
                let self = this;
                $lj.postLJRequest("GetL1MtrlUseDetail", {
                    token: $lj.getStorage("token"),
                    orderid: self.orderid,
                }, function (ret) {
                    self.MTMtrlUseList = ret.MTMtrlUseList;
                    self.BOMMtrlUseList = ret.BOMMtrlUseList;
                })
            },
            handleGridCellClick({column,row,index}) {
                let self = this;
                if (!column) {
                    return;
                }
                if (column.property === 'Photo') {
                    self.mxDialogOpenCP = true;
                    self.mxTitle = '[' + row.mtrlname + ']';
                    self.itemFiles = row.fileList;
                }
            },
            itemPhotoBrowser(index) {
                var images = [];
                for (const picture of this.itemFiles) {
                    var url = $lj.constant.cacheDir + "/" + picture.filemd5;
                    images.push(url);
                }
                $lj.photoBrowser(images, index,this.itemFiles);
            },
            setRowStyle(rowIndex, row) {
                if (row.change_type != 0) {
                    return {
                        backgroundColor: '#FFFF00',
                        height: '32px'
                    }
                } else {
                    return {
                        height:'32px'
                    }
                }
            }
        },
    }
</script>

<style>

</style>