<template>
    <div class="container">
        <form action="" class="container-searchNumber">
            <van-search @search="onSearch" style="width: 100%;" v-model="params.search" placeholder="请输入批次号" />
        </form>
        <ScrollRefresh style="background-color: #f0eff4;" height="calc(100vh - 99px)" ref="scrollRefresh"
            :request="request">
            <template v-slot="slotProps">
                <div class="batch" v-for="(item, index) in slotProps.list" :key="index">
                    <div class="batch-top">
                        <div class="batch-top-dispatchBatchNo">批次号:{{ item.dispatchBatchNo }}</div>
                        <div class="jindu">派送进度 {{ item.signed }}/{{ item.sumAnd }}</div>
                    </div>
                    <!-- 各个运单 -->
                    <div class="batchss">
                        <div class="batch-middel" v-for="(unfold, index) in batchsFilter(item.list, item.openCard) "
                            :key="index">
                            <div class="batch-middel-text">
                                <div class="batch-middel-text-style"
                                    style="text-align: left; width: 100%; margin-left: -6px; display: flex;justify-content: space-between; align-items: center;">
                                    <div>【{{ unfold.expressCompany }}】运单号:{{ unfold.expressNo }}</div>
                                    <div class="batch-middel-text-style-corner"
                                        :style="{ color: unfold.expressStatus == 0 ? '#00c4b8' : (unfold.expressStatus == 1 ? '#4fc1f1' : (unfold.expressStatus == 2 ? '#00c4b8' : '#ee0a24')) }">
                                        {{ unfold.expressStatus == 0 ? '已入库' : `${unfold.expressStatus == 1 ? '派送中' :
                                            `${unfold.expressStatus == 2 ? '已签收' : '滞留件'}`}` }}</div>
                                </div>
                                <div style="display: flex; justify-content:  space-between; flex-wrap: wrap;">
                                    <div class="batch-middel-text-style">收件人：{{ unfold.recipient }}</div>
                                    <div class="batch-middel-text-style">部门：{{ unfold.departmentId }}</div>
                                    <div class="batch-middel-text-style">楼层：{{ unfold.floorNum }}</div>
                                    <div class="batch-middel-text-style">座位号：{{ unfold.sendSeat }}</div>
                                    <div style="display: flex; align-items: center;" class="batch-middel-text-style">
                                        联系方式:{{ unfold.phone }}
                                        <a :href="'tel:' + unfold.phone" style="padding-left: 6px;" type="info" plain
                                            size="mini"><van-icon color="#4fc1f1" size="14" name="phone-o" /></a>
                                    </div>
                                    <div v-if="unfold.expressStatus == '4' || unfold.expressStatus == '2'"
                                        class="batch-middel-text-style" style="width: 100%;">滞留原因：{{ unfold.sendRemark
                                        }}</div>
                                </div>
                            </div>
                            <div class="batch-middel-bottom">
                                <van-button v-if="unfold.expressStatus !== '2'" class="batch-middel-bottom-buttom"
                                    size="small" plain type="info" @click="onReceiving(unfold)">签收
                                </van-button>
                                <van-button v-if="unfold.expressStatus !== '4' && unfold.expressStatus !== '2'"
                                    class="batch-middel-bottom-buttom" size="small" plain type="danger"
                                    @click="onSureRetention(unfold)">设为滞留</van-button>
                            </div>
                        </div>
                    </div>

                    <div @click="onUnfold(item)" class="batch-bottom">
                        <div v-if="item.sumAnd !== 1">
                            {{ item.openCard ? "收起....." : "展开....." }}
                        </div>
                    </div>
                </div>
            </template>
        </ScrollRefresh>

        <!-- 签收 -->
        <van-popup position="bottom" v-model="receiving" style="width: 100%; height: 93%;">
            <div style="font-size: 20px; text-align: center; margin-top: 12px;">派件签收</div>
            <van-form @submit="onReceipt">
                <van-field name="expressNo" label="运单号" :value="onReceivingVlaue.expressNo" readonly />
                <van-field label="快件类型" :value="onReceivingVlaue.expressType" readonly />
                <van-field label="快递公司" :value="onReceivingVlaue.expressCompany" readonly />
                <van-field label="部门" :value="onReceivingVlaue.departmentId" readonly />
                <van-field label="座位号" :value="onReceivingVlaue.sendSeat" readonly />
                <van-field label="收件人" :value="onReceivingVlaue.recipient" readonly />
                <van-field label="楼层" :value="onReceivingVlaue.floorNum" readonly />
                <van-field label="联系方式" :value="onReceivingVlaue.phone" readonly />

                <van-field readonly clickable name="picker" :value="selectedOption" label="签收类型" placeholder="点击签收类型"
                    @click="showPicker = true" />
                <van-popup v-model="showPicker" position="bottom">
                    <van-picker show-toolbar :columns="options" @confirm="onConfirm" @cancel="showPicker = false" />
                </van-popup>
                <van-field v-if="wer == '他人签收'" v-model="getOtherPhone" :rules="[{ required: true }]" label="代取手机号"
                    placeholder="请输入代取手机号" />
                <van-field name="uploader" :rules="[{ required: true, message: '请上传图片' }]" label="签收照片">
                    <template #input>
                        <van-uploader v-model="uploader" :after-read="afterRead" :before-read="beforeRead"
                            :max-count="1" />
                    </template>
                </van-field>

                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">签收完成</van-button>
                </div>
            </van-form>
        </van-popup>

        <!-- 设为滞留 -->
        <van-popup position="bottom" v-model="retention" style="width: 100%; height: 85%;">
            <div style="font-size: 20px; text-align: center;  margin-top: 12px;">派件滞留</div>
            <van-form @submit="onSetRetention">
                <van-field name="expressNo" label="运单号" :value="onSureRetentionVlaue.expressNo" readonly />
                <van-field label="快件类型" :value="onSureRetentionVlaue.expressType" readonly />
                <van-field label="快递公司" :value="onSureRetentionVlaue.expressCompany" readonly />
                <van-field label="部门" :value="onSureRetentionVlaue.departmentId" readonly />
                <van-field label="座位号" :value="onSureRetentionVlaue.sendSeat" readonly />
                <van-field label="收件人" :value="onSureRetentionVlaue.recipient" readonly />
                <van-field label="楼层" :value="onSureRetentionVlaue.floorNum" readonly />
                <van-field label="联系方式" :value="onSureRetentionVlaue.phone" readonly />

                <van-field readonly clickable name="picker" :value="selectedRetention" label="滞留原因"
                    placeholder="请输入滞留原因" @click="showRetention = true" />
                <van-popup v-model="showRetention" position="bottom">
                    <van-picker show-toolbar :columns="Retention" @confirm="onRetention"
                        @cancel="showRetention = false" />
                </van-popup>
                <van-field v-if="ert == '其他原因'" v-model="otherCause" label="其他原因" :rules="[{ required: true }]"
                    placeholder="请输入其他原因" />


                <div style="margin: 16px;">
                    <van-button round block native-type="submit" type="danger">设为滞留</van-button>
                </div>
            </van-form>
        </van-popup>
    </div>
