<template>
    <div class='pages' ref="scroll">
        <div class="scroll-box" ref="scroll-content">
            <van-tabs :active="active" sticky @change="hadelChangeTab">
                <van-tab title="待接单">
                    <card :tableData="list" @handleCLickReceive="handleCLickReceive">
                    </card>
                </van-tab>
                <van-tab title="待处理">
                    <card :tableData="list" @handelServiceConfirm="handelServiceConfirm"></card>
                </van-tab>
                <van-tab title="已完成">
                    <card :tableData="list"></card>
                </van-tab>
            </van-tabs>
        </div>
        <van-dialog v-model="showRole" title="请选择接单身份" show-cancel-button @confirm="receiveService">
            <van-radio-group v-model="serviceOrgType">
                <van-radio :name="item.serviceOrgType" v-for="(item) in roleList" :key="item.id">{{ item.serviceOrgName
                    }}</van-radio>
            </van-radio-group>
        </van-dialog>
        <van-dialog v-model="showScope" title="" show-cancel-button @confirm="receiveService">
            <p>服务时间</p>
            <span @click="showStart = true, showPopup = true" class="font-size13">{{ serviceTimeStart || '开始时间'
                }}</span><span class="tag-date">至</span><span @click="showEnd = true, showPopup = true"
                class="font-size13">{{ serviceTimeEnd || '结束时间' }}</span>
            <p>服务范围</p>
            <span class="font-size13" @click="showTree = true, showPopup = true">{{ serviceScopeName || '请选择范围'
                }}</span>
            <p>接单身份</p>
            <van-radio-group v-model="serviceOrgType">
                <van-radio :name="item.serviceOrgType" v-for="(item) in roleList" :key="item.id"
                    @click="handelChangeRole(item.serviceOrgId)">{{ item.serviceOrgName
                    }}</van-radio>
            </van-radio-group>
        </van-dialog>

        <van-popup v-model="showPopup" position="bottom">
            <van-datetime-picker v-if="showStart" v-model="serviceTimeStart" type="datetime" title="开始时间"
                @confirm="handelCLickConfirmStart" @cancel="showPopup = false" :min-date="minDate" />
            <van-datetime-picker v-if="showEnd" v-model="serviceTimeEnd" @confirm="handelCLickConfirmEnd"
                @cancel="showPopup = false" type="datetime" title="结束时间" :min-date="minDate" />
            <van-cascader v-if="showTree" v-model="cascaderValue" title="请选择范围" :options="treeOptions"
                @close="showTree = false, showPopup = false" @finish="onFinish"
                :field-names="{ text: 'objectName', value: 'objectId' }" />
        </van-popup>
    </div>
