<template>
    <customer-navBar-layout>
        <template #navBar>
            <van-nav-bar v-if="showCheck"
                         :title="$route.meta.title"
                         right-text="取消"
                         left-arrow
                         @click-left="_back"
                         @click-right="_hideCheck">
            </van-nav-bar>
            <van-nav-bar
                    v-else
                    :title="$route.meta.title"
                    right-text="添加"
                    left-arrow
                    @click-left="_back"
                    @click-right="_add"
            ></van-nav-bar>
        </template>
        <template #content>
            <search-bar label="计划名称" ref="searchBar"
                        highSearch @search="_search" @high-search="_highSearch"
                        @clear-high="_clearHigh">
                <template #highSearch>
                    <van-field v-model="formObj.name" label="计划名称" placeholder="请输入计划名称"></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="请输入登记人"></van-field>
                    <datetime-field label="登记开始日期" v-model="formObj.ctimeBegin"></datetime-field>
                    <datetime-field label="登记结束日期" v-model="formObj.ctimeEnd"></datetime-field>
                    <picker-field label="状态" v-model="formObj.progress" :columns="statusList"
                                  show-key="text"></picker-field>
                </template>
            </search-bar>
            <div class="layout-cont-sh" :class="{'layout-cont-sh-btn':showCheck}">
                <!--下拉刷新  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-checkbox-group v-model="checkListValue" ref="checkboxGroup">
                            <van-swipe-cell v-for="item in resultList" :key="item.id">
                                <div class="result-item" @click="_tapItem(item)" v-touch:longtap="_longtapHandler">
                                    <div style="width: 100%;display: flex;justify-content: space-between;border-bottom: 1px solid #eeeeee">
                                        <div style="display: flex">
                                            <div style="margin-right: 20px" v-if="showCheck">
                                                <van-checkbox :name="item.id" shape="square"></van-checkbox>
                                            </div>
                                            <div>计划名称：{{item.name}}</div>
                                        </div>
                                        <div @click.stop="_goFile(item.id)">
                                            <img src="../../assets/file-nav.png" style="width: 20px">
                                        </div>
                                    </div>
                                    <div>状态：{{item.progress}}</div>
                                    <div>计划日期：{{$dateformat(item.planDate,'yyyy-mm-dd')}}</div>
                                    <div>任务下达单位：{{item.issuingUnit}}</div>
                                    <div>任务来源：{{item.taskSource}}</div>
                                    <div style="width: 100%">抽样人员：{{item.samplerNames}}</div>
                                    <div style="width: 100%">抽样地点：{{item.placeNames}}</div>
                                    <div>抽样进度：{{item.completionRatio}}</div>
                                    <div>产品：{{item.product}}</div>
                                </div>
                                <template #right v-if="item.progress==='草稿'||item.progress==='审批驳回'">
                                    <van-button square color="#75b7bd" text="提交 " class="swipe-cell-btn"
                                                @click="_submit([item.id])"></van-button>
                                    <van-button square type="info" text="编辑" class="swipe-cell-btn"
                                                @click="_edit(item)"></van-button>
                                    <van-button square type="primary" text="管理人员" class="swipe-cell-btn"
                                                @click="_peopleManage(item)"></van-button>
                                    <van-button square type="warning" text="管理地点" class="swipe-cell-btn"
                                                @click="_locManage(item)"></van-button>
                                    <van-button square type="danger" text="删除" class="swipe-cell-btn"
                                                @click="_del([item.id])"></van-button>
                                </template>
                            </van-swipe-cell>
                        </van-checkbox-group>
                    </van-list>
                </van-pull-refresh>
            </div>
            <div class="bottom-btn" v-if="showCheck">
                <van-button square block @click="_checkAll">{{checkAll?'取消全选':'全选'}}</van-button>
                <van-button square block type="danger" @click="_del(checkListValue)">删除</van-button>
                <van-button square block type="info" @click="_submit(checkListValue)">提交</van-button>
            </div>
        </template>
    </customer-navBar-layout>
