<template>
    <lj-win-common title="不良项目-选择">
        <div slot="header_sub">
            <div style="display: flex;">  
                <lj-select title="责任工段" style="flex:0 0 50%;"
                    :options="wrkgrpList" 
                    :valueMap="['wrkGrpid', 'wrkgrpname']" 
                    options-api="GetSCWorkgroups"
                    v-model="wrkgrpid"
                    :api-params="wrkgrp_apiParams"
                    @change="handleWrkgrpSelectChange($event)" />
                <lj-select title="责任工作中心" style="flex:0 0 50%;"
                    :options="workgroupList" 
                    :valueMap="['workgroupid', 'workgroupname']"
                    v-model="workgroupid"
                    @change="handleworkgroupSelectChange($event)" />
            </div>
            <div>
                <tab active-color="#fd7526">
                    <tab-item selected @click.native="activeTab=1">不良项目</tab-item>
                    <tab-item @click.native="activeTab=2">已选不良项目</tab-item>
                </tab>
            </div>
        </div>
        <div slot="body">
            <lj-grid
                v-if="activeTab===1"
                :columns="columns1"
                :table-data="baditem"
                :editing="true"
                @content-cell-change="handleChangeClick"
            ></lj-grid>
            <lj-grid
                v-if="activeTab===2"
                :columns="columns2"
                :table-data="baditem_sel"
                :editing="true"
                quick-enter-name="baduten-selection"
                quick-enter-property="itemname"
                @cell-click="handleGridCellClick"
                @content-cell-change="handleChangeClick"
            ></lj-grid>
        </div>
        <mu-flex slot="footer">
            <mu-button large color="primary" @click="chooseCommit" style="width:100%">选择</mu-button>
        </mu-flex>
        <mu-dialog :open.sync="mxDialogOpen" width="100%" title="质检标准" 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 dialogFiles" :key="index">
                        <lj-img style="width: 25vw; height: 25vw;" :src="picture.url"
                                :md5="picture.filemd5" @click.native="itemPhotoBrowser(index)"/>
                        <br>
                    </mu-col>
                </mu-row>
            </div>
            <mu-button slot="actions" color="primary" flat @click="mxDialogOpen=false">
                关闭
            </mu-button>
        </mu-dialog>
    </lj-win-common>
</template>