</template>
<script>
import card from './card.vue'
import throttle from 'lodash/debounce'
import { getServiceListRcv, getServiceListProcess, getServiceListCompleted, getCommonalityDetail, getMeasureDetail, getListMyIdentities, receiveService, getServiceScopeTree, serviceConfirm } from '@/api/service'
export default {
    data() {
        return {
            active: 0,
            clientHeight: false,
            scroll: null,
            pageNo: 1,
            pageSize: 4,
            list: [],
            total: 0,
            requestFlag: false,
            showRole: false,
            roleList: [],
            serviceOrgType: null,
            serviceOrgId: null,
            showScope: false,
            serviceTimeStart: null,
            serviceTimeEnd: null,
            showStart: false,
            showEnd: false,
            showTree: false,
            showPopup: false,
            minDate: new Date(),
            treeOptions: null,
            cascaderValue: null,
            serviceScopeName: null
        };
    },
    created() {
        this.getListMyIdentities()
        this.getServiceListRcv()
        this.getServiceScopeTree()
    },
    mounted() {
        this.clientHeight = document.documentElement.clientHeight; //可视高度
        console.log(this.clientHeight);
        this.$nextTick(() => {
            this.scroll = this.$refs.scroll;
            this.scroll.addEventListener('scroll', this.bottomScroll); //监听底部加载  		
        })
    },
    methods: {
        onFinish(value) {
            this.showTree = false;
            this.showPopup = false;
            this.serviceScopeList = value.selectedOptions.map(item => ({ objectType: item.objectType, objectId: item.objectId, objectName: item.objectName }))
            this.serviceScopeName = value.selectedOptions.map(item => item.objectName).join('-')
        },
        handelCLickConfirmStart(val) {
            this.serviceTimeStart = this.$dayjs(val).format('YYYY-MM-DD HH:mm:ss');
            this.showPopup = false;
            this.showStart = false;
        },
        handelCLickConfirmEnd(val) {
            this.serviceTimeEnd = this.$dayjs(val).format('YYYY-MM-DD HH:mm:ss');
            this.showPopup = false;
            this.showEnd = false;
        },
        //提交接单
        async receiveService() {
            let parm = {
                ...this.formData,
                id: this.serverId,
            }
            if (this.showScope) {
                parm.serviceScopeList = this.serviceScopeList;
                parm.serviceTimeStart = this.serviceTimeStart;
                parm.serviceTimeEnd = this.serviceTimeEnd;
                parm.serviceOrgType = this.serviceOrgType;
                parm.serviceOrgId = this.serviceOrgId;
            } else if (this.showRole) {
                parm.serviceOrgType = this.serviceOrgType;
                parm.serviceOrgId = this.serviceOrgId;
            }
            console.log(parm);
            let { data, code, msg } = await receiveService(parm)
            if (code === 0) {
                this.$toast.success('接单成功')
                this.showRole = false;
                this.pageNo = 1;
                this.list = [];
                this.getTableData();
            }
        },
        handelChangeRole(val) {
            this.serviceOrgId = val;
        },

        //接单
        handleCLickReceive(item) {
            this.showRole = item.source === 4;
            this.showScope = item.source === 1;
            this.serverId = item.id;
            if (item.source === 4) {
                this.getMeasureDetail()
            } else {
                this.getCommonalityDetail()
            }
        },
        //确认服务
        async handelServiceConfirm(val) {
            let { data, code, msg } = await serviceConfirm({ id: val.id })
            if (code === 0) {
                this.$toast.success('确认成功')
                this.pageNo = 1;
                this.list = [];
                this.getTableData();
            }
        },
        async getListMyIdentities() {
            let { data, code, msg } = await getListMyIdentities()
            if (code === 0) {
                this.roleList = data;
            }
        },
        async getMeasureDetail() {
            let { data, code, msg } = await getMeasureDetail({ id: this.serverId })
            if (code === 0) {
                this.formData = data;
            }
        },
        async getCommonalityDetail() {
            let { data, code, msg } = await getCommonalityDetail({ id: this.serverId })
            if (code === 0) {
                this.formData = data;
            }
        },
        async getServiceScopeTree() {
            let { data, code, msg } = await getServiceScopeTree({ id: this.serverId })
            if (code === 0) {
                this.treeOptions = [data];
            }
        },
        hadelChangeTab(e) {
            this.list = [];
            this.pageNo = 1;
            this.active = e;
            this.getTableData('tab')
        },
        //滚动加载
        bottomScroll: throttle(function () {
            let scrollTop = this.scroll.scrollTop; //滚动条距离顶部的高度
            let scrollHeight = this.scroll.scrollHeight; //滚动条的高度
            let clientHeight = this.scroll.clientHeight; //可视区域的高度
            if (scrollTop + clientHeight >= scrollHeight) {
                this.pageNo++;
                this.getTableData()
            }
        }, 500),

        getTableData(tab) {
            if ((this.active === 0 && this.requestFlag) || (tab && this.active === 0)) {
                this.getServiceListRcv();
            } else if ((this.active === 1 && this.requestFlag) || (tab && this.active === 1)) {
                this.getServiceListProcess();
            } else if ((this.active === 2 && this.requestFlag) || (tab && this.active === 2)) {
                this.getServiceListCompleted()
            }
            if (!this.requestFlag) {
                this.$toast({
                    message: '没有更多数据了',
                    duration: 1000
                })
            }
        },
        //获取待接单
        getServiceListRcv() {
            getServiceListRcv({
                pageNo: this.pageNo,
                pageSize: this.pageSize
            }).then(res => {
                this.total = res.total;
                this.requestFlag = res.data.list.length === this.pageSize;
                this.list = this.list.concat(res.data.list)
            }).catch(err => {

            })
        },
        // 获取待处理
        getServiceListProcess() {
            getServiceListProcess({
                pageNo: this.pageNo,
                pageSize: this.pageSize
            }).then(res => {
                this.total = res.total;
                this.requestFlag = res.data.list.length === this.pageSize;
                this.list = res.data.list;

            }).catch(err => {
            })
        },
        // 获取已完成
        getServiceListCompleted() {
            getServiceListCompleted({
                pageNo: this.pageNo,
                pageSize: this.pageSize
            }).then(res => {
                this.total = res.total;
                this.requestFlag = res.data.list === this.pageSize;
                this.list = this.list.concat(...this.list, ...res.list);
            }).catch(err => {
            })
        }
    },
    destroyed() {
        this.scroll.removeEventListener('scroll', this.bottomScroll);//移除滚动监听
    },
    components: { card },
    computed: {},
    watch: {}
}
</script>

<style lang='less' scoped>
:deep(.van-tabs__content) {
    padding: 0 10px 20px;
    box-sizing: border-box;
}

:deep(.van-dialog__content) {
    padding: 10px;
    box-sizing: border-box;
}
</style>
