<template>
    <global-page-swiper
        title="防风害管理"
        isDataList
        refresherEnabled
        loadingMoreEnabled
        auto
        ref="paging"
        :params="getSearchData"
        :padding="24"
        :tabList="tabList"
        tabsWidth="24%"
        @handleTabsChange="handleTabsChange"
        alone
        showNavRight
        navRightIcon="saixuan-01"
        navRightType="icon"
        @handleRightClick="navigateTo('/panel/windDamageManagement/search')"
    >
        <template #="{ item }">
            <template v-for="option in item.basicInfoList" :key="option.id">
                <view
                    class="item"
                    @tap="goDetails(item, option.id)"
                    v-if="(getSearchData.rxStatus && getSearchData.rxStatus == option.rxStatus) || getSearchData.rxStatus == ''"
                >
                    <view class="item-title">
                        <view class="left">
                            <custom-state :value="useGetDictByValue('wdm_isOpen', item.isOpen)"></custom-state>
                        </view>
                        <view class="right">
                            <global-tag :type="useGetDictByValue('wdm_rxStatusType', option.rxStatus)" style="margin-left: 12rpx">
                                {{ useGetDictByValue('wdm_rxStatus', option.rxStatus) }}
                            </global-tag>
                        </view>
                    </view>
                    <view class="item-content">
                        <view class="row" v-if="option.ac">机号:{{ option.ac }}</view>
                        <view class="row" v-if="item.terminal">航站:{{ baseStore.getTerminalObject[item.terminal] }}</view>
                        <view class="u-line-3">{{ option.windSpeed || '无' }}</view>
                    </view>
                    <view class="item-footer">
                        <view class="label">
                            <global-icon icon="calendar"></global-icon>
                            <text class="txt">
                                {{ timeStampFormat(option.proposedTime) }}
                            </text>
                        </view>
                        <view class="label u-line-1">
                            <global-icon icon="idcard"></global-icon>
                            <text class="txt">{{ tabIndex > 0 ? '操作人' : '巡场人员' }}:{{ option.name || '-' }}</text>
                        </view>
                    </view>
                    <view class="item-extra">
                        <view style="width: 120rpx">
                            <global-button type="primary" @tap.stop="goAppend(item, option.id)" v-if="item.isOpen == '1' && option.rxStatus == 2">
                                追加
                            </global-button>
                        </view>
                        <view class="mocp-color-danger-6" style="display: flex" v-if="option.isAbnormal == '1'">
                            <up-icon name="info-circle" color="#f53f3f"></up-icon>
                            <text style="margin-left: 4rpx">疑似异常，请关注</text>
                        </view>
                    </view>
                </view>
            </template>
        </template>
    </global-page-swiper>
</template>

<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { getPwdMooringListApi, getPwdOperateListApi, getPwdPatrolListApi, getPwdSandstormListApi } from 'mocp/api/windDamageManagement'
import useWindDamageManagementStore from 'mocp/store/windDamageManagement'
import { onUnload } from '@dcloudio/uni-app'
import { timeStampFormat } from 'mocp/utils/tool'
import { useGetDictByValue } from 'mocp/hooks/use-dict/useDict'
import { navigateTo } from 'mocp/utils/jump'
import useBaseStore from 'mocp/store/base'

const baseStore = useBaseStore()
const windDamageManagementStore = useWindDamageManagementStore()
const { getSearchData, tabIndex } = storeToRefs(windDamageManagementStore)
const tabList = [
    {
        name: '巡场检查单',
        api: getPwdPatrolListApi,
        url: '/panel/windDamageManagement/patrolDetails'
    },
    {
        name: '操作单',
        api: getPwdOperateListApi,
        url: '/panel/windDamageManagement/operateDetails'
    },
    {
        name: '系留单',
        api: getPwdMooringListApi,
        url: '/panel/windDamageManagement/mooringDetails'
    },
    {
        name: '防沙尘暴签署单',
        api: getPwdSandstormListApi,
        url: '/panel/windDamageManagement/sandstormDetails'
    }
]
const handleTabsChange = (value) => {
    windDamageManagementStore.setState('tabIndex', value)
}
const goDetails = (data, basicId) => {
    windDamageManagementStore.setState('basicId', basicId)
    windDamageManagementStore.setState('weatherId', data.id)
    windDamageManagementStore.setState('weatherSource', data.weatherSource)
    uni.$mocpJump.navigateTo(tabList[tabIndex.value].url)
}
//追击
const goAppend = (data, basicId) => {
    windDamageManagementStore.setState('basicId', basicId)
    windDamageManagementStore.setState('weatherId', data.id)
    windDamageManagementStore.setState('weatherSource', data.weatherSource)
    uni.$mocpJump.navigateTo('/panel/windDamageManagement/append')
}
//刷新
const paging = ref()
uni.$on('windDamageManagementReload', () => {
    paging.value?.reload()
})
onUnload(() => {
    uni.$off('windDamageManagementReload')
})
</script>
<style lang="scss" scoped>
@import 'mocpStatic/css/list.scss';
.item-extra {
    margin-top: 12rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>