<script>
    import ljWinCommon from 'components/lj-win-common'
    import LjGrid from "components/lj-grid";
    import LjSelect from "components/lj-select";
    import LjImg from "components/lj-img";
    import {Tab,TabItem} from 'vux';

    export default {
        components: {
            ljWinCommon,
            LjGrid,
            LjSelect,
            LjImg,
            Tab,
            TabItem,
        },
        data() {
            return {
                activeTab: 1,
                mxDialogOpen: false,
                dialogFiles: [],
                columns1: [
                    {
                        property: "checked",
                        width: screen.width * 0.1,
                        type: "selection",
                        editable: true,
                        headerType: "selection"
                    },
                    {property: "itemcode", label: "编号", width: screen.width * 0.2,},
                    {property: "itemname", label: "不良项目", width: screen.width * 0.4,},
                    {property: "amt", label: "罚款金额", width: screen.width * 0.2,},
                    {property: "standard", label: "标准", width: screen.width * 0.2},
                ],
                columns2: [
                    {
                        property: "checked",
                        width: screen.width * 0.1,
                        type: "selection",
                        editable: true,
                        headerType: "selection"
                    },
                    {property: "itemcode", label: "编号", width: screen.width * 0.2,},
                    {property: "itemname", label: "不良项目", width: screen.width * 0.4,},
                    {property: "amt", label: "罚款金额", width: screen.width * 0.2,},
                    {property: "qty", label: "不良数", width: screen.width * 0.2, type: "number", editable: true},
                    {property: "empstr", label: "员工", width: screen.width * 0.2},
                    {property: "workgroupname", label: "责任工作中心", width: screen.width * 0.3,},
                    {property: "dscrp", label: "备注", width: screen.width * 0.4, editable: true},
                ],
                workgroupDic: {},
                wrkgrpList: [],
                wrkgrp_apiParams: {wrkgrps: []},
                workgroupList: [],
                workgroup_apiParams: {wrkgrpids: []},
                baditem: [],
                baditem_all: [],
                baditem_sel: [],
                wrkgrpDic: {},
                wrkgrpid: undefined,
                workgroupid: undefined,
                currentPrintid: 0,
                empidList: [],
                empnameList: [],
                workgroupFun: false,
                BadItemFun: false
            }
        },
        created() {
            this.getCheckItemByWorkgroup();
            var pageParm = $lj.getPageParam();
            if (pageParm) {
                this.baditem_sel = pageParm.itemmx;
                this.baditem_sel.forEach((item) => {
                    item.checked = true;
                })
                if (pageParm.wrkgrpid) {
                    this.wrkgrpid = pageParm.wrkgrpid;
                }
            }
            this.GetWorkgroups()
        },
        methods: {
            getCheckItemByWorkgroup() {
                let self = this;
                $lj.postLJRequest("GetCheckItemByWorkgroup", {
                    token: $lj.getStorage("token"),
                }, function (ret) {
                    if (ret) {
                        if (ret.baditemList) {
                            ret.baditemList.forEach((baditem) => {
                                baditem.checked = false;
                                baditem.qty = 0;
                                baditem.empstr = '全部';
                                baditem.empmx = [];
                                baditem.standard = '查看';
                                self.baditem_sel.forEach((item) => {
                                    if (item.itemid == baditem.itemid) {
                                        baditem.qty = item.qty;
                                        baditem.empmx = item.empmx;
                                        baditem.empstr = item.empstr;
                                        baditem.checked = true;
                                    }
                                })
                                self.baditem_all.push(baditem);
                            })

                            self.checkReadySelect();
                        }
                    }
                })
            },
            getBaditem() {
                console.log("getBaditem>>>>>>>>>>>>>>>>>>>>>>>>>",this.baditem_all.length)
                if(this.baditem_all.length <= 0 || this.workgroupList.length <= 0) return;
                this.baditem = [];
                this.baditem_all.forEach((item) => {
                    if (item.wrkgrpid == this.wrkgrpid && (item.workgroupid == this.workgroupid || item.workgroupid == 0)) {
                        this.baditem.push(item);
                    }
                })
                console.log("this.baditem>>>>>>>>>>>>>>>>",JSON.stringify(this.baditem))
            },
            handleGridCellClick({column, row, index}) {
                let self = this;
                if (!column) {
                    return;
                }
                if (column.editable) {
                    return;
                }
                if (column.property == 'standard') {
                    this.dialogFiles = [];
                    this.dialogFiles = row.filestandard;
                    this.mxDialogOpen = true;
                }
                if (column.property === "empstr") {
                    $lj.removeEventListener("emp_select");
                    $lj.addEventListener("emp_select", function (ret) {
                        if (ret.value.empList.length > 0) {
                            self.$set(row, "empstr", ret.value.empstr);
                            self.$set(row, "empnamestr", ret.value.empstr);
                            self.$set(row, "empidstr", ret.value.empidstr);
                        }
                    });
                    $lj.openWin("emp-selection", {item: {workgroupid: row.workgroupid}});
                }
            },
            handleChangeClick({column,row,rowIndex}) {
                if (column.property === "checked") {
                    if (row.checked) {
                        this.baditem_sel.push(row);
                        row.workgroupid = this.workgroupid;
                        this.workgroupList.forEach((item) => {
                            if (item.workgroupid == this.workgroupid) {
                                row.workgroupname = item.workgroupname;
                            }
                        })
                    }
                    else {
                        for(let i = 0; i < this.baditem_all.length; i++) {
                            if (this.baditem_all[i].itemid === row.itemid) {
                                this.baditem_all[i].checked = false;
                                break;
                            }
                        }
                        for(let i = 0; i < this.baditem_sel.length; i++) {
                            if (this.baditem_sel[i].itemid === row.itemid) {
                                this.baditem_sel.splice(i, 1);
                                break;
                            }
                        }
                    }
                }
            },
            chooseCommit() {
                let ifreturn = false;
                for (let i = 0; i < this.baditem_sel.length; i++) {
                    if (this.baditem_sel[i].qty == 0) {
                        alert("请输入不良数");
                        ifreturn = true;
                        break;
                    }
                }
                if (ifreturn) {
                    return;
                }
                $lj.sendEvent("baditem_select", {baditem: this.baditem_sel});
                $lj.closeWin();
            },
            handleWrkgrpSelectChange(wrkgrpid) {
                this.workgroupList = [];
                this.workgroupid = undefined;
                if(this.workgroupDic[wrkgrpid]) this.workgroupList = this.workgroupDic[wrkgrpid];
                console.log("handleWrkgrpSelectChange>>>>>>>>>>>>>>")
            },
            handleworkgroupSelectChange(workgroupid) {
                if (workgroupid) {
                    this.workgroupid = workgroupid;
                }
                if (this.wrkgrpid == 0) {
                    alert("请选择工段");
                    return;
                }
                console.log("handleworkgroupSelectChange>>>>>>>>>>>>>>>>>>>>>>>>")
                this.getBaditem();
            },
            GetWorkgroups() {
                let self = this;
                let requestBody = {
                    token: $lj.getStorage("token"),
                    wrkgrpids: [],
                }
                $lj.postLJRequest("GetWorkgroups", requestBody, function (ret) {
                    if (ret) {
                        if (ret.workgroups) {
                            self.workgroupList = ret.workgroups;
                            ret.workgroups.forEach((workgroup) => {
                                if (!self.workgroupDic[workgroup.wrkgrpid]) {
                                    self.$set(self.workgroupDic, workgroup.wrkgrpid, []);
                                }
                                self.workgroupDic[workgroup.wrkgrpid].push(workgroup);
                                self.workgroupList.push(workgroup);
                            })

                            self.checkReadySelect();
                        }
                    }
                })
            },
            itemPhotoBrowser(index) {
                var images = [];
                for (const picture of this.dialogFiles) {
                    var url = $lj.constant.cacheDir + "/" + picture.filemd5;
                    images.push(url);
                }
                $lj.photoBrowser(images, index,this.dialogFiles);
            },
            checkReadySelect() {
                if (this.wrkgrpid) {
                    this.handleWrkgrpSelectChange(this.wrkgrpid)
                }
                var pageParm = $lj.getPageParam();
                if (pageParm.workgroupid) {
                    this.handleworkgroupSelectChange(pageParm.workgroupid);
                }
            }
        },
        watch: {
            activeTab: function(newVal, oldVal) {
                if (newVal != oldVal) {
                    this.getBaditem();
                }
            }
        }
    }
</script>

<style>

</style>