<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="changeWpcode(Listmx)" v-for="(Listmx,index) in wpcodeList">
                        <mu-list-item-title>{{Listmx.wpcode}}</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.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">{{wpcodeName}}</div>

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



                <div class="lj-card-item" v-if="filedatasList.length > 0">
                    <div style="padding: 2px; color: gray; font-size: 14px;">
                        单据附件
                    </div>
                    <mu-row>
                        <mu-col span="4" class="lj-card-secondary-title"
                                style="text-align: center; padding-bottom: 8px;"
                                v-for="(picture, index) in filedatasList" :key="index">
                            <lj-img style="width: 30vw; height: 30vw; " v-bind:src="picture.url"
                                    v-bind:md5="picture.filemd5" @click.native="photoBrowser(index)"/>
                        </mu-col>
                    </mu-row>
                </div>

            </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 {
                title: "工价表",
                mainObject:{},
                wpcodeList:[],
                wpcodeName:"",
                workpriceList:[],
                filedatasList:[],
                openConfigure:false,
                gridColumns: [{label: "工序序号",property: "Proorder", width: screen.width * 0.2},
                    {label: "工序编号", property: "procode", width: screen.width * 0.2 },
                    {label: "工序名称", property: "Proname", width: screen.width * 0.2},
                    {label: "数量", property: "workqty", width: screen.width * 0.2 ,type:"number"},
                    {label: "单件工价", property: "workPrice", width: screen.width * 0.2 ,type:"number"},
                    {label: "全套工价", property: "wprice", width: screen.width * 0.2,type:"number" },
                    {label: "工段", property: "wrkGrpName", width: screen.width * 0.2 },
                    {label: "入仓", property: "lastflag", width: screen.width * 0.2 ,type:"ifbox"},
                    {label: "工序属性", property: "protypeStr", width: screen.width * 0.2 },
                    {label: "主工序编号", property: "mainprocode", width: screen.width * 0.2 },
                    {label: "主工序名称", property: "mainproname", width: screen.width * 0.2 },
                    {label: "生产天数", property: "Workdays", width: screen.width * 0.2 },
                    {label: "外协天数", property: "wfjgdays", width: screen.width * 0.2 },
                    {label: "合并分组号", property: "utcode", width: screen.width * 0.3 },
                    {label: "派工类型", property: "sctypeStr", width: screen.width * 0.2 },
                    {label: "工序类型", property: "kindStr", width: screen.width * 0.2 },
                    {label: "工种", property: "worktype", width: screen.width * 0.2 },
                    {label: "备注", property: "dscrp", width: screen.width * 0.3 },
                    {label: "需要质检", property: "ifcheck", width: screen.width * 0.2 ,type:"ifbox"},
                    {label: "工艺路线名称<i class='iconfont icon-right' style='font-size: 12px'>", property: "routename", width: screen.width * 0.2 },
                    ]


            }
        },
        created() {
            var pageParm = $lj.getPageParam();
            this.mainObject = pageParm.mainObject;
        },
        mounted(){
            var self = this;
            this.getMtrlWpcode(function(){
                self.wpcodeName = self.wpcodeList[0].wpcode;
                self.refresh()  
            });

        },
        methods:{
            refresh(){
                var self = this;
                var RequestBody = {
					token: $lj.getStorage("token"),
					mtrlid: this.mainObject.mtrlid,
                    wpcode: this.wpcodeName
				}

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

                    if(ret.filedatas){
                        self.filedatasList = ret.filedatas;
                    }
                })
            },
            changeWpcode(item){
                this.wpcodeName = item.wpcode;
                this.openConfigure = false;
                this.refresh();
            },
            getMtrlWpcode(callback){
                var self = this;
                var mtrlid = this.mainObject.mtrlid;
                var RequestBody = {
					token: $lj.getStorage("token"),
					mtrlid: this.mainObject.mtrlid,
				}

                $lj.postLJRequest('GetL1APPMtrlWpcode',RequestBody,function(ret){
                    if(ret.wpcodeList){
                        self.wpcodeList = ret.wpcodeList;
                        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;
                }
                if (column.property == "routename") {
                    $lj.openWin("procode-route-mx", {mainObject: row});
                }
            }
        },     
    }
</script>

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