<template>
    <ifrm ref="ifrm">
        <u-sticky offset-top="-90">
            <uni-forms ref="wrForm" class="formBox">
                <!-- 绑定 -->
                <uni-forms-item name="allegation"><input type="text" v-model="cardNo" @input="onInput"
                        class="uni-input-border" placeholder="流程卡" /></uni-forms-item>
                <uni-forms-item name="allegation"><input type="text" v-model="rackValue" @input="rackInput"
                        class="uni-input-border" placeholder="挂具" /></uni-forms-item>
                <uni-forms-item name="allegation"><input type="text" v-model="feibaValue" @input="feibaInput"
                        class="uni-input-border" placeholder="飞靶" /></uni-forms-item>
                <uni-forms-item name="allegation"><input type="text" v-model="facilityValue" @input="facilityInput"
                        class="uni-input-border" placeholder="设备" /></uni-forms-item>
            </uni-forms>
        </u-sticky>
        <view class="tableBox">
            <t-table>
                <t-tr>
                    <t-td>挂次号</t-td>
                    <t-td><input type="text" v-model="hangNum" /></t-td>
                </t-tr>
            </t-table>
            <uni-card title="流程卡">
                <uni-table border stripe emptyText="暂无更多数据" class="table">
                    <uni-tr>
                        <uni-th align="center">操作</uni-th>
                        <uni-th align="center">车间订单号</uni-th>
                        <uni-th align="center">产品号</uni-th>
                        <uni-th align="center">批次号</uni-th>
                        <uni-th align="center">镀种</uni-th>
                        <uni-th align="center">数量</uni-th>
                        <uni-th align="center">班组</uni-th>
                        <uni-th align="center">当前工序号</uni-th>
                        <uni-th align="center">当前工序</uni-th>
                    </uni-tr>
                    <uni-tr v-for="(item, index) in cardData" :key="index">
                        <uni-td align="center" style="width: 150rpx;"><button size="mini" class="button" type="primary"
                                @click="removeClick(item)">删除</button></uni-td>
                        <uni-td align="center">{{ item.woCode }}</uni-td>
                        <uni-td align="center">{{ item.partCode }}</uni-td>
                        <uni-td align="center">{{ item.batchNo }}</uni-td>
                        <uni-td align="center">{{ item.plate }}</uni-td>
                        <uni-td align="center">{{ item.makeQty }}</uni-td>
                        <uni-td align="center">{{ item.makeTeam }}</uni-td>
                        <uni-td align="center">{{ item.orders }}</uni-td>
                        <uni-td align="center">{{ item.ppsName }}</uni-td>
                    </uni-tr>
                </uni-table>
                <!-- <t-table>
                    <t-tr>
                        <t-td>车间订单号</t-td>
                        <t-td>{{ bindModel.woCode }}</t-td>
                    </t-tr>
                    <t-tr>
                        <t-td>产品号</t-td>
                        <t-td>{{ bindModel.partCode }}</t-td>
                    </t-tr>
                    <t-tr>
                        <t-td>批次号</t-td>
                        <t-td>{{ bindModel.batchNo }}</t-td>
                    </t-tr>
                    <t-tr>
                        <t-td>镀种</t-td>
                        <t-td>{{ bindModel.plate }}</t-td>
                    </t-tr>
                    <t-tr>
                        <t-td>计划员</t-td>
                        <t-td>{{ bindModel.planUser }}</t-td>
                    </t-tr>
                    <t-tr>
                        <t-td>数量</t-td>
                        <t-td>{{ bindModel.makeQty }}</t-td>
                    </t-tr>
                    <t-tr>
                        <t-td>班组</t-td>
                        <t-td>{{ bindModel.makeTeam }}</t-td>
                    </t-tr>
                    <t-tr>
                        <t-td>当前工序号</t-td>
                        <t-td>{{ bindModel.orders }}</t-td>
                    </t-tr>
                    <t-tr>
                        <t-td>当前工序</t-td>
                        <t-td>{{ bindModel.ppsName }}</t-td>
                    </t-tr>
                    <t-tr>
                        <t-td>下一工序号</t-td>
                        <t-td>{{ bindModel.nextOrders }}</t-td>
                    </t-tr>
                    <t-tr>
                        <t-td>下一工序</t-td>
                        <t-td>{{ bindModel.nextPpsName }}</t-td>
                    </t-tr>
                    <t-tr>
                        <t-td>加工状态</t-td>
                        <t-td>{{ bindModel.runStatus }}</t-td>
                    </t-tr>
                </t-table> -->
            </uni-card>
            <uni-card title="挂具信息">
                <uni-table border stripe emptyText="暂无更多数据" class="table">
                    <uni-tr>
                        <uni-th align="center">操作</uni-th>
                        <uni-th align="center">编号</uni-th>
                        <uni-th align="center">名称</uni-th>
                        <uni-th align="center">状态</uni-th>
                    </uni-tr>
                    <uni-tr v-for="(item, index) in rackSetData" :key="index">
                        <uni-td align="center" style="width: 150rpx;"><button size="mini" class="button" type="primary"
                                @click="removeRackClick(item)">删除</button></uni-td>
                        <uni-td align="center">{{ item.rsCode }}</uni-td>
                        <uni-td align="center">{{ item.rsType }}</uni-td>
                        <uni-td align="center">{{ item.rsStatusTitle }}</uni-td>
                    </uni-tr>
                </uni-table>
                <!-- <t-table>
                    <t-tr>
                        <t-td>编号</t-td>
                        <t-td>{{ bsRackSet.rsCode }}</t-td>
                    </t-tr>
                    <t-tr>
                        <t-td>名称</t-td>
                        <t-td>{{ bsRackSet.rsType }}</t-td>
                    </t-tr>
                    <t-tr>
                        <t-td>状态</t-td>
                        <t-td>{{ bsRackSet.rsStatusTitle }}</t-td>
                    </t-tr>
                </t-table> -->
            </uni-card>
            <uni-card title="飞靶">
                <t-table>
                    <t-tr>
                        <t-td>编号</t-td>
                        <t-td>{{ bsFeiBaSet.fsCode }}</t-td>
                    </t-tr>
                    <t-tr>
                        <t-td>名称</t-td>
                        <t-td>{{ bsFeiBaSet.fsType }}</t-td>
                    </t-tr>
                    <t-tr>
                        <t-td>状态</t-td>
                        <t-td>{{ bsFeiBaSet.fsStatusTitle }}</t-td>
                    </t-tr>
                </t-table>
            </uni-card>
            <uni-card title="设备">
                <t-table>
                    <t-tr>
                        <t-td>编号</t-td>
                        <t-td>{{ deEquipmentCard.deviceCode }}</t-td>
                    </t-tr>
                    <t-tr>
                        <t-td>名称</t-td>
                        <t-td>{{ deEquipmentCard.deviceName }}</t-td>
                    </t-tr>
                    <t-tr>
                        <t-td>状态</t-td>
                        <t-td>{{ deEquipmentCard.usedText }}</t-td>
                    </t-tr>
                </t-table>
            </uni-card>
        </view>
        <view class="buttonBox bottomFixed">
            <button class="button" type="primary" @click="submitClick">绑定</button>
        </view>
    </ifrm>
