<template>
    <lj-win-common title="工序-选择">
        <div slot="body">
            <lj-searchbar slot="header_sub" hint="输入工序名称进行查找" @search="handleSearchbar" v-model="keyword" />
            <mu-row justify-content="center">
                <mu-col align-self="start" span="3" v-for="(item,index) in detail_title" :key="index">
                    <div class="circular" :style="{'background-color':item.color}" />
                    <span style="margin-left:15px;">{{item.label}}</span>
                </mu-col>
            </mu-row>
            <lj-grid :table-data="columns" :columns="columnProperties" :editing="true" 
                    @cell-click="handleGridCellClick"/>
        </div>
        <template slot="footer">
            <mu-button large color="primary" @click="chooseCommit" style="width:100%">选择</mu-button>
        </template>
    </lj-win-common>
</template>

<script>
    import ljWinCommon from 'components/lj-win-common'
    import LjGrid from "components/lj-grid";
    import LjSearchbar from 'components/lj-searchbar';
    export default {
        components: {
            ljWinCommon,
            LjGrid,
            LjSearchbar,
        },
        data() {
            return {
                dataList: [],
                columns:[],
                columnProperties: [
                    {property: "checked", label: "选", width: screen.width * 0.1,type:"selection", readflag:"typecolor",  readflagColor: "readflagColor", cellEditingCall:function (row, column, rowIndex) {
                        return row["ifcheck"] == 1;
                    }},
                    {property: "workgroupname", label: "工作中心", width: screen.width * 0.3, readflag:"typecolor",  readflagColor: "readflagColor"},
                    {property: "procode", label: "工序编号", width: screen.width * 0.3, readflag:"typecolor",  readflagColor: "readflagColor"},
                    {property: "proname", label: "工序名称", width: screen.width * 0.3, readflag:"typecolor",  readflagColor: "readflagColor"},
                ],
                ProSelect:[],
                orderid:0,
                keyword: '',
                detail_title:[
                    {color:"#2196f3",label:"待质检"},
                    {color:"#4caf50",label:"已质检"},
                    {color:"#999999",label:"不需质检"},
                    // {color:"#cccccc",label:"无质检权限"}
                ]
            }
        },
        created() {
            var pageParm = $lj.getPageParam();
            this.orderid = pageParm.orderid;
            // this.orderid = 121503; //测试用
            this.GetL1ProcessSelection()
        },
        methods: {
            GetL1ProcessSelection() {
                let self = this;
                $lj.postLJRequest("GetL1ProcessSelection", {
                    token: $lj.getStorage("token"),
                    orderid: self.orderid,
                }, function (ret) {
                    self.columns = ret.ProcessOptionsList;
                    self.dataList = ret.ProcessOptionsList;
                })
            },
            handleGridCellClick({column, row, index}){
                if (!column) {
                    return;
                }
                let self = this;
                // if (column.property === "checked") {
                    if (row["ifcheck"] != 1) return false; 
                    // 单选
                    for (let i = 0; i < self.columns.length; i++) {
                        if (i === index) {
                            self.$set(self.columns[i], "checked", true);
                            self.ProSelect = self.columns[i];
                        }else{
                            self.$set(self.columns[i], "checked", false);
                        }
                    }
                // }
            },
            chooseCommit(){
                if (!this.ProSelect.checked) {
                    $lj.toast('请选择工序');
                    return;
                }
                if (this.ProSelect.checktype === 99) {
                    alert('您没有【工人自检】和【质检员检查】权限,请检查')
                    return;
                }
                // if (this.ProSelect.workgroupid === 0) {
                //     alert('此工序的工作中心不明确,请检查')
                //     return;
                // }
                // alert(JSON.stringify(this.ProSelect));
                $lj.sendEvent("process_select", this.ProSelect);
                $lj.closeWin();
            },
            handleSearchbar() {
                this.columns = [];
                if (this.keyword == '') {
                    this.columns = this.dataList;
                }
                else {
                    this.dataList.forEach((item) => {
                        if (item.proname.indexOf(this.keyword) >= 0) {
                            this.columns.push(item);
                        }
                    })
                }
            }
        },
    }
</script>

<style>

.circular {
    height:10px;
    width:10px;
    border-radius:50%;
    position:absolute;
    top:50%;
    transform: translate(0, -50%);
}
</style>