<template>
    <div>
        <search-bar label="计划名称"
                    ref="searchBar"
                    highSearch
                    @search="_search"
                    @high-search="_highSearch"
                    @clear-high="_clearHigh">
            <template #highSearch>
                <van-field v-model="formObj.name" label="计划名称" placeholder="请输入计划名称" clearable></van-field>
                <datetime-field label="计划开始日期" v-model="formObj.planDateBegin" ></datetime-field>
                <datetime-field label="计划结束日期" v-model="formObj.planDateEnd"></datetime-field>
                <van-field v-model="formObj.uname" label="登记人" placeholder="请输入登记人" clearable></van-field>
                <datetime-field label="登记开始日期" v-model="formObj.ctimeBegin"></datetime-field>
                <datetime-field label="登记结束日期" v-model="formObj.ctimeEnd"></datetime-field>
            </template>
        </search-bar>
        <div class="layout-cont-sh">
            <!--下拉刷新  https://vant-contrib.gitee.io/vant/#/zh-CN/pull-refresh-->
            <van-pull-refresh v-model="refreshing" @refresh="_refresh">
                <!--上拉加载 https://vant-contrib.gitee.io/vant/#/zh-CN/list-->
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="_load">
                    <div class="result-item" v-for="item in resultList" :key="item.name" @click="_goto(item.id)">
                        <div>计划名称：{{item.name}}</div>
                        <div>抽样进度：{{item.summaryCount+'/'+item.samplingQuantity}}</div>
                        <div>状态：{{item.progress}}</div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
    import {samplingPlan} from '../../api'

    export default {
        components: {},
        data() {
            return {
                formObj: {
                    name: '',
                    planDateBegin: '',
                    planDateEnd: '',
                    uname: '',
                    ctimeBegin: '',
                    ctimeEnd: '',
                    flag: 1
                },
                key: '',
                resultList: [],
                page: 1,
                rows: 10,
                refreshing: false,//刷新中...
                loading: false,//加载中...
                finished: false,//没有更多数据
            }
        },
        mounted() {
            this._getData()
        },
        methods: {
            //简单查询 清空高级查询条件 赋值简单查询数据
            _search(value) {
                this.key = value
                this.formObj = this.$resetFields(this.formObj)
                this.formObj.flag = 1
                this._refresh()
            },
            //高级搜索 清空key 查询
            _highSearch() {
                this.key = ''
                if (this._valParams()) {
                    this.$refs.searchBar._hideHighSearch()
                    this._refresh()
                }
            },
            _valParams() {
                if (this.formObj.planDateBegin === '' && this.formObj.planDateEnd !== '') {
                    this.$toast('请选择计划开始日期！')
                    return false
                } else if (this.formObj.planDateBegin !== '' && this.formObj.planDateEnd === '') {
                    this.$toast('请选择计划结束日期！')
                    return false
                } else if (this.formObj.planDateBegin !== '' && this.formObj.planDateEnd !== '' && (new Date(this.formObj.planDateBegin) > new Date(this.formObj.planDateEnd))){
                    this.$toast('计划开始日期不能大于计划结束日期！')
                    return false
                }
                if (this.formObj.ctimeBegin === '' && this.formObj.ctimeEnd !== '') {
                    this.$toast('请选择登记开始日期！')
                    return false
                } else if (this.formObj.ctimeBegin !== '' && this.formObj.ctimeEnd === '') {
                    this.$toast('请选择登记结束日期！')
                    return false
                } else if (this.formObj.ctimeBegin !== '' && this.formObj.ctimeEnd !== '' && (new Date(this.formObj.ctimeBegin) > new Date(this.formObj.ctimeEnd))){
                    this.$toast('登记开始日期不能大于登记结束日期！')
                    return false
                }
                return true
            },
            _clearHigh() {
                this.formObj = this.$resetFields(this.formObj)
                this.formObj.flag = 1
            },
            _searchParams() {
                let data = {
                    page: this.page,
                    rows: this.rows,
                    ...this.formObj
                };
                if (this.key) {
                    data.name = this.key
                }
                return this.$serializeForm(data)
            },
            _getData: async function () {
                let result = await samplingPlan.pageApp(this._searchParams())
                this.resultList = [...(this.page === 1 ? [] : this.resultList), ...result.records]
                this.refreshing = false
                this.loading = false
                if (this.resultList.length === result.total) {
                    this.finished = true
                }
            },
            _refresh() {
                this.page = 1;
                this._getData()
            },
            _load() {
                this.page = this.page + 1;
                this._getData()
            },
            _goto(id) {
                this.$router.push({path:'/sampling_list/sampling_list',query:{planId:id}})
            },
        }
    }
</script>

<style scoped>

</style>