</template>

<script>
    import ifrm from '@/pages/index/ifrm';
    import tTable from '@/components/t-table/t-table.vue';
    import tTh from '@/components/t-table/t-th.vue';
    import tTr from '@/components/t-table/t-tr.vue';
    import tTd from '@/components/t-table/t-td.vue';
    import scan from '../../mixin/scan.js';
    export default {
        mixins: [scan],
        components: {
            ifrm,
            tTable,
            tTh,
            tTr,
            tTd
        },
        data() {
            return {
                cardNo: '',
                oldCardNo: '',
                rackValue: '',
                oldFackValue: '',
                feibaValue: '',
                oldFeibaValue: '',
                facilityValue: '',
                oldFacilityValue: '',
                time: null,
                // bindModel: {},
                bsRackSet: {},
                bsFeiBaSet: {},
                deEquipmentCard: {},
                cardData: [],
                hangNum: null,
                rackSetData: []
            };
        },
        onNavigationBarButtonTap(btn) {
            this.$refs.ifrm.topMenuClick(btn);
        },
        onShow() {},
        methods: {
            getData(code, num) {
                if (!code) return;
                let url = '';
                if (num == 1) {
                    url = 'pdaLoad/loadBindData/' + code;
                } else if (num == 2) {
                    url = 'pdaLoad/getBsRackSetByCode/' + code;
                } else if (num == 3) {
                    url = 'pdaLoad/getBsFeiBaSetByCode/' + code;
                }
                this.$ajax.request({
                    url,
                    method: 'GET',
                    success: data => {
                        console.log(data);
                        if (num == 1) {
                            var bool = true;
                            this.cardData.forEach(item => {
                                if (item.id === data.bindModel.id) {
                                    bool = false;
                                }
                            });
                            if (bool) {
                                this.cardData.push(data.bindModel);
                            }
                        } else if (num == 2) {
                            if (data.planList !== null && data.planList.length > 0) {
                                this.cardData = [...this.cardData, ...data.planList]
                            }
                            this.rackSetData.push(data.bsRackSet);
                            if (data.bsFeiBaSet !== null) {
                                this.bsFeiBaSet = data.bsFeiBaSet;
                            }
                        } else if (num == 3) {
                            this.bsFeiBaSet = data.bsFeiBaSet;
                            if (data.planList !== null && data.planList.length > 0) {
                                this.cardData = [...this.cardData, ...data.planList]
                            }
                            if (data.rsList.length > 0) {
                                this.rackSetData = [...this.rackSetData, ...data.rsList]
                            }
                        }
                        uni.showToast({
                            title: '数据获取成功',
                            icon: 'none'
                        });
                    }
                });
            },

            getEcByDeviceCode(code) {
                this.$ajax.request({
                    url: 'pdaLoad/getEcByDeviceCode',
                    method: 'POST',
                    data: {
                        deviceCode: code
                    },
                    success: data => {
                        this.deEquipmentCard = data;
                        uni.showToast({
                            title: '数据获取成功',
                            icon: 'none'
                        });
                    }
                })
            },
            submitClick() {
                let wpIdList = [];
                let rsIdList = [];
                this.cardData.forEach(item => {
                    wpIdList.push(item.id);
                });
                this.rackSetData.forEach(item => {
                    rsIdList.push(item.rsId);
                });
                this.$ajax.request({
                    url: 'pdaSave/binding',
                    data: {
                        wpIdList,
                        rsIdList,
                        fsCode: this.feibaValue,
                        deviceCode: this.facilityValue,
                        hangNum: this.hangNum
                    },
                    method: 'POST',
                    success: data => {
                        this.hangNum = null;
                        this.cardNo = '';
                        this.oldCardNo = '';
                        this.rackValue = '';
                        this.oldFackValue = '';
                        this.feibaValue = '';
                        this.oldFeibaValue = '';
                        this.facilityValue = '';
                        this.oldFacilityValue = '';
                        this.cardData = [];
                        this.bsRackSet = {};
                        this.bsFeiBaSet = {};
                        this.deEquipmentCard = {};
                        this.rackSetData = []
                        uni.showToast({
                            title: '绑定成功'
                        });
                    }
                });
            },
            removeClick(obj) {
                this.cardData.forEach((item, index) => {
                    if (item.id == obj.id) {
                        this.cardData.splice(index, 1);
                    }
                });
            },
            removeRackClick(obj) {
                this.rackSetData.forEach((item, index) => {
                    if (item.id == obj.id) {
                        this.rackSetData.splice(index, 1);
                    }
                });
            },
            onInput(e) {
                console.log(e.detail.value);
                clearTimeout(this.time);
                if (e.detail.value.length == 0) {
                    this.oldCardNo = '';
                    this.cardNo = e.detail.value;
                }
                if (e.detail.value.length < this.oldCardNo.length) {
                    this.cardNo = e.detail.value;
                    this.oldCardNo = this.cardNo;
                    return;
                }
                this.time = setTimeout(() => {
                    if (this.cardNo.length >= 1) {
                        this.cardNo = e.detail.value.slice(this.oldCardNo.length);
                        this.oldValue = this.cardNo;
                        this.getData(this.cardNo, 1);
                    }
                }, 2000);
            },
            rackInput(e) {
                clearTimeout(this.time);
                if (e.detail.value.length == 0) {
                    this.oldFackValue = '';
                    this.rackValue = e.detail.value;
                }
                if (e.detail.value.length < this.oldFackValue.length) {
                    this.rackValue = e.detail.value;
                    this.oldFackValue = this.rackValue;
                    return;
                }
                this.time = setTimeout(() => {
                    if (this.rackValue.length >= 1) {
                        this.rackValue = e.detail.value.slice(this.oldFackValue.length);
                        this.oldValue = this.rackValue;
                        this.getData(this.rackValue, 2);
                    }
                }, 2000);
            },
            feibaInput(e) {
                clearTimeout(this.time);
                if (e.detail.value.length == 0) {
                    this.oldFeibaValue = '';
                    this.feibaValue = e.detail.value;
                }
                if (e.detail.value.length < this.oldFeibaValue.length) {
                    this.feibaValue = e.detail.value;
                    this.oldFeibaValue = this.feibaValue;
                    return;
                }
                this.time = setTimeout(() => {
                    if (this.feibaValue.length >= 1) {
                        this.feibaValue = e.detail.value.slice(this.oldFeibaValue.length);
                        this.oldValue = this.feibaValue;
                        this.getData(this.feibaValue, 3);
                    }
                }, 2000);
            },
            facilityInput(e) {
                clearTimeout(this.time);
                if (e.detail.value.length == 0) {
                    this.oldFacilityValue = '';
                    this.facilityValue = e.detail.value;
                }
                if (e.detail.value.length < this.oldFacilityValue.length) {
                    this.facilityValue = e.detail.value;
                    this.oldFacilityValue = this.facilityValue;
                    return;
                }
                this.time = setTimeout(() => {
                    if (this.facilityValue.length >= 1) {
                        this.facilityValue = e.detail.value.slice(this.oldFacilityValue.length);
                        this.oldValue = this.facilityValue;
                        this.getEcByDeviceCodeS({deviceCode:this.facilityValue});
                    }
                }, 2000);
            }
        }
    };
</script>

<style scoped lang="scss">
    .uni-forms-item {
        margin-bottom: 6px !important;
    }

    .formBox {
        background-color: #fff;
    }

    .tableBox {
        padding-bottom: 110rpx;
    }

    .bottomFixed {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding-bottom: 20rpx;
        padding-top: 10rpx;
        background-color: #fff;
    }
</style>