<template>
    <view>
        <view class="search">
            <input placeholder="按工单号" class="input" :value="workOrderNum" />
            <input placeholder="手机号" class="input" :value="mobile" />
            <!-- <van-search input-class="custom-search"   shape="round" use-left-icon-slot="false" value="{{ value }}" placeholder="按工单号" /> -->
            <!-- <van-search custom-style="custom-search" shape="round" use-left-icon-slot="false" value="{{ value }}" placeholder="手机号" /> -->
            <view class="filter" @tap="handelShow">
                <text v-if="statusType == ''">办理状态</text>
                <text>{{ statusType }}</text>
            </view>
            <view class="btn">筛选</view>
        </view>
        <view class="section_5">
            <scroll-view :scroll-y="true" scroll-into-view="scrollToHere" style="width: 100%; height: 90vh" :lower-threshold="lowerThreshold" @scrolltolower="onScrollToLower">
                <view class="list_1" v-for="(item, index) in eventList" :key="item.icEventId">
                    <view class="section_1-0">
                        <view class="flex-x">
                            <view class="workorder">工单号：{{ item.workOrderNum }}</view>
                            <view
                                :class="
                                    item.operationType === '未联系当事人'
                                        ? 'status-red'
                                        : item.operationType === '已联系当事人'
                                        ? 'lan'
                                        : item.operationType === '办理中'
                                        ? ' .status-cycn'
                                        : item.operationType === '已办结待审核'
                                        ? 'status-orange'
                                        : item.operationType == '已审核归档'
                                        ? 'status-grey'
                                        : 'status-grey'
                                "
                            >
                                {{ item.operationType }}
                            </view>
                        </view>
                        <view class="context">
                            {{ item.eventContent }}
                        </view>
                        <view class="flex-x1">
                            <view class="phonenName">来电人：{{ item.name }} {{ item.mobile }}</view>
                            <view class="btn">办理</view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <van-picker class="picker-bottom" show-toolbar v-if="status" :columns="columns" @change="onChange" @cancel="onCancel" @confirm="onConfirm" />
    </view>
</template>

<script>
// subpages/HotlineCompletion/pages/HotlineCompletion.js
import { showRecord, icEventList } from '../../../utils/api';
export default {
    data() {
        return {
            pageSize: 10,
            pageNo: 1,
            eventList: [],
            workOrderNum: '',
            status: false,
            columns: [],
            statusType: '',

            handleList: [
                {
                    value: '8',
                    label: '未联系当事人'
                },
                {
                    value: '9',
                    label: '已联系当事人'
                },
                {
                    value: '10',
                    label: '办理中'
                },
                {
                    value: '11',
                    label: '已办结待审核'
                },
                {
                    value: '12',
                    label: '已审核归档'
                }
            ],

            mobile: '',
            lowerThreshold: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.showRecordData();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        async showRecordData() {
            console.log('sd as');
            let parm = {
                pageSize: this.pageSize,
                pageNo: this.pageNo
            };
            await icEventList(parm).then((res) => {
                this.setData({
                    eventList: res.data.list
                });
                console.log(this.eventList);
            });
        },

        handelShow() {
            this.setData({
                status: true,
                columns: this.handleList.map((item) => item.label) // 映射出显示的选项
            });
        },

        onChange(event) {
            const { value } = event.detail; // 获取选中的值
            this.setData({
                statusType: value // 更新选中的值
            });
        },

        // 控制 picker 显示或隐藏
        togglePicker() {
            this.setData({
                status: !this.status
            });
        },

        onCancel() {
            console.log('54354');
            this.setData({
                status: false // 关闭 picker
            });
        },

        onConfirm() {
            this.setData({
                status: false // 关闭 picker
            });

            console.log('确认按钮点击');
        },

        onScrollToLower() {
            console.log('占位：函数 onScrollToLower 未声明');
        }
    }
};
</script>
<style>
page {
    width: 100%;
    overflow-y: auto;
    background-color: #f7f7f7;
}
.search {
    height: 110rpx;
    width: 100%;
    padding: 0 22rpx;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 20rpx;
    box-sizing: border-box;
}
.btn {
    width: 120rpx;
    height: 66rpx;
    line-height: 66rpx;
    background: #3a80e7;
    border-radius: 33rpx;
    color: #fff;
    text-align: center;
}
.btn1 {
    width: 120rpx;
    height: 50rpx;
    background: #3a80e7;
    border-radius: 33rpx;
    color: #fff;
    text-align: center;
    line-height: 50rpx;
}

.section_5 {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 20rpx;
}
.list_1 {
    width: 700rpx;
    /* height: 603rpx; */
    /* flex-direction: column; */
    display: flex;
    /* width: 100%; */
    margin-bottom: 20rpx;
}
.section_1-0 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20rpx;
    width: 710rpx;
    display: flex;
    flex-direction: column;
    padding: 0rpx 30rpx 0 30rpx;
}
.workorder {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #999999;
}
.status-red {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    color: #ff3c3c;
}
.status-blue {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    color: #04b8ad;
}
.status-cycn {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    color: #3974f6;
}

.status-orange {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    color: #ff850d;
}
.status-grey {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    color: #999999;
}
.custom-search {
    width: 20rpx;
}
.input {
    padding: 0 20rpx;
    width: 120rpx;
    height: 57rpx;
    background: rgba(193, 193, 193, 0.16);
    border-radius: 28rpx;
    border: 1px solid #dbdbdb;
    align-items: center;
}
.flex-x {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding: 15rpx 0 15rpx 0;
}
.flex-x1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding: 0 0 15rpx 0;
}
.context {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    color: #333333;
}
.phonenName {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
}
.filter {
    padding: 0 20rpx;
    width: 120rpx;
    height: 57rpx;
    background: rgba(193, 193, 193, 0.16);
    border-radius: 28rpx;
    border: 1px solid #dbdbdb;
    align-items: center;
    line-height: 57rpx;
}
.picker-bottom {
    position: fixed; /* 固定在页面底部 */
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* 确保在最上层显示 */
}
</style>
