<template>
    <div>
        <lj-win-common :title="title" :show-back="true">
            <template slot="body" >
                <template>
                    <lj-grid :table-data="badItems" :columns="gridColumns" :editing="ifedit"
                             @cell-click="handleGridCellClick"/>
                </template>
                <template>
                    <div class="lj-card-item">
                        <mu-row>
                            <mu-col span="4" class="lj-card-secondary-title" style="text-align: center;" v-for="(picture, index) in pictureList" ::key="index">
                                <lj-img style="width: 30vw; height: 30vw;" v-bind:src="picture.url" @click.native="photoBrowser(index)"/><br>
                                {{picture.fileName}}
                            </mu-col>
                        </mu-row>
                    </div>
                </template>
            </template>
            <template slot="footer">
                <mu-row>
                    <mu-col tag="mu-button" color="blue" @click="handleConfirmClick">确定</mu-col>
                    <mu-col tag="mu-button" color="blue" @click="handleCancleClick">取消</mu-col>
                </mu-row>
            </template>
        </lj-win-common>
    </div>
</template>

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

    export default {
        name: "wrkgrp-baditem",
        components: {
            ljWinCommon,
            LjGrid,
            LjImg
        },
        created() {
            var pageParm = $lj.getPageParam();
            this.empid = pageParm.empid;
            this.empname = pageParm.empname;
            this.workgroupid = pageParm.workgroupid;
            this.wrkgrpid = pageParm.wrkgrpid;
            this.getBadItems();
        },
        mounted() {

        },
        data() {
            return {
                empid: 0,
                empname: "",
                wrkgrpid: 0,
                workgroupid: 0,
                pictureList: [],
                ifedit: true,
                badItems: [],
                gridColumns: [{label: "项目编号", property: "itemcode", width: screen.width * 0.2},
                    {label: "项目名称", property: "itemname", width: screen.width * 0.2},
                    {label: "备注", property: "dscrp", width: screen.width * 0.27},
                    {label: "不合格数", property: "qty", width: screen.width * 0.18, type: "number", editable: true},
                    {label: "", property: "picPhoto", icon: "iconfont icon-camera1", width: screen.width * 0.15 , type: "pic"},],
            }
        },
        methods: {
            handleConfirmClick(){
                var extraObject = {};
                extraObject.badItems = [];
                extraObject.badItemFjs = [];
                extraObject.allqty = 0;
                extraObject.dscrp = "";
                for (const badItem of  this.badItems){
                    if (badItem.qty <= 0){
                        continue;
                    }
                    extraObject.allqty += Number(badItem.qty);
                    extraObject.dscrp += "," + badItem.itemname;
                    extraObject.badItems.push(badItem);
                }
                if (extraObject.badItems.length <= 0){
                    alert("请先填写不合格数量!");
                    return;
                }
                extraObject.empid = this.empid;
                extraObject.dscrp = extraObject.dscrp.slice(1);
                extraObject.badItemFjs = this.pictureList;
                $lj.sendEvent("baditem_select", extraObject);
                $lj.closeWin();
            },
            handleCancleClick(){
                $lj.confirm("询问", "是否确认放弃编辑不良项目？", function () {
                    $lj.closeWin();
                })
            },
            getBadItems() {
                let self = this;
                $lj.postLJRequest("GetBadItemsByGroup", {
                    token: $lj.getStorage("token"),
                    wrkgrpid: this.wrkgrpid,
                    workgroupid: this.workgroupid,
                }, function (ret) {
                    if (ret) {
                        if (ret.badItems.length <= 0){
                            alert("该工段未设置不良项目，请联系管理员设置!");
                            $lj.closeWin();
                        }
                        self.badItems = ret.badItems;
                        for (const badItem of self.badItems){
                            badItem.qty = 0;
                        }
                    }
                })
            },
            handleGridCellClick({column, row, index}) {
                if (!column) {
                    return;
                }
                if (column.editable) {
                    return;
                }
                var self = this;
                if (column.property === "picPhoto") {
                    $lj.getPicture(function(ret){
                        if (ret.data){
                            var picture = {
                                url : ret.data,
                                relidmx : row.itemid,
                                fileName : row.itemname,
                                base64 : ret.base64Data,
                                fileType : "." + ret.data.substring(ret.data.lastIndexOf("\/") + 1, ret.data.length).split(".")[1],
                            };
                            var i = 0;
                            for (const pic of self.pictureList){
                                if (pic.relidmx === picture.relidmx){
                                    if(pic.base64 === picture.base64){
                                        $lj.toast("图片已添加过，不能重复添加", 2000);
                                        return;
                                    }
                                    i++;
                                }
                            }
                            if (i >= 3){
                                alert("检查项目:" + row.fileName + "图片数不能超过3张！");
                                return;
                            }
                            self.pictureList.push(picture);
                            self.pictureList.sort($lj.compare("itemid")); //排序
                        }
                    })
                }

            },
            photoBrowser(index){
                var images = [];
                for (const picture of this.pictureList) {
                    images.push(picture.url);
                }
                $lj.photoBrowser(images, index);
            },
        },
        computed: {
            title() {
                return "不良项目【" + this.empname + "】"
            }
        }
    }
</script>
<style>

</style>