</template>

<script>
import ScrollRefresh from './ScrollRefresh.vue';
import { appOutboundInquiry, appGetTheDetails, appSetStrands, appDelivery, appUploadTheSignature } from '@/api/index'
export default {
    name: 'waitsent',
    components: {
        ScrollRefresh
    },
    data() {
        return {
            getOtherPhone: '',//他人签收
            otherCause: '',//滞留原因
            receiving: false,//签收
            retention: false,//滞留
            selectedOption: '本人签收', // 设置为空字符串，等待选择
            selectedRetention: '',
            value: '',
            options: ['本人签收', '他人签收'],
            Retention: ['无法联系收件人', '其他原因'],
            showPicker: false,
            showRetention: false,
            wer: '',
            ert: '',
            uploader: [],
            params: {
                search: '', //'SF202303221917',
            },
            onReceivingVlaue: {},//点击签收存放的数据
            onSureRetentionVlaue: {},//点击签收滞留的数据
            Agent: '',//是否待签(后续判断)
            getFileUrl: '',//返回的图片地址
        };
    },
    methods: {
        //
        batchsFilter(list, openCard) {
            if (Array.isArray(list) && list.length > 0) {
                if (!openCard) {
                    return [list[0]]
                }
                return list
            }
            return []
        },
        // 搜索批次号
        async onSearch() {
            this.$refs.scrollRefresh.onRefresh()
        },
        async request(_params) {
            let parmas = {
                dispatchBatchNo: this.params.search, // 批次号
                deliveryPeopleId: localStorage.getItem('courierId'), //派送员id
                isFinish: '2',//完成 1已完成 2未完成
                ..._params
            }
            const res = await appOutboundInquiry({ ...parmas }, { emulateJSON: true, loading: true, message: "查询中..." })
            res.data = res.data.map((item) => {
                item.list = [item.list]
                return item
            })
            return res
        },
        // 签收控制显示
        onReceiving(value) {
            this.onReceivingVlaue = value
            this.receiving = true;
            this.selectedOption = this.options[0];
            this.$refs.scrollRefresh.onRefresh()
        },
        // 签收选择确认弹框
        onConfirm(value) {
            this.selectedOption = value;
            this.showPicker = false;
            this.wer = value
        },
        // 滞留控制显示
        onSureRetention(value) {
            this.onSureRetentionVlaue = value
            this.retention = true;
        },
        // 确定滞留
        async onSetRetention(value) {
            if (value.picker == '') {
                this.$toast('请输入滞留原因')
                return
            }
            let params = {
                expressNo: value.expressNo,
                sendRemark: value.picker
            }
            if (value.picker == '其他原因') {
                params.sendRemark = this.otherCause
            }
            const res = await appSetStrands({ ...params }, { loading: true, message: '滞留中' })
            if (res.code == 0) {
                this.$toast('滞留完成')
                this.retention = false
            }
            this.otherCause = ''
            this.$refs.scrollRefresh.onRefresh()
        },
        // 原因
        onRetention(value) {
            this.selectedRetention = value;
            this.showRetention = false;
            this.ert = value
        },
        // 文件读取完成后的钩子
        async afterRead(file) {
            console.log(file)
            const formData = new FormData();
            formData.append('file', file.file); // 这里的 'file' 是后端接收文件的字段名
            const res = await appUploadTheSignature(formData)
            if (res.code == 0) {
                this.getFileUrl = res.data
            } else {
                this.$toast('上传图片失败')
            }

        },
        beforeRead(file) {
            // 在这里可以添加对文件的校验逻辑
            // 如果返回 true, 则继续读取文件
            return true;
        },
        // 签收完成
        async onReceipt(value) {
            console.log('123')
            console.log(value)
            if (value.picker == '他人签收') {
                this.Agent = 2
            } else {
                this.Agent = 1
            }
            let params = {
                signEnclosureImg: this.getFileUrl,//签署图片  
                deliveryId: value.expressNo,  //快递单号
                deliveryPeopleId: localStorage.getItem('courierId'), //派件员id
                isCollectAgent: this.Agent,//是否代签
                collectAgentNumber: value.picker // 原因
                // expressNo: value.expressNo,
            }
            if (value.picker == '他人签收') {
                params.collectAgentNumber = this.getOtherPhone
            }
            const res = await appDelivery({ ...params }, { loading: true, message: '签收中' })
            if (res.code == 0) {
                this.$toast('签收完成')
                this.receiving = false
            } else {
                this.$toast('签收失败')
            }
            this.uploader = []
            this.$refs.scrollRefresh.onRefresh()

        },
        // 展开
        async onUnfold(waite) {
            const data = await appGetTheDetails({ dispatchBatchNo: waite.dispatchBatchNo })
            waite.list = data.data
            this.$set(waite, "openCard", !waite.openCard)
        }
    },
}


