<template>
    <global-page-swiper
        title="布置工作"
        refresherEnabled
        loadingMoreEnabled
        :tabList="tabList"
        :api="getArrangeWorkListApi"
        :padding="24"
        tabValueField="state"
    >
        <template #="{ dataList }">
            <view class="item" v-for="item in dataList" :key="item.id" @tap="goDetails(item)">
                <view class="item-title">
                    <view class="left">
                        <custom-state :value="item.state == 1 ? 'OPEN' : 'CLOSE'"></custom-state>
                        <view class="txt u-line-1">{{ baseStore.getParamNameByValue('LayoutWorkType', item.workType) }}详情</view>
                    </view>
                    <view class="right u-line-1">{{ baseStore.getParamNameByValue('LayoutWorkType', item.workType) }}</view>
                </view>
                <view class="item-content u-line-3">
                    {{ item.taskDescribe }}
                </view>
                <view class="item-footer">
                    <view class="label">
                        <global-icon icon="calendar"></global-icon>
                        <text class="txt">
                            {{ timeStampFormat(item.startTime, { format: 'YYYY/MM/DD' }) }}
                            -
                            {{ timeStampFormat(item.feedbackTime, { format: 'YYYY/MM/DD' }) }}
                        </text>
                    </view>
                    <view class="label">
                        <global-icon icon="idcard"></global-icon>
                        <text class="txt">{{ item.presenter }}</text>
                    </view>
                </view>
            </view>
        </template>
    </global-page-swiper>
</template>

<script setup>
import { ref } from 'vue'
import useBaseStore from 'mocp/store/base'
import { timeStampFormat } from 'mocp/utils/tool'
import { getArrangeWorkListApi } from 'mocp/api/assign-work'

const tabList = ref([
    { name: 'OPEN', value: 1 },
    { name: 'CLOSE', value: 2 },
    { name: '全部', value: null }
])
const baseStore = useBaseStore()
//跳转
const goDetails = (data) => {
    uni.$mocpJump.navigateTo('/panel/assign-work/details', { id: data.id })
}
</script>
<style lang="scss" scoped>
@import './constants/list.scss';
</style>
