<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">
                    <van-swipe-cell v-for="item in resultList" :key="item.name">
                        <div class="result-item" @click="_goto(item)">
                            <div>计划名称：{{item.name}}</div>
                            <div>抽样进度：{{item.summaryCount+'/'+item.samplingQuantity}}</div>
                            <div>状态：{{item.progress}}</div>
                        </div>
                        <template #right>
                            <van-button square type="info" text="认领" class="swipe-cell-btn"
                                        v-if="item.progress==='审批通过'" @click="_receive(item.id)"></van-button>
                            <van-button square type="danger" text="结束" class="swipe-cell-btn" @click="_finish(item)"
                                        v-else></van-button>
                        </template>
                    </van-swipe-cell>
                </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: 0
                },
                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 = 0
                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 = 0
            },
            _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(item) {
                if (item.progress === '审批通过') {
                    this.$router.push({path: '/sampling_task/sampling_task_detail', query: {planId: item.id}})
                } else {
                    this.$router.push({path:'/sampling_task/sampling_location', query: {planId: item.id}})
                }
            },
            _finish(item) {
                if (item.summaryCount === 0) {
                    this.$dialog.confirm({
                        title: '提示',
                        message: '您还未添加抽样单，是否继续？',
                    }).then(() => {
                        this._finishOk(item.id)
                    }).catch(() => {
                        // on cancel
                    });
                } else {
                    this._finishOk(item.id)
                }

            },
            _finishOk: async function (id) {
                let result = await samplingPlan.acceptFinish({planId: id, type: 2})
                if (result) {
                    this.$toast('操作成功！');
                    this._refresh()
                }
            },
            _receive: async function (id) {
                let result = await samplingPlan.acceptFinish({planId: id, type: 1})
                if (result) {
                    this.$toast('操作成功！');
                    this._refresh()
                }
            },
        }
    }
</script>

<style scoped>

</style>
