<template>
    <div class="main_box">
        <navbar title="历史走访记录"></navbar>
        <div class="wrapper">
            <div class="search-input">
                <div class="search_input_item">
                    <van-search type="text" placeholder="请选择日期" v-model="search.startTimeMonth" left-icon=""
                        class="special-search" readonly @click="showDatePicker = true" right-icon="">
                        <template #right-icon>
                            <van-icon name="arrow-down" size="16" v-if="!search.startTimeMonth" />
                            <van-icon name="clear" size="16" v-else @click.stop="clearOption('startTimeMonth')" />
                        </template>
                    </van-search>
                    <van-popup v-model:show="showDatePicker" position="bottom">
                        <van-datetime-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" type="year-month"
                            title="选择日期" @confirm="onConfirmDate" @cancel="showDatePicker = false"></van-datetime-picker>
                    </van-popup>
                </div>
                <div class="search_input_item">
                    <van-search type="text" placeholder="请选择走访类型" v-model="search.visitType" left-icon=""
                        class="special-search" readonly @click="showVisitTypePicker = true" right-icon="">
                        <template #right-icon>
                            <van-icon name="arrow-down" size="16" v-if="!search.visitType" />
                            <van-icon name="clear" size="16" v-else @click.stop="clearOption('visitType')" />
                        </template>
                    </van-search>
                    <van-popup v-model:show="showVisitTypePicker" position="bottom">
                        <van-picker show-toolbar :columns="visitTypeList" @cancle="showVisitTypePicker = false"
                            :value-key="'label'" @confirm="onVisitTypeUser" @cancel="cancelVisitType"></van-picker>
                    </van-popup>
                </div>
            </div>
            <div class="search_input">
                <van-search type="text" :left-icon="null" v-model="search.custName" placeholder="请输入"
                    @clear="handleSearch()" @keyup.enter.native="handleSearch()" />
                <div class="searchbtn_box">
                    <div class="search_btn" @click="handleSearch">
                        <van-icon name="search" class="icon"></van-icon>
                    </div>
                    <div class="search_btn reset" @click="resetForm">
                        <van-icon name="cross" class="icon"></van-icon>
                    </div>
                </div>
            </div>
            <div class="title">
                <span>共有</span>
                <span class="num">{{ total }}</span>
                <span>条走访记录</span>
            </div>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false"
                    @load="onLoad">
                    <div class="item" v-for="(item, index) in list" :key="index">
                        <div class="item_top" @click="handleGoHistoryDetail(item)">
                            <div class="item_top_left">
                                <div class="userMan_box" v-if="item.custType == '0'">
                                    <van-icon name="manager item_user"></van-icon>
                                </div>
                                <div class="icon_box" v-if="item.custType == '1'">
                                    <img src="../../images/home/sh.png" alt="" style="width: 20px;height: 20px;">
                                </div>
                                <div class="userMan_box" v-if="item.custType == '2'">
                                    <img src="../../images/part_one/icon_company.png" alt=""
                                        style="width: 15px;height: 15px;">
                                </div>
                                <div class="item_name">{{ item.custName }}</div>
                            </div>
                            <div class="zfr">{{ (item.duration).toFixed(2) }}</div>
                        </div>
                        <div class="middle">
                            <div class="zfr middle_one">走访人：<span class="khjl">{{ item.userName }}</span></div>
                            <div class="zfr middle_two">任务名称：<span class="khjl">{{ item.campaignName }}</span></div>
                        </div>
                        <div class="main">
                            <div class="main_item">
                                <div class="main_item_top">
                                    <div>打卡签到</div>
                                    <div class="zc_tag">正常</div>
                                    <div class="qdsj">{{ item.signInTime }}</div>
                                </div>
                                <div class="main_item_top">
                                    <div>打卡签退</div>
                                    <div class="zc_tag">正常</div>
                                    <div class="qdsj">{{ item.signOutTime }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>
<script>
import navbar from '../../components/navbar/navbar.vue';
import { getRecordtUser } from "@/service/api/visiting";
import {
    Tab,
    Icon,
    Search,
    List,
    PullRefresh,
    Field, Popup, DatetimePicker, Picker,
} from 'vant';
export default {
    data() {
        return {
            search: {
                startTimeMonth: '',
                visitType: '',
                custName: '',
            },
            showDatePicker: false,
            currentDate: new Date(),
            minDate: new Date(1900, 0, 1),
            maxDate: new Date(),
            showVisitTypePicker: false,
            visitTypeList: [
                { value: '企业走访', label: '企业走访' },
                { value: '商户走访', label: '商户走访' },
                { value: '个人走访', label: '个人走访' },
                { value: '收单商户走访', label: '收单商户走访' },
                { value: '域外商会走访', label: '域外商会走访' },
                { value: '催收走访', label: '催收走访' },
                { value: '其他走访', label: '其他走访' },
            ],
            list: [
                {
                    custGender: '男',
                    custType: '0',
                    qdTime: '2024-10-20 10:30:30'
                }, {
                    custGender: '男',
                    custType: '0',
                    qdTime: '2024-10-20 10:30:30'
                }, {
                    custGender: '男',
                    custType: '0',
                    qdTime: '2024-10-20 10:30:30'
                }, {
                    custGender: '男',
                    custType: '0',
                    qdTime: '2024-10-20 10:30:30'
                },
            ],
            pageNum: 1,
            pageSize: 5,
            custPattern: '0',
            refreshing: false,
            loading: false,
            finished: false,
            currentPage: 1,
            total:0,
        }
    },
    components: {
        navbar: navbar,
        VanTab: Tab,
        VanSearch: Search,
        VanList: List,
        VanPullRefresh: PullRefresh,
        VanField: Field,
        VanPopup: Popup,
        VanDatetimePicker: DatetimePicker,
        VanPicker: Picker,
        VanIcon: Icon,
    },
    created() {
        this.initList()
    },
    methods: {
        async initList() {

            if (this.currentPage === 1) {
                this.list = [];
            }
            const params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                custName: this.search.custName,
                startTimeMonth: this.search.startTimeMonth,
                visitType: this.search.visitType,
            }
            const res = await getRecordtUser(params)
            console.log(res, 'ressss')

            if (res.code == 200) {
                if (this.refreshing) {
                    this.refreshing = false;
                }
                this.loading = false;
                if (res.rows) {

                    this.list = params.pageNum == "1" ? res.rows : [...this.list, ...res.rows];

                    if (this.list.length == res.total) {
                        this.finished = true;
                    }
                    this.currentPage++;
                    this.total=res.total;
                } else {
                    this.list = []
                    this.finished = true;
                }
            }
        },
        //下拉刷新
        onRefresh() {

            this.list = [];
            this.finished = false; //解除上拉加载之后数据不能再次上拉
            this.currentPage = 1;
            this.pageNum = this.currentPage;
            this.initList();
        },
        //上拉加载
        onLoad() {
            this.pageNum = this.currentPage + "";
            this.initList();
        },
        handleSearch() {
            this.onRefresh();
            // this.list = [];
            // this.initList();
        },
        resetForm() {
            this.search.custName = ''
            this.search.startTimeMonth = ''
            this.search.visitType = ''
            this.initList();
        },
        clearOption(key) {
            this.search[key] = "";
            this[key] = undefined;
            // this.initList();
            this.handleSearch();
        },
        formatDate(date) {
            if (date.getMonth() + 1 < 10) {
                return `${date.getYear() + 1900}-0${date.getMonth() + 1}`;
            } else {
                return `${date.getYear() + 1900}-${date.getMonth() + 1}`;
            }

        },
        onConfirmDate(value) {
            this.search.startTimeMonth = this.formatDate(value);
            // this.initList();
            this.showDatePicker = false;
            this.handleSearch();
        },
        onVisitTypeUser(value) {
            this.search.visitType = value.value
            // this.initList();
            this.showVisitTypePicker = false
            this.handleSearch();
        },
        cancelVisitType() { this.showVisitTypePicker = false },
        handleGoHistoryDetail(item) { 
            sessionStorage.setItem("historyDetaiObj", JSON.stringify({
                recordId:item.recordId
            }));
            this.$router.push('/historyDetail')
        },
    }
}