</template>

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

    export default {
        name: "SamplingPlan",
        components: {},
        data() {
            return {
                formObj: {
                    name: '',
                    planDateBegin: '',
                    planDateEnd: '',
                    uname: '',
                    ctimeBegin: '',
                    ctimeEnd: '',
                    progress: '',
                    flag: 0
                },
                statusList: [
                    {value: 1, text: '草稿'},
                    {value: 2, text: '审批中'},
                    {value: 3, text: '审批通过'},
                    {value: 4, text: '审批驳回'},
                    {value: 5, text: '实施中'},
                    {value: 6, text: '完成'},
                ],
                key: '',
                showPopup: true,
                showCheck: false,
                checkListValue: [],
                resultList: [],
                page: 1,
                rows: 10,
                refreshing: false,//刷新中...
                loading: false,//加载中...
                finished: false,//没有更多数据
                planId: this.$route.query.planId
            }
        },
        watch: {
            checkListValue: function (oldVal, newVal) {
                console.log(oldVal, newVal)
            }
        },
        computed: {
            checkAll: function () {
                if (this.resultList.length) {
                    return this.checkListValue.length === this.resultList.length;
                } else {
                    return 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,
                    planId: this.planId,
                    ...this.formObj
                };
                if (this.key) {
                    data.name = this.key
                }
                return this.$serializeForm(data)
            },
            _getData: async function () {
                let result = await samplingPlan.page(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()
            },
            _back() {
                this.$router.go(-1)
            },
            _add() {
                this.$router.push({path: '/sampling_plan/sampling_plan_add', query: {title: '抽样计划添加'}})
            },
            _longtapHandler() {
                this.showCheck = true
            },
            _hideCheck() {
                this.showCheck = false
                this.checkListValue = []
            },
            _checkAll() {
                if (this.checkAll) {
                    this.$refs.checkboxGroup.toggleAll();
                } else {
                    this.$refs.checkboxGroup.toggleAll(true);
                }
            },
            _tapItem(item) {
                if (this.showCheck) {
                    if (this.checkListValue.indexOf(item.id) === -1) {
                        this.checkListValue.push(item.id);
                    } else {
                        this.checkListValue.splice(this.checkListValue.indexOf(item.id), 1);
                    }
                } else {
                    // if (item.testedType === 1) {
                    //     this.$router.push({path: '/sampling_plan/sampling_plan_detail_net', query: {id: item.id}})
                    // } else if (item.testedType === 0) {
                    //     this.$router.push({path: '/sampling_plan/sampling_plan_detail', query: {id: item.id}})
                    // } else {
                    //     this.$router.push({
                    //         path: '/sampling_plan/sampling_plan_detail_agriculture',
                    //         query: {id: item.id}
                    //     })
                    // }
                }
            },
            _edit(item) {
                this.$router.push({path: '/sampling_plan/sampling_plan_add', query: {id: item.id, title: '抽样计划编辑'}})
            },
            _peopleManage(item) {
                this.$router.push({path: '/sampling_plan/sampler_checked', query: {planId: item.id}})
            },
            _locManage(item) {
                this.$router.push({path: '/sampling_plan/loc_checked', query: {planId: item.id}})
            },
            _del(ids) {
                if (ids.length === 0) {
                    this.$toast('请至少选择一条数据！')
                } else {
                    this._delOk(ids)
                }
            },
            _delOk: async function (ids) {
                let result = await samplingPlan.deleteByIds(ids)
                if (result) {
                    this.$toast('操作成功！')
                    this._refresh()
                }
            },
            _submit() {
                if (this.checkListValue.length === 0) {
                    this.$toast('请至少选择一条数据！')
                } else {
                    // this._delOk(ids)
                    //    todo 提交
                }
            },
            _goFile(id) {
                this.$router.push({path: '/sampling_plan/file', query: {planId: id}})
            }
        }
    }
</script>

<style scoped>

</style>
