<template>
    <global-page-swiper
        title="我的跟机"
        isDataList
        refresherEnabled
        loadingMoreEnabled
        auto
        ref="paging"
        :padding="24"
        :transformData="transformData"
        :tabList="tabList"
        tabValueField="state"
        tabsWidth="50%"
        :chooseDataType="checkPermi('/workbench/edit') ? 'checkbox' : ''"
        @handleChooseData="handleChooseData"
        localPaging
        alone
    >
        <template #="{ item }">
            <supportedTaskItem :item="item" />
        </template>

        <template #bottom v-if="checkPermi('/workbench/edit')">
            <view class="footer-btn">
                <up-row gutter="10">
                    <up-col span="6">
                        <global-button type="primary" plain size="large" :radius="5" @tap="handleReset">清空选择</global-button>
                    </up-col>
                    <up-col span="6">
                        <global-button type="primary" size="large" :radius="5" @tap="handleConfirm">确认选择</global-button>
                    </up-col>
                </up-row>
            </view>
        </template>
    </global-page-swiper>

    <global-action-sheet v-model="showAction" :options="followAcTagAllDispose" @select="handleSelect" />
</template>

<script setup>
import { ref } from 'vue'
import { userTasksApi, updateFlyFollowAcApi } from 'mocp/api/supportedTask'
import supportedTaskItem from './components/supportedTaskItem.vue'
import { followAcTagAll } from 'mocp/utils/getFlightList'
import { orderBy } from 'lodash'
import Day from 'mocp/utils/dayjs'
import { checkPermi } from 'mocp/utils/permission'

const paging = ref(null)
const showAction = ref(false)
const followAcTagAllDispose = followAcTagAll.map((item) => {
    return {
        label: item,
        value: item
    }
})
const tabList = [
    {
        name: '今日及次日后跟机任务',
        params: {
            startT: Day().hour(5).minute(0).second(0).valueOf(),
            stopT: Day().add(2, 'day').hour(4).minute(59).second(59).valueOf()
        },
        api: userTasksApi
    },
    {
        name: '近三个月跟机历史',
        params: {
            startT: Day().add(1, 'day').subtract(3, 'month').hour(5).minute(0).second(0).valueOf(),
            stopT: Day().add(1, 'day').hour(4).minute(59).second(59).valueOf()
        },
        api: userTasksApi
    }
]
const selectList = ref([])

const transformData = (data) => {
    return orderBy(data.followAc, 'stdChn')
}
const handleChooseData = (data) => {
    selectList.value = data
}
const handleSelect = async (followStatus) => {
    try {
        const changeStatus = await Promise.all(
            selectList.value.map((item) =>
                updateFlyFollowAcApi({
                    id: item.id,
                    followStatus: followAcTagAll.indexOf(followStatus)
                })
            )
        )
        if (changeStatus.every((a) => a.code.toString() === '200')) {
            uni.$mocpMessage.success('修改成功')
            paging.value.reload()
        }
    } catch (e) {
        console.log('遍历修改状态错误', e)
    }
}
const handleReset = () => {
    paging.value.updateCache()
}
const handleConfirm = () => {
    if (!selectList.value?.length) return uni.$mocpMessage.error('请至少勾选一条数据')
    showAction.value = true
}
</script>
<style lang="scss" scoped>
@import './constants/supportedTask.scss';
</style>