</script>

<style lang="less" scoped>
.wrapper {
    padding-top: 46px;
    min-height: 100vh;
    font-size: 16px;
    padding-bottom: 60px;

}

.search-input {
    display: flex;
    justify-content: space-between;

    /deep/ .van-search {
        padding: 5px 12px;
    }
}

.search_input {
    margin-top: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    /deep/ .van-search {
        flex: 1;
    }
}

.searchbtn_box {
    margin-top: 3px;
    display: flex;

    align-items: center;
}

.search_input_item {
    width: 49.2%;
}


.title {
    font-size: 12px;
    color: rgb(140, 140, 140);
    padding: 15px;
}

.num {
    color: red;
}

.item {
    background-color: #fff;
    padding: 15px;
    margin-top: 3px;
}

.item_top {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.item_top_left {
    display: flex;
    align-items: center;
}

.item_name {
    margin-left: 10px;
}

.zfr {
    margin-top: 10px;
    color: rgb(140, 140, 140);
    font-size: 12px;
}

.khjl {
    color: black;
}

.userMan_box {
    background-color: rgb(35, 114, 235);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 5px;
    color: #fff;
}

.userWoMan_box {
    background-color: rgb(252, 123, 80);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 5px;
    color: #fff;
}

.middle {
    display: flex;
    justify-content: space-between;
}


.middle_one {
    width: 40%;
}

.middle_two {
    width: 57%;
}

.main_item {
    background-color: rgb(249, 249, 250);

    padding: 15px;
}

.main_item_top {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.zc_tag {
    border: 1px solid rgb(70, 130, 255);
    color: rgb(70, 130, 255);
    font-size: 12px;
    padding: 3px 8px;
    margin-left: 10px;
    border-radius: 4px;
}

.qdsj {
    margin-left: 15px;
    color: #8c8c8c;
    font-size: 12px;
}

.main {
    margin-top: 10px;
    width: 85%;
}

.search_btn {
    background-color: rgb(24, 144, 255);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    color: #fff;
    font-size: 20px;

    .icon {
        display: inline-block;
        width: 40px;
        text-align: center;
    }
}

.reset {
    background: #f7f8fa;
    color: rgba(0, 0, 0, 0.45);
    margin-left: 3px;
    margin-right: 8px;
}</style>