</script>

<style lang="less" scoped>
* {
    font-size: 12px;
}

.container {
    height: 100%;

    &-searchNumber {
        display: flex;
        justify-content: space-between;
        background-color: #fff;


        &-icon {
            margin: 19px 8px 0 0px;
        }
    }

    .batch {
        background-color: #fff;
        margin: 10px;
        border-radius: 4px;

        &-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 10px 0px 10px;

            &-dispatchBatchNo {
                font-size: 12px;

            }

            .jindu {
                color: #4fc1f1
            }
        }

        &-middel {
            // height: 120px;
            background-color: #f7f8fa;
            border-radius: 12px;
            margin: 10px 6px 0px;
            padding-bottom: 8px;

            &-text {
                padding: 0px 10px;

                &-style {
                    width: 50%;
                    font-size: 12px;
                    padding-top: 8px;

                    &-corner {
                        width: 41px;
                        margin-right: -14px;
                    }
                }

            }

            &-bottom {
                display: flex;
                justify-content: flex-end;
                padding-top: 5px;

                &-buttom {
                    width: 70px;
                    height: 25px;
                    border-radius: 6px;
                    margin-right: 5px
                }
            }
        }

        &-bottom {
            padding: 10px 4px;
            color: #169bd5;
        }
    }
}
</style>
