<template>
    <view>
        <view class="search-bar">
            <uni-easyinput
                prefixIcon="search"
                v-model="inputs"
                placeholder="请输入名称"></uni-easyinput>
        </view>
        <view class="dataInfo">
            <view
                class="dataList"
                v-for="(item, index) in searchData"
                :key="index">
                <checkbox-group @change="checkClick(item)">
                    <checkbox :checked="item.checked" />
                </checkbox-group>
                <view class="details">
                    <!-- <view class="img">
						<image :src="item.url"></image>
					</view> -->
                    <view class="text">
                        <text>类型名称：{{ item.typeName }}</text>
                        <text>规格编号：{{ item.typeCode }}</text>
                        <text>当前在用量：{{ item.num }}</text>
                        <view
                            >退料数量：<uni-easyinput
                                style="margin-top: 15rpx"
                                v-model="item.offNum"
                                placeholder="请输入"
                                @change="exitNumChange($event, index)"
                                type="number"></uni-easyinput
                        ></view>
                    </view>
                </view>
                <!-- <view class="action">
					<text @click="reduce(item)">-</text>
					<text>{{item.offNum}}</text>
					<text @click="add(item)">+</text>
				</view> -->
            </view>
        </view>
        <view class="buy" style="background-color: #fff">
            <view class="checked">
                <checkbox-group @tap="checkAll">
                    <checkbox :checked="allChecked" />
                </checkbox-group>
                <text>全选</text>
            </view>
            <view class="total">
                <!-- {{ totalNum }} -->
                <view class="bill" @click="finishCart">
                    <text>提交</text>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    import { basePath } from "../../public";
    export default {
        data() {
            return {
                iptVal: "",
                allChecked: false,
                inputs: "",
                list: [],
                totalFine: "",
                cartList: [],
                agreementId: "",
                submitList: {
                    parentId: "",
                    backApplyDetails: "",
                },
            };
        },
        computed: {
            totalNum() {
                //总计
                var str = 0;
                for (var i = 0; i < this.searchData.length; i++) {
                    if (this.searchData[i].checked) {
                        str += this.searchData[i].num;
                    }
                }
                this.totalFine = str;
                return str;
            },
            searchData: function () {
                //模糊查询
                if (!this.inputs) {
                    return this.list;
                }
                return this.list.filter((item) => {
                    return item.typeName.includes(this.inputs);
                });
            },
        },
        methods: {
            iconClick() {
                console.log(this.iptVal);
            },
            add(item) {
                //加加
                let num = item.offNum;
                /* if (num >= item.num) {
					uni.showToast({
						icon: 'none',
						title: '退料数量不可大于当前在用量！'
					})
				} else { */
                item.offNum = num + 1;
                // }
            },
            reduce(item) {
                //减减
                let num = item.offNum;
                if (num > 1) {
                    num -= 1;
                } else if ((num = 1)) {
                    uni.showToast({
                        icon: "none",
                        title: "该器具无法再减少",
                    });
                }
                item.offNum = num;
            },
            // 单个商品的选择
            checkClick(item) {
                item.checked = !item.checked;
                if (!item.checked) {
                    this.allChecked = false;
                } else {
                    // 判断每一个商品是否是被选择的状态
                    const goods = this.list.every((item) => {
                        return item.checked === true;
                    });
                    if (goods) {
                        this.allChecked = true;
                    } else {
                        this.allChecked = false;
                    }
                }
            },
            checkAll() {
                this.allChecked = !this.allChecked;
                if (this.allChecked) {
                    this.list.map((item) => {
                        item.checked = true;
                    });
                } else {
                    this.list.map((item) => {
                        item.checked = false;
                    });
                }
            },
            finishCart() {
                let that = this;
                that.cartList = that.list.filter((item) => {
                    return item.checked == true && item.offNum > 0;
                });
                console.log(that.cartList);
                if (that.cartList.length == 0) {
                    uni.showToast({
                        icon: "none",
                        title: "请选择退料数量大于0的退料项！",
                    });
                } else {
                    uni.showModal({
                        title: "退料选择",
                        content: "确认提交吗？",
                        confirmText: "提交",
                        success: (modalRes) => {
                            if (modalRes.confirm) {
                                console.log(this.cartList);
                                that.submitList.backApplyDetails =
                                    that.cartList.map((item) => {
                                        return {
                                            typeId: item["typeId"],
                                            preNum: item["offNum"],
                                            createBy:
                                                uni.getStorageSync("userInfo")
                                                    .userid,
                                            companyId: item["companyId"],
                                        };
                                    });
                                // 提交退料清单
                                let setArr = [];
                                that.submitList.backApplyDetails.forEach(
                                    (list) => {
                                        setArr.push(list.companyId);
                                    }
                                );
                                let set = new Set(setArr);
                                console.log(set.size);
                                if (set.size == 1) {
                                    that.submitList.companyId =
                                        that.submitList.backApplyDetails[0].companyId;
                                    console.log(that.submitList);
                                    that.$api.exitMaterial
                                        .subExitMaterial(that.submitList)
                                        .then((res) => {
                                            console.log(res);
                                            if (res.data.code == 200) {
                                                uni.showToast({
                                                    icon: "none",
                                                    title: res.data.msg,
                                                    success: () => {
                                                        uni.navigateBack();
                                                    },
                                                });
                                            } else {
                                                uni.showToast({
                                                    icon: "none",
                                                    title: res.data.msg,
                                                });
                                            }
                                        })
                                        .catch((err) => {
                                            console.log(err);
                                        });
                                } else {
                                    uni.showToast({
                                        icon: "none",
                                        title: "无法同时退料机具设备和调试设备！",
                                    });
                                }
                            }
                        },
                    });
                }
            },
            exitNumChange(e, index) {
                let that = this;
                let numTest = /^\+?[1-9]\d*$/;
                console.log(e, that.list[index].num);
                if (!numTest.test(e)) {
                    uni.showToast({
                        icon: "none",
                        title: "退料数量输入有误！",
                        success: () => {
                            that.list[index].offNum = 0;
                        },
                    });
                } else if (e > that.list[index].num) {
                    uni.showToast({
                        icon: "none",
                        title: "退料数量不得大于当前在用量！",
                        success: () => {
                            that.list[index].offNum = 0;
                        },
                    });
                }
            },
        },
        onLoad(params) {
            let that = this;
            console.log(params);
            that.agreementId = params.agreeId;
            that.submitList.parentId = params.id;
            // 退料物料选择
            that.$api.exitMaterial
                .selectMaterial({
                    agreementId: params.agreeId,
                })
                .then((res) => {
                    console.log(res);
                    if (res.data.code == 200) {
                        if (res.data.data.length == 0) {
                            uni.showToast({
                                icon: "none",
                                title: "当前物料已退完，请重新领料！",
                            });
                        } else {
                            for (let i = 0; i < res.data.data.length; i++) {
                                res.data.data[i].num = Number(
                                    res.data.data[i].num.split(".")[0]
                                );
                                res.data.data[i].offNum = 0;
                            }
                            console.log(res);
                            that.list = res.data.data;
                        }
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    };
</script>

<style>
    body {
        box-sizing: border-box;
        padding-bottom: 10vh;
    }

    .search-bar {
        width: 95%;
        margin: 20rpx auto;
    }

    /deep/uni-checkbox .uni-checkbox-input {
        border-radius: 50%;
    }

    /deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
        border-color: #ddd;
        color: #fff !important;
        background-color: #2dcf8c !important;
    }

    /deep/uni-checkbox .uni-checkbox-input {
        border-color: #ddd;
    }

    /deep/uni-checkbox .uni-checkbox-input:hover {
        border-color: #ddd;
    }

    .search {
        padding-top: 20rpx;
    }

    .search .searchIput {
        background-color: #e6e6e6;
        width: 95%;
        margin: 0 auto;
        height: 72rpx;
        line-height: 72rpx;
        border-radius: 50rpx;
        padding: 0 32rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    .search .searchIput input {
        font-size: 26rpx;
        width: 100%;
        color: grey;
    }

    .search .searchIput image {
        width: 34rpx;
        height: 34rpx;
    }

    .dataInfo {
        width: 95%;
        margin: 0 auto;
    }

    .dataInfo .dataList {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2px solid #f1f1f1;
        padding: 25rpx 0;
    }

    .dataInfo .dataList .details {
        display: flex;
        align-items: center;
        flex: 1;
        font-size: 0;
    }

    .dataInfo .dataList .details .img image {
        width: 200rpx;
        height: 140rpx;
        padding: 0 20rpx;
    }

    .dataInfo .dataList .details .text text {
        color: #000;
        font-size: 23rpx;
        display: block;
        padding: 10rpx 0;
    }

    .dataInfo .dataList .details .text {
        color: red;
        font-size: 25rpx;
    }

    .dataInfo .dataList .action text {
        font-size: 25rpx;
        color: #000;
        border: 1px solid #c8c7cc;
        display: inline-block;
        line-height: 50rpx;
        width: 60rpx;
        text-align: center;
        box-sizing: border-box;
    }

    .dataInfo .dataList .action text:nth-child(2) {
        border-left: none;
        border-right: none;
    }

    .buy {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left: 50%;
        bottom: 0;
        width: 95%;
        transform: translate(-50%, 0);
    }

    .buy .checked {
        display: flex;
        align-items: center;
    }

    .buy .checked text {
        font-size: 25rpx;
        color: #000;
        padding: 0 12rpx;
    }

    .buy .total {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .buy .total .price {
        padding-right: 20rpx;
    }

    .buy .total .price text {
        font-size: 27rpx;
        color: #c8c7cc;
        display: inline-block;
    }

    .buy .total .price text:last-child {
        color: red;
        font-weight: bold;
    }

    .buy .total .bill text {
        font-size: 25rpx;
        color: #fff;
        display: inline-block;
        background-color: red;
        line-height: 70rpx;
        width: 150rpx;
        text-align: center;
    }
</style>